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!