Zusätzliche Daten über CSS-Only in Listen und Bannern ausgeben

Navigation

09. Jan 2014

Listen-Templates brauchen inzwischen in den meisten Fällen nicht mehr angepasst werden, um eigene Darstellungen umzusetzen.

Listen-Templates brauchen inzwischen in den meisten Fällen nicht mehr angepasst werden, um eigene Darstellungen umzusetzen. Mit Hilfe von CSS-Only können diese nun auch um beliebige Daten erweitert werden.

In den ausgelieferten Listen-Templates sind die wichtigsten Daten bereits enthalten und zur individuellen Formatierung vorbereitet. Je nach aufzulistenden Objekten sind zusätzliche Informationen in der Listendarstellung erwünscht. Bisher musste dazu das Listen-Template angepasst werden. In den meisten Fällen geht das nun auch direkt im CSS über -w-add-objectdata.

Standardliste um Objektinformation Strasse ergänzt

.listDefault_var0 .listEntry              {-w-add-objectdata:street}
.listDefault_var0 .listEntryData-street   {font-weight:bold}

Im Beispiel wird zusätzlich der Objektwert street ausgelesen. Ein ausgelesener Wert wird in ein Element mit der Klasse listEntryData-[NAMEDESWERTES] geschrieben und lässt sich so direkt formatieren.

Banner mit Veranstaltungsobjekten um Ort und Datum ergänzt

.listBannerSlider_var501 .listEntries .listEntryInfoLayer    {-w-add-objectdata:date,wd:extension/wd:object/wd:data[@id = 'dates']/wd:entry[@wIsCurrentElementSplit = '1']/@from,wd:extension/wd:object/wd:data[@id = 'dates']/wd:entry[@wIsCurrentElementSplit = '1']/@to,wd:extension/wd:object/wd:data[@id='location']/wd:category/text()}
.listBannerSlider_var501 .listEntries .listEntryData-date    {-w-jquery:jQuery(this).html(formatDateEvent(jQuery(this).next().html(), jQuery(this).next().next().html()));position:absolute;top:40px;left:10px;}
.listBannerSlider_var501 .listEntries .listEntryData-1       {display:none}
.listBannerSlider_var501 .listEntries .listEntryData-2       {display:none}
.listBannerSlider_var501 .listEntries .listEntryData-3       {-w-wsl:getCategoryText(path=/wDeutsch/veranstaltungen/categories/locations.wCategories.php);position:absolute;top:100px;left:10px;}

Im Beispiel werden Werte über xPath Ausdrücke ausgelesen. Diese werden dann durchnummeriert ausgegeben. Das Datum wird per jQuery und einer zusätzlichen JavaScript-Funktion formatiert. Die Bezeichnung der Kategorie wird über ein WSL-Tag auf Basis deren ID ermittelt und ausgegeben.