CSS-Rendering - Inhalte wie Bilder automatisch in passender Breite generieren

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").

Umsetzung in BASE 2.x
Umsetzung in BASE 1.x Projekten
Umsetzung in BASE 2.x

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.

Blidbearbeitung - Grösse anpassen
Blidbearbeitung - Grösse anpassen

Schritt 1: Ermitteln der Breite des aktuellen Elementes, in dem sich das Bild befindet

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.

Beispiel: Auszug aus picture.standard.wItem.php zum Setzen und Ermitteln des globalen Wertes

...
    <!-- 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.

Schritt 2: Abfrage des Bereiches und Setzen des globalen Wertes

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.

Beispiel: Auszug aus der design.css zur Formatierung entsprechender Bereiche / Blöcke

/* ... */
#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.

  • Das Weblication® CSS-Picture-Rendering berücksichtigt immer den zuerst gefundenen Wert innerhalb der design.css zum angesprochenen Selektor (z.B. #blockMainOuter). Zur Berechnung der Breite werden die Werte zu den CSS-Eigenschaften width, max-width, margin, padding und border berücksichtigt.
    Im Gegensatz dazu berücksichtigt ein Browser immer den zuletzt gefundenen Wert innerhalb einer CSS-Datei.
    Falls Sie für die Bildbreitenberechnung eine andere Breite setzen wollen, als dem Browser mitgegeben wird, können Sie somit für das CSS-Picture-Rendering eine konkrete Breitenangabe in Pixel innerhalb des zuerst definierten Selektors setzen und dem Browser im zuletzt definierten Selektor eine dynamische Breite mitgeben.
    Beispiel:
    #blockMainOuter {max-width:1920px}
    #blockMainOuter {width:100%;max-width:100%}
  • Beachten Sie, dass zur Ermittlung der Breite in der angegebenen CSS-Klasse zumindest im obersten Element eine Breite (in Pixel) definiert sein muss (z.B. #blockMainOuter {max-width:1920px})!
  • Verwenden Sie ausschliesslich die vollständige Schreibweise bei z.B. padding, margin, etc. Angaben (z.B. padding: 4px 8px 4px 8px und nicht padding: 4px 8px 4px)!
Umsetzung in BASE 1.x Projekten

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.

Blidbearbeitung - Grösse anpassen
Blidbearbeitung - Grösse anpassen

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.

Schritt 1: Ermitteln der Breite des aktuellen Elementes, in dem sich das Bild befindet

Zur Berechnung der Breite wird über das PHP-Framework auf den globalen Wert zurückgegriffen, der für die entsprechenden Bereiche gesetzt wird.

Beispiel: Auszug aus picture.standard.wItem.php zur Ermittlung des globalen Wertes

...
$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.

Schritt 2: Abfrage des Bereiches und Setzen des globalen Wertes

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.

Beispiel: Auszug aus includes.global.php zum Template "getWidthCurrentElement"

...
  <!-- 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.

Beispiel: Auszug aus der design.css zur Formatierung des rechten Bereiches

/* ... */
#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.

Wichtige Hinweise

  • Das Weblication® CSS-Picture-Rendering berücksichtigt immer den zuerst gefundenen Wert innerhalb der design.css zum angesprochenen Selektor (z.B. #blockMainOuter). Zur Berechnung der Breite werden die Werte zu den CSS-Eigenschaften width, max-width, margin, padding und border berücksichtigt.
    Im Gegensatz dazu berücksichtigt ein Browser immer den zuletzt gefundenen Wert innerhalb einer CSS-Datei.
    Falls Sie für die Bildbreitenberechnung eine andere Breite setzen wollen, als dem Browser mitgegeben wird, können Sie somit für das CSS-Picture-Rendering eine konkrete Breitenangabe in Pixel innerhalb des zuerst definierten Selektors setzen und dem Browser im zuletzt definierten Selektor eine dynamische Breite mitgeben.
    Beispiel:
    #blockMainOuter {max-width:1920px}
    #blockMainOuter {width:100%;max-width:100%}
  • Beachten Sie, dass zur Ermittlung der Breite in der angegebenen CSS-Klasse zumindest im obersten Element eine Breite (in Pixel) definiert sein muss (z.B. #blockMainOuter {max-width:1920px})!
  • Verwenden Sie ausschliesslich die vollständige Schreibweise bei z.B. padding, margin, etc. Angaben (z.B. padding: 4px 8px 4px 8px und nicht padding: 4px 8px 4px)!

Problemfälle und Lösungsmöglichkeiten

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.

Problemfall 1: Error: negative image width

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).

Error: negative image width: -13px!

Lösungsmöglichkeiten für den Problemfall:

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:

  1. Nutzen Sie das Debug-Werkzeug "CSS-Rendering debuggen", welches Sie über das Weblication® Panel unter 'Werkzeuge - Debug-Informationen - CSS-Rendering debuggen' finden.
  2. Hier finden Sie heraus, ob zum entsprechenden Bereich eine Breite ermittelt werden kann (siehe width-Angaben).
  3. Liegt diese bei width:0() bzw. einem negativen Wert, setzen Sie zum entsprechenden Bereich eine passende Breite bzw. Maximalbreite, z.B.:
/* Beispiel zum Bereich #blockContentFull:
/* vorher: */
#blockContentFull {float:left;width:$widthBlockContentFull}
/* nachher */
#blockContentFull {float:left;width:$widthMaxSectionInner;width:$widthBlockContentFull}

Problemfall 2: Bild ist unscharf / verpixelt

Die Breite eines Bildes wird zwar korrekt ermittelt, das Bild wird allerdings unscharf bzw. verpixelt darstellt.

Lösungsmöglichkeiten für den Problemfall:

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.