How to setup Latest News Template into EXT:news?

    How to setup Latest News Template into EXT:news?

     

    Are you in needs of ‘Latest News’ custom template & layout at news TYPO3 Extension? This post might useful for TYPO3 beginners who is not much aware with one of the most popular TYPO3 Extension:news. Unfortunately, default news only provides like Listing & Detail template selection at their plugin configuration, As of course each site require Latest news display like at landing/home page.

    No worries, It’s quite easy to setup with few line of code with TypoScript & Fluid. Here is the step by step details to setup Custom template & layout for news TYPO3 Extension. Let’s consider the example which require ‘Latest News’ Layout & Template selection at news.

    Step 1: Setup TSConfig

    Add below TSConfig code at your TYPO3 Root Page > Edit > Preferences > Resources > Page TSConfig

    tx_news.templateLayouts {     
    latestNewsLayout = Latest News Layout
    }

     

    Step 2: Template layout selection at News plugin options

    Our new template layout will automatically displaying at each News plugin configuration. Just open news plugin and go at Template > Template Layout and select ‘Latest News Layout’

    Step 3: Fluid Template Adjustment

    It’s time to setup our new template code into news Fluid template. Just open your extension template folder Partials/List/ and copy Item.html to the LatestNews.html

    Now edit the Templates/News/List.html as follows:

    <!-- THIS CODE NEED TO CHANGE... -->
    <f:for each="{news}" as="newsItem">   
           <f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings, className:className, view:'list'}"/>
    </f:for>
    <!-- ...WITH THIS -->
    <f:for each="{news}" as="newsItem">
        <f:if condition="{0:settings.templateLayout} == {0:'latestNewsLayout'}">
            <f:then>
                <f:render partial="List/LatestNews" arguments="{newsItem: newsItem, settings:settings, className:className, view:'list'}"/>
            </f:then>
        <f:else>
                <f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings, className:className, view:'list'}"/>
            </f:else>
        </f:if>
    </f:for>

    Of course, Now you just need to adjust your needed HTML wrapper to display proper layout at Partials/List/LatestNews.html

    That’s it, The Latest news template has been ready to be rendering at your awesome site!

    Leave A Comment

    Related News

    Categories

    • TYPO3 CMS

      Categories

      • TYPO3 Security
      • T3BD DAY
      • iTUG Usergroup
      • T3EXT DAY
      • T3BLOG DAY
      • T3VIDEO DAY
      • T3POLL DAY
      • TYPO3 Extension
      • TYPO3 Template
      • TYPO3 Translation
      • TypoScript
    • Neos CMS
    • TYPO3 Flow
    • WordPress
    • jQuery
    • Responsive