CSS-Only Varianten in Objekten nutzen

Navigation

05. Jul 2013

CSS-Only Varianten werden auch für Objekte unterstützt.

Inzwischen lassen sich auch Objekte mit CSS-Only Varianten individuell darstellen. Die verwendete Technik entspricht der von CSS-Only Varianten, wie sie bereits bei Elementen eingesetzt wird.

Über ein Pflegtag vom Typ selectCssClassVariant kann der Redakteur eine bereitgestellte Variante im Objekt auswählen. Die Varianten können, wie bei Elementen gewohnt, im CSS definiert werden. Sobald eine neue Variante im CSS definiert wurde, steht diese sofort im Editor zur Verfügung.

Pflegetag für Variante innerhalb des Objektes

<div class="wEditorExtensionLabel wEditorElementValue"><!-- web:text:start editor="selectCssClassVariant" valueDefault="0" onchange="wEditor.saveDraftAndReload();" pathCss="<xsl:value-of select="$wCSSPath"/>" cssClass="objectSlide" validator="" inputStyle="width:auto" --><xsl:value-of select="/wd:document/wd:extension/wd:object/wd:data[@id = 'objectLayout']/text()"/><!-- web:text:stop --></div>

Im CSS definierte Varianten

/*@wCssFragment{class:objectSlide;variant:0;caption:Standard;caption-en:Default}*/
.objectSlide_var0               {}

/*@wCssFragment{class:objectSlide;variant:1;caption:Hervorgehoben;caption-en:Highlighted}*/
.objectSlide_var1               {}

Ist ein Objekt mit einer Layout-Variante ergänzt worden, wird diese sowohl in der Detailseite als auch in der Auflistung ergänzt. Dadurch steht Ihnen die Möglichkeit frei, die Objektdarstellung nach Belieben zu gestalten, indem Sie die entsprechenden CSS-Klassen definieren.

Ergänzung der Klasse in der Datailseite

<body class="body object-slide object-slide_var1">
  ...

Ergänzung der Klasse in der Liste

<li class="listEntry listEntryObject-slide listEntryObject-slide_var1">
  ...