Assorted snippets

This section contains snippets making EXT:news more awesome which might be useful for your projects as well.

Show FAL properties in fluid

Every property of a file, e.g. the copyright (available via EXT:filemetadata) can be rendered in templates by using e.g. {file.originalResource.properties.copyright}.

A full example can look like this

<f:for each="{newsItem.mediaNonPreviews}" as="mediaElement">
    <div class="thumbnail">
        <f:media file="{mediaElement}" class="img-fluid" />
        <f:if condition="{mediaElement.originalResource.properties.copyright}">
            <small>{mediaElement.originalResource.properties.copyright}</small>
        </f:if>
    </div>
</f:for>

Use <f:debug>{mediaElement.originalResource.properties}</f:debug> to get all available properties

Render category rootline

If you want to show not only the title of a single category which is related to the news item but the complete category rootline use this snippets.

<f:if condition="{category:newsItem.firstCategory}">
   <ul class="category-breadcrumb">
      <f:render section="categoryBreadcrumb" arguments="{category:newsItem.firstCategory}" />
   </ul>
</f:if>

and

<f:section name="categoryBreadcrumb">
   <f:if condition="{category}">
      <f:if condition="{category.parentCategory}">
         <f:render section="categoryBreadcrumb" arguments="{category:category.parentCategory}" />
      </f:if>
      <li>{category.title}</li>
   </f:if>
</f:section>

Use current content element in the template

If you ever need information from the content element itself, you can use {contentObjectData.header}.

Use current page in the template

If you ever need information from the current page, you can use {pageData.uid}.

Sort tags

If you want to sort the tags of a news item, you can use a custom ViewHelper or EXT:vhs:

<ul>
   <f:for each="{newsItem.tags->v:iterator.sort(order: 'ASC', sortBy: 'title')}" as="tag">
      <li>{tag.title}</li>
   </f:for>
</ul>

Render news items in columns

If you need to list news next to each other and need some additional CSS classes, you can the following snippet. The provided example will wrap 3 items into a div with the class "row".

<f:for each="{news -> n:iterator.chunk(count: 3)}" as="col" iteration="cycle">
   <div class="row">
      <f:for each="{col}" as="newsItem">
         <div class="col-md-4">
            <f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}"/>
         </div>
      </f:for>
   </div>
</f:for>