.. _templatesSnippets:

=================
Assorted snippets
=================

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

.. contents::
        :local:
        :depth: 1

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

.. code-block:: html

    <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

Improved back links
^^^^^^^^^^^^^^^^^^^
The back link on a detail page is a fixed link to a given page. However it might be that you use multiple list views
and want to change the link depending on the given list view.

A nice solution would be to use this JavaScript jQuery snippet:

.. code-block:: javascript

   if ($(".news-backlink-wrap a").length > 0) {
       if(document.referrer.indexOf(window.location.hostname) != -1) {
           $(".news-backlink-wrap a").attr("href","javascript:history.back();");
       }
   }

Creating links with Fluid
^^^^^^^^^^^^^^^^^^^^^^^^^

Besides the ViewHelper :html:`<n:link />` you can also use the ViewHelpers of Fluid itself:

.. code-block:: html

   <f:link.page pageUid="13" additionalParams="{tx_news_pi1: {controller: 'News',action: 'detail', news:newsItem.uid}}">{newsItem.title}</f:link.page>
   <a href="{f:uri.page(pageUid:13,additionalParams:'{tx_news_pi1:{controller:\'News\',action:\'detail\',news:newsItem.uid}}')}">{newsItem.title}</a>

Set n:link target page in Fluid
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
If the detail page should not be set in the plugin or by a category, it can also be set within the template:

.. code-block:: html

   <n:link
      newsItem="{newsItem}"
      configuration=“{parameter:settings.somePid}"
      settings="{settings}" title="{newsItem.title}"><f:translate key="more-link"/></n:link>

The setting `settings.somePid` can e.g. set with `plugin.tx_news.settings.somePid=123`.

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.

.. code-block:: html

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

and

.. code-block:: html

   <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 :html:`{contentObjectData.header}`.

Use current page in the template
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
If you ever need information from the current page, you can use :html:`{pageData.uid}`.

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

.. code-block:: html

   <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".

.. code-block:: html

   <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>

Override pagination labels
--------------------------
To override the labels used in the pagination, you can use the following TypoScript snippet:

.. code-block:: typoscript

   plugin.tx_fluid {
       _LOCAL_LANG {
           // default for default = english language
           default {
               widget.pagination.next = my custom next
           }
           de {
               widget.pagination.next = nächste Seite
           }
       }
   }

As an alternative it is also possible to adopt the partial `List/Pagination.html` and use XLF files of your own extension.

.. code-block:: html

   <a href="...">
      {f:translate(key:'widget.pagination.next', extensionName: 'yourSitePackage')}
   </a>