Veröffentlichungsdatum: 23. Juni 2017
Änderungsdatum: 29. November 2018
bild grafik picture element grösse größe breite anpassen anpassung berechnung berechnen rendering css
Weblication® CMS passt Inhalte, wie z.B. Bilder, über das CSS-Picture-Rendering automatisch auf die korrekte Größe an. Die Berechnung erfolgt über die Breitenangaben der im CSS definierten Klasse.
Weblication® CMS bietet mit dem CSS-Rendering eine Funktion, die Ihnen das Einbinden von Inhalts-Elementen enorm erleichert. Über die Templates wird passend zum aktuellen Inhalt (z.B. Container, Spalte, etc.) die zur Verfügung stehende Breite ermittelt, um die Inhaltselemente (Bilder, Banner, mehrspaltige Container, Container, etc.) in korrekter Breite darzustellen. Eine manuelle Angabe der Breite ist nicht erforderlich!
Dieser Artikel bezieht sich auf BASE Classic Projekte! Das BASE (Mobile First) Projekt ist zur Bildbreitenberechnung komplett anders umgesetzt und setzt konsequent auf Responsive Images, um eine optimale Bildqualität bei gleichzeitig minimaler Bildgröße auszuliefern (zum Artikel "BASE (Mobile First): Responsive Bilder").
Weblication® CMS berechnet über die XSL-Templates einer aktuellen BASE 2.x Projektbasis bzw. Weblics® 2.x automatisch die zur Verfügung stehende Breite. Dies ist gerade bei Bildern ein wichtiges Instrument, um passend zum Container oder zur Spalte, in dem sich ein Bild (oder sonstiges Element) befindet, die richtige Breite (z.B. Bildgröße) zu ermitteln und zu generieren.
Wie das funktioniert, zeigen wir Ihnen anhand des Weblics® Bildelement, welches bereits mit der BASE 2.x Projektbasis mit ausgeliefert wird. Das Strukturelement des eingebundenen Bildes ermöglicht Ihnen unter anderem, die Grössen des Bildes festzulegen. Über die Auswahl "Größe anpassen" wird das Bild auf die Breite des Containers angepasst, in dem das Bild liegt.
Zur Berechnung der Breite wird über das PHP-Framework auf den globalen Wert zurückgegriffen, der für die entsprechenden Bereiche gesetzt wird.
Der globale Wert "widthCurrentElement" wird in aktuellen BASE 2.x Projekten bzw. Weblics® 2.x im zugehörigen XSL-Template eines Elementes gesetzt. Nachfolgend wird dies anhand des Bild-Elementes demonstriert.
... <!-- Ermittelt die Breite des aktuellen Elements --> <xsl:variable name="widthElementInner"><xsl:choose><xsl:when test="php:functionString('method_exists', 'wCSS', 'getWidthInner')"><xsl:value-of select="php:functionString('wCSS::getWidthInner', $wCSSPath, concat('.elementStandard .elementContent .elementPicture .elementPicture_var', $layout), php:functionString('wEnv::getGlobalValue', 'innerWidthCurrentElement'))"/></xsl:when><xsl:otherwise><xsl:value-of select="php:functionString('wEnv::getGlobalValue', 'innerWidthCurrentElement')"/></xsl:otherwise></xsl:choose></xsl:variable> <xsl:value-of select="php:function('wEnv::setGlobalValue', 'widthCurrentElement', $widthElementInner)"/> ... ... var widthCurrentElement = parseInt('<xsl:value-of select="php:function('wEnv::getGlobalValue', 'widthCurrentElement')"/>'); ... var pictureWidth = widthCurrentElement; ... ...
Kann ausgehend von einem Element (z.B. Bild-Element) keine konkrete Breite (in Pixel) ermittelt werden, wird so lange die Elemente nach oben gesucht, bis eine konkrete Breite definiert ist. Letzte Instanz ist dabei die globale Datei includes.global.php. Dort wird zu den jeweiligen Inhaltsbereichen (z.B. content1) der globale Wert innerWidthCurrentElement auf Grundlage der Breitenangaben der design.css abhängig von den Blocknamen gesetzt.
Innerhalb der includes.global.php erfolgt - wie in Schritt 1 schon erwähnt - die Abfrage der Selektoren, welche die erforderlichen Breitenangaben (in Pixel) definiert haben. Dies kann entweder der äussere Bereich (z.B. #blockMainOuter) oder auch der Inhaltsbereich (#blockContent, #blockContentFull, etc.) sein. Hierfür ist in den Templates der jeweiligen Bereiche (z.B. content1, content2, etc.) das Setzen und Abfragen des globalen Wertes innerWidthCurrentElement definiert.
Beim Abfragen der Werte wird auf die Selektoren in der design.css zurückgegriffen, welche die Breitenangaben für die jeweiligen (Inhalts-) Bereiche definiert haben.
/* ... */ #blockMainOuter {margin:10px auto;max-width:$widthBlockMainOuter;background-color:$backgroundColorContent;box-shadow:none} /* ... */ #blockContentFull {float:left;width:$widthBlockContentFull} /* ... */ #blockContentFullLeft {float:left;width:$widthBlockContentFullLeft} /* ... */ #blockContentFullRight {float:left;width:$widthBlockContentFullRight} /* ... */ #blockContent {float:left;width:$widthBlockContent} /* ... */
Die BASE Projektbasis verfügt im Standard bereits über Breitendefinitionen für nahezu alle Bereiche (siehe includes.global.php). Sofern Sie eine eigene Struktur und abweichende CSS-Klassen verwenden, passen Sie die entsprechenden Templates bzw. die design.css passend zu Ihrer Umsetzung an.
Dieser Artikel basiert auf einem BASE 1.x Projekt!
Weblication® CMS berechnet automatisch die richtige Bildgröße, wenn Sie Bilder in Inhaltsseiten einbinden. Wie das funktioniert, zeigen wir Ihnen anhand des Weblics® Bildelement, welches bereits mit der BASE Projektbasis mit ausgeliefert wird.
Das Strukturelement des eingebundenen Bildes ermöglicht Ihnen unter anderem, die Größen des Bildes festzulegen. Über die Auswahl "Größe anpassen" wird das Bild auf die Breite des Containers angepasst, in dem das Bild liegt.
Das Bildelement prüft beim Generieren der Seite über das XSLT-Template (picture.standard.wItem.php), ob "Größe anpassen" ausgewählt wurde. Die Berechnung der Bildbreite erfolgt ausgehend vom betreffenden Element (z.B. Bild-Element, Spalte, etc.) durch Abfrage der Breite des höhergeordneten Containers. Das System zieht zur Abfrage der Breite das erste Vorkommen des entsprechenden Containers bzw. Elementes heran, worin die Breitenangabe (width) gesetzt ist.
Zur Berechnung der Breite wird über das PHP-Framework auf den globalen Wert zurückgegriffen, der für die entsprechenden Bereiche gesetzt wird.
...
$pictureWidth = "<xsl:value-of select="php:function('wEnv::getGlobalValue', 'widthCurrentElement')"/>";
...
Der globale Wert "widthCurrentElement" wird über das Template "getWidthCurrentElement" definiert, welches in der includes.global.php abgelegt ist.
Welche Breite für einen Bereich definiert werden soll, legen Sie in der includes.global.php innerhalb des Templates "getWidthCurrentelement" fest. Dadurch, dass diese globale Datei im Kopf des Ansichtstemplates (meist: standard.wDocument.php ) eingelesen wird, steht dieses Template in allen Inhaltsseiten zur Verfügung, welche dieses Ansichtstemplate verwenden.
... <!-- Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php --> <!-- Ermittelt die Breite des aktuellen Elementes--> <xsl:template name="getWidthCurrentElement"> <xsl:choose> <!-- Falls das Element auf der rechten Seite steht --> <xsl:when test="ancestor::*[@id = 'content2']"> <xsl:variable name="blockRight_width"><xsl:value-of select="php:functionString('wCSS::getWidthCol', $wCSSPath, '#blockRight', '(int)width')"/></xsl:variable> <xsl:value-of select="php:function('wEnv::setGlobalValue', 'widthCurrentElement', $blockRight_width)"/> </xsl:when> ...
Innerhalb des Templates "getWidthCurrentElement" wird abgefragt, in welchem Bereich sich das aktuelle Element befindet (z.B. content2 (rechter Bereich)). Für diesen Bereich wird dann definiert, aus welcher CSS-Klasse/ID (z.B. #blockRight) die Breite ermittelt werden soll. Dies erfolgt über das PHP-Framework und bezieht sich zur Abfrage immer auf die design.css des Projektes und dort das erste Vorkommen der entsprechenden CSS-Klasse bzw. ID.
/* ... */ #blockRight {float:left;width:220px;margin:20px 0 0 10px} /* Beachten Sie, dass Sie die vollständige Schreibweise einsetzen, also alle 4 Werte (top, right, bottom, left) zu margin, padding, etc. angeben! */ /* ... */
Die BASE Projektbasis verfügt im Standard bereits über Breitendefinitionen für nahezu alle Bereiche (siehe includes.global.php). Sofern Sie eine eigene Struktur und abweichende CSS-Klassen verwenden, passen Sie das Template "getWidthCurrentelement" entsprechend Ihrer Umsetzung an.
Vorab der nachfolgend angeführten Problemfälle weisen wir auf eine Sonderfall hin:
Bei einem Projekt, welches die Breiten der Blöcke ausschliesslich prozentual definiert hat, müssen Sie wegen des CSS-Picture-Rendering zumindest dem obersten Block (ggf. auch dem Inhaltsblock) eine Breitenangabe in Pixel geben. Ansonsten fehlt der Software die Berechnungsgrundlage für die Bildgenerierung.
Wenn die vom System ermittelte Breite, welche die Grundlage der Bild Breitenberechnung ist, zu gering oder Null (0 Pixel) ist, führt dies zu einem negativen Ergebnis in der Berechnung. Diese macht sich für angemeldete Administratoren in einer Meldung bemerkbar (Beispiel siehe rechts).
Ursache ist in den meisten Fällen, daß über die design.css für den entsprechenden Bereich keine Breite angegeben ist bzw. vom System nicht ausgemacht werden kann.
Zur Lösung des Problemes gehen Sie am besten wie folgt vor:
/* Beispiel zum Bereich #blockContentFull:
/* vorher: */
#blockContentFull {float:left;width:$widthBlockContentFull}
/* nachher */
#blockContentFull {float:left;width:$widthMaxSectionInner;width:$widthBlockContentFull}
Die Breite eines Bildes wird zwar korrekt ermittelt, das Bild wird allerdings unscharf bzw. verpixelt darstellt.
Ursache ist in den meisten Fällen ein nicht zum Bild passendes Seitenverhältnis (aspectratio), welches z.B. über CSS-Only (-w-aspectratio) definiert werden kann. Passen Sie dies entsprechend an.