• Home
  • /
  • Blog
  • /
  • 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!

 

Sanjay Chauhan - TYPO3 Technopreneur

Sanjay Chauhan - TYPO3 Technopreneur

A young technology enthusiast and entrepreneur. At 24, he co-founded NITSAN – a TYPO3 Agency in Bhavnagar, India. He is sought-after marketing face of NITSAN, is accredited with the management of customer-service teams, collaborations with agencies and clients, projects executions, and more. A tech guy in every sense of the word, Sanjay is the real TYPO3 Guru at NITSAN.


Leave A Comment

Related News

Read Also