Spezielle Breite für CSS-Picture-Rendering setzen
Veröffentlichungsdatum: 26. August 2013
Änderungsdatum: 09. November 2017
Die automatische Bildgrößenberechnung über CSS-Angaben (CSS-Picture-Rendering) lässt sich über das HTML Seiten-Template individuell beeinflussen.
Das Weblication® CSS-Picture-Rendering können Sie nun auch individuell beeinflussen.
Soll ein Bereich eine andere Inhaltsbreite erhalten als global für den Inhalt definiert, kann dies der XSL-Transformation über das HTML Seiten-Template mitgegeben werden.
Im Beispielfall wird über das Weblic® CSS Definition innerhalb der Unternehmen-Seite eine andere Breite für den Inhaltsbereich (#blockContent) gesetzt (z.B. width:420px anstatt der sonst errechneten 490px). Ein Bild innerhalb der Seite (z.B. /base/unternehmen/index.php) würde beim Seitenaufruf lediglich über CSS auf die passende Breite heruntergerechnet werden.
Beispiel: Auszug aus Weblic/Element "CSS einbinden" in /base/unternehmen/index.php
#blockContent {width:420px}Um das Bild auch physisch über das IMG-Tag auf die individuelle Breite herunterzurechnen, können Sie ab CMS Version 008.000.107.000 dem CSS-Picture-Rendering über das HTML Seiten-Template die individuelle Breite mitgeben.
Definieren Sie innerhalb der xsl:stylesheet Tags des HTML Seiten-Templates ein wslPre:php Bereich, der die CSS-Breitenangabe für den gewünschten Selektor setzt. Die Abfrage um den Aufruf sorgt dafür, dass dies nur für den Verzeichnisbereich greift, der in zweiter Ebene (/Erste-Ebene/Zweite-Ebene/) dem Muster entspricht (-> /unternehmen/). Durch die Anweisung über wslPre steht die individuelle Breite während der XSL-Transformation dem CSS-Picture-Rendering bereits zur Verfügung.
Bilder innerhalb dieses Bereiches, die sich automatisch der Größe des umgebenden Blockes anpassen, werden somit auch physisch auf die gewünschte Breite runtergerechnet.
Beispiel: Auszug aus dem HTML Seiten-Template (z.B. standard.wDocument.php)
... <wslPre:php> if(wPathName::getDirName(wPathName::getDirTop(wPageCur::getPath(), 2)) == 'unternehmen'){ wCSS::setWidthBlock('#blockContent', 420); } </wslPre:php> ...