call now

Skip to main content

tx_news Template Layouts

Szenario

Sie möchten verschiedene News Listenansichten verwenden. Als Beispiel 3 verschieden Ansichten mit:

Kategorie und Tags

Ohne Kategorie aber mit Tags

Ohne Kategorien und ohne Tags

Template Layout auswählen

Template erweitern

Dazu erweitert man das Template Private/Templates/News/List/List.html (natürlich nicht in der Extension selbst, sondern in einem separaten Verzeichnis, da es sonst bei einem Update der Extension überschrieben wird).

Dzu kopiert man folgenden Teil des Templates und fügt die hier fett orange markierten Zeilen ein, bzw. ändern den Namen des Partial:

<f:if condition="{settings.templateLayout} == 1">
<f:if condition="{settings.hidePagination}">
<f:then>
   <f:for each="{news}" as="newsItem" iteration="iterator">
<f:render partial="List/Itemnocat" arguments="{newsItem:newsItem,settings:settings,iterator:iterator}" />
</f:for>
</f:then>
<f:else>
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}" initial="{offset:settings.offset,limit:settings.limit}">
<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
<f:render partial="List/Itemnocatandtag" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:for>
</n:widget.paginate>
</f:else>
</f:if>
</f:if>
<f:if condition="{settings.templateLayout} == 2">
<f:if condition="{settings.hidePagination}">
<f:then>
   <f:for each="{news}" as="newsItem" iteration="iterator">
<f:render partial="List/Itemnocat" arguments="{newsItem:newsItem,settings:settings,iterator:iterator}" />
</f:for>
</f:then>
<f:else>
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}" initial="{offset:settings.offset,limit:settings.limit}">
<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
<f:render partial="List/Itemnocat" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:for>
</n:widget.paginate>
</f:else>
</f:if>
</f:if>
<f:if condition="{settings.templateLayout} == 3">
<f:if condition="{settings.hidePagination}">
<f:then>
   <f:for each="{news}" as="newsItem" iteration="iterator">
<f:render partial="List/Itemnocat" arguments="{newsItem:newsItem,settings:settings,iterator:iterator}" />
</f:for>
</f:then>
<f:else>
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}" initial="{offset:settings.offset,limit:settings.limit}">
<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:for>
</n:widget.paginate>
</f:else>
</f:if>
</f:if>

Bitte die Umbrüche im Code wegdenken.

Nun müssen die Partials angelegt werden.

Partial mit Tag und Kategorien als Links

Dazu kopiert man das Partial Private/Partials/List/Item.html und erweitert es.

Die Änderungen sind wieder fett und orange, bzw. nur fett markiert. Der orange markierte Teil ist hier auskommentiert, funktioniert aber genauso, wie der fett markierte. Wichtig ist, dass im Plugin der Haken bei overridedemand NICHT gesetzt ist.

<f:link.page pageUid="{settings.listPid}"

setzt voraus, das die ListPID im setup des TS Template gesetzt ist.

plugin.tx_news.settings.listPid = 4926

Dieses Partial behält den Namen Item.html

<f:if condition="{newsItem.categories}">
<!-- first category -->
<span class="news-list-category" itemprop="keywords">
<f:for each="{newsItem.categories}" as="category">
<!--<f:link.action arguments="{overwriteDemand:{categories:category}}">{category.title}</f:link.action>-->
<f:link.page pageUid="{settings.listPid}" additionalParams="{tx_news_pi1:{overwriteDemand:{categories: category}}}">{category.title}</f:link.page>
</f:for>
</span>
</f:if>
 <f:if condition="{newsItem.tags}">
<!-- Tags -->
<span class="news-list-tags" itemprop="keywords">
<f:for each="{newsItem.tags}" as="tag">
<!--<f:link.page pageUid="{settings.listPid}" additionalParams="{tx_news_pi1:{overwriteDemand:{tags: tag}}}">{tag.title}</f:link.page>-->
<f:link.action arguments="{overwriteDemand:{tags:tag}}">{tag.title}</f:link.action>
</f:for>
</span>
</f:if>

Für die weiteren partials genügt es, die nicht gewünschten Bereiche auszukommentieren, bzw. zu entfernen

Das Parial ohne Kategorien und Tags Partial erhält dann den Namen Itemnocatandtag.html

<!--
<f:if condition="{newsItem.categories}">
<!-- first category -->
<span class="news-list-category" itemprop="keywords">
<f:for each="{newsItem.categories}" as="category">
<!--<f:link.action arguments="{overwriteDemand:{categories:category}}">{category.title}</f:link.action>-->
<f:link.page pageUid="{settings.listPid}" additionalParams="{tx_news_pi1:{overwriteDemand:{categories: category}}}">{category.title}</f:link.page>
</f:for>
</span>
</f:if>
 <f:if condition="{newsItem.tags}">
<!-- Tags -->
<span class="news-list-tags" itemprop="keywords">
<f:for each="{newsItem.tags}" as="tag">
<!--<f:link.page pageUid="{settings.listPid}" additionalParams="{tx_news_pi1:{overwriteDemand:{tags: tag}}}">{tag.title}</f:link.page>-->
<f:link.action arguments="{overwriteDemand:{tags:tag}}">{tag.title}</f:link.action>
</f:for>
</span>
</f:if>
-->

Im Partial ohne Kategorien aber mit Tags entfernt lediglich die Kategorien aus den Partial und benennt das Partial Itemnocat.html

 <f:if condition="{newsItem.tags}">
<!-- Tags -->
<span class="news-list-tags" itemprop="keywords">
<f:for each="{newsItem.tags}" as="tag">
<!--<f:link.page pageUid="{settings.listPid}" additionalParams="{tx_news_pi1:{overwriteDemand:{tags: tag}}}">{tag.title}</f:link.page>-->
<f:link.action arguments="{overwriteDemand:{tags:tag}}">{tag.title}</f:link.action>
</f:for>
</span>
</f:if>

Wichtig ist, dass die Partials genauso heißen, wie im Template List.html angegeben. Bitte auf Tippfehler prüfen. Wenn die Dateien gespeichert und hochgeladen sind und der Cache geleert ist, können nun die verschiedenen Layouts zugewiesen werden.

Template Layouts und SeitenTSconfig

Zunächst werden die Layouts in den Seiteneigenschaften der Rootseite, Registerkarte Resources eingetragen.

#News Templates
tx_news.templateLayouts {
 1 = Ohne Kategorien
 2 = Mit Kategorien und Tags
 3 = Ohne Kategorien und Tags
 }

Im Plugin kann auf der Registerkarte Template dann das Layout für das Plugin ausgewählt werden.

call now