Pflegemasken über CSS konfigurieren

Navigation

14. Nov 2012

Pflegemasken für listenbasierte Weblics lassen sich über CSS konfigurieren. So können die Masken optimal auf die CSS-Varianten abgestimmt werden.

Mit der BASE 2.x werden die Varianten von Bildergalerien und Banner-Slider nicht mehr über einzelne Zeilen-Templates, sondern über CSS gesteuert. Sie können selbstverständlich beliebige Kopien der Standard-Templates machen und wie bisher auch eigene Templates anlegen. Sie müssen es aber beim Erstellen einer neuen Variante nicht mehr.

Da Varianten nun über CSS gesteuert werden können, müssen die dafür optimierten Pflegemasken natürlich auch über CSS gesteuert werden. Nur so profitieren Sie als Entwickler von dieser Erweiterung und können Anpassungen noch schneller und einfacher durchführen.

CSS-Variante 4 der Bildergalerie

/*@wCssFragment{class:listPictureGallery;variant:4;caption:Automatischer Wechsel ohne Blätterfunktion}*/
.listPictureGallery_var4                                                                      {-w-editmaskExtended-pictureaspectratio:no;-w-editmaskExtended-picturewmode:yes}
.listPictureGallery_var4 .listInner                                                           {position:relative;overflow:hidden}
.listPictureGallery_var4 .listMoverBack                                                       {display:none;}
.listPictureGallery_var4 .listMoverForward                                                    {display:none;}
.listPictureGallery_var4 .listEntries                                                         {width:100%;position:relative;overflow:hidden;margin:0 0 10px 0;}
.listPictureGallery_var4 .listEntries .listEntriesInner                                       {}
.listPictureGallery_var4 .listEntries .listEntry                                              {display:none;position:relative;overflow:hidden;-w-animation:fadeIn}
.listPictureGallery_var4 .listEntries .listEntrySelected                                      {display:block}
.listPictureGallery_var4 .listEntries .listEntryButtons                                       {position:absolute;top:2px;right:0}
.listPictureGallery_var4 .listEntries .listEntry a                                            {text-decoration:none}
.listPictureGallery_var4 .listEntries .listEntryImage                                         {display:block;width:100%;-w-aspectratio:1.333 !important;-w-picture-mode:crop}
.listPictureGallery_var4 .listEntries .listEntryTitle                                         {display:none}
.listPictureGallery_var4 .listEntries .listEntryDescription                                   {display:none}
.listPictureGallery_var4 .listEntriesPreview                                                  {display:none}

Wenn wir die CSS-Definition betrachten, fallen bereits in der ersten Zeile Attribute mit dem Prefix -w-editmaskExtended auf. Genau diese Attribute werden genutzt, um die entsprechenden Eingabefelder für die aktuelle Variante zur Verfügung zu stellen.

In diesem Beispiel darf der Redakteur das Seitenverhältnis der Bilder nicht einstellen, während er den Bildmodus pro Galerie wechseln kann.

Weiter unten im Quelltext finden sich die CSS Angaben zur Steuerung des Seitenverhältnisses -w-aspectratio und -w-picture-mode. Diese mit -w beginnenden Angaben werden bei der Ausgabe rausgefiltert, da sie nur von der Bildergalerie über das CSS-Renderung genutzt werden.

Entsprechend der definierten Pflegemaske wird in diesem Fall das Seitenverhältnis nicht zur Pflege angeboten. Durch die -w-aspectratio:1.333 !important Angabe wird außerdem verhindert, dass vom Redakteur bereits definierte Angaben berücksichtigt werden. Egal was in den Seiten also eingetragen ist, durch !important wird immer die Angabe aus der CSS Datei verwendet.

Bei der Angabe -w-picture-mode:crop wird hingegen der in der Pflegemaske definierte Wert genommen. Falls vom Redakteur kein spezieller Wert definiert wurde, wird der Wert aus der CSS-Datei verwendet.

Dieses Beispiel macht deutlich, dass Darstellungsoptionen sowohl vom Redakteur angepasst, als auch über CSS festgelegt werden können. Der Entwickler entscheidet also letztlich immer, was erlaubt ist und was nicht und kann bereits gemachte Änderungen auch nachträglich überschreiben.