News-Latest with the TYPO3 Extension „news“ respectively „tx_news“

a. Structure of the Templates

We have 3 levels: Layouts, Templates and Partials.
Inside the templates  is the function, that renders the partials – the final „news-elements“.

The folder structure from the extension is as follows:

Templates->News->List.html
Partials->List->Item.html

The Partial „Item.html“ consist of: date, headline, teaser, text … basically the news-message or news-element.
The Template „List.html“ is including/referring the partials (our news) and renders them.

So what we need to do is to built a new partial-html-file out of  „Item.html“, that we call „ItemLatest.html“, and where we put our DIVs and classes. And second, inside the Template „List.html“ a decision „if-it-is-latest“ then use the partial-file „ItemLatest.html“.

Aside:
The word „template“ is often used with different meanings. In a structure sense it is a part of the following:
Layout = the outer part of a webpage, like header and footer, that never changes
Template = the part that is inside the Layout and can change for different webpages
Partial = you can have multiple partials on one single webpage inside a Template

And the word is used also for a file, that includes the setup and code for each of the above structure elements:
Layout-Template-File
Template-Template-File
Partial-Template-File

b. Copy the Template-Files which comes with the extension

If you want to avoid that your changes of the Template-Files getting overwritten with every update you must copy them into the fileadmin. I use the same folder structure in the fileadmin as TYPO3 regulates for every extension. This makes things easier, since I always know what is where. See also my other blog post: Folder Structure in TYPO3.

The original files are here: typo3conf->ext->news->Resources->Private->Layouts or Partials or Templates

I copy the content to:
fileadmin->Resources->Private->Layouts->NewsLayouts->(here I have what was is in the Layouts-Folder of the extension, not the folder Layouts itself)
fileadmin->Resources->Private->Templates->NewsTemplates->
fileadmin->Resources->Private->Partials->NewsPartials->

To connect to the new template-files you need some TypoScript in your root-TypoScript-setup:
plugin.tx_news {
view {
templateRootPaths >
templateRootPaths {
0 = EXT:news/Resources/Private/Templates/
1 = fileadmin/Resources/Private/Templates/NewsTemplates/
}
partialRootPaths >
partialRootPaths {
0 = EXT:news/Resources/Private/Partials/
1 = fileadmin/Resources/Private/Partials/NewsPartials/
}
layoutRootPaths >
layoutRootPaths {
0 = EXT:news/Resources/Private/Layouts/
1 = fileadmin/Resources/Private/Layouts/NewsLayouts/
}
}
}


c. Changes in the copied Layouts, Templates and Partials

First we duplicate the file: fileadmin->Resources->Private->Partials->NewsPartials->Item.html and make the copy „ItemLatest.html„.
This is your new Partials-File that defines the news in the latest-view. Here you make your changes for DIVs and classes or just delete stuff you don’t need.

Second, you have to put a „if-then“ construction into the Template-File that calls the partials so it knows when to use which partial.

fileadmin->Resources->Private->Templates->NewsTemplates->News->List.html

You have to do it at two places in the code of List.html:

This part is deleted:

<f:for each="{news}" as="newsItem" iteration="iterator">
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:for>

And replaced with this:

<f:for each="{news}" as="newsItem" iteration="iterator">
<f:if condition="{settings.templateLayout} == 9">
<f:then>
<f:render partial="List/ItemLatest" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:then>
<f:else>
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:else>
</f:if>
</f:for>

This part is deleted:

<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:for>

And replaced with this:

<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
<f:if condition="{settings.templateLayout} == 9">
<f:then>
<f:render partial="List/ItemLatest" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:then>
<f:else>
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:else>
</f:if>
</f:for>

As you can see we created a if-condition in the code, that asks for an argument „settings.templateLayout == 9″ and then goes for the partial: partial=“List/ItemLatest“. Now we have to add a „setting.templateLayout = 9“ to our news element. (The number you can choose, doesn’t have to be „9“.)

d. Creating a news-element with TypoScript

The basic code comes again – with some small changes – from the news extensions documentation:

lib.news = USER
lib.news {
  userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
  extensionName = News
  pluginName = Pi1
  vendorName = GeorgRinger
  switchableControllerActions {
        News {
          1 = list
        }
  }
  settings < plugin.tx_news.settings
  settings {
        //categories = 49
        limit = 2
        detailPid = 11
        overrideFlexformSettingsIfEmpty := addToList(detailPid)
        startingpoint = 18
        templateLayout = 9
  }
}

We put the whole code in a „lib-variable“, so we can use it later in our FLUIDTEMPLATE for the whole webpage.

The last line creates the setting: „templateLayout =9“.

As we can see with „1 = list“, it is a list-template – in List.html we created before the if-condition.

„limit =2“ gives us maximum 2 news, „detailPid“ is the ID of the page with the single-news-view, „startingpoint =18“ is the news storage folder where our news are stored.

The setup of the FLUIDTEMPLATE for the webpage could look something like this:

(You will find many blogs dealing with FLUIDTEMPLATES.)

page.10 = FLUIDTEMPLATE
page.10 {
     template = FILE
     template.file = fileadmin/Resources/Private/Templates/mainTemplate.html
     partialRootPath = fileadmin/Resources/Private/Partials
     layoutRootPath = fileadmin/Resources/Private/Layouts
        variables {
           dceCont < styles.content.get
           txNews < lib.news
           rootlineNav < temp.rootlineNav
           socialNet < temp.socialNet
           metaNav < temp.metaNav
        }
}
 

And then in your template for the whole webpage – so it is displayed in the footer:

<article class="footerNews"><h2 class="outline">The News from tt_news 2 Items</h2><f:format.raw>{txNews}</f:format.raw></article>

e. What to do if you want to use a regular news-plugin element

If we want to put the latest news somewhere in the normal content, we must tell the news-content-plugin that it has the setting number 9. Therefore we must give number „9“ a name in the root-page of your TYPO3-page-tree: /right-click on the root page/ edit->Resources->Page TSConfig:

tx_news.templateLayouts {
9 = ItemLatest
}

Now you can select ItemLatest in your news-plugin:

Plugin->Plugin Options->Template->Template Layout

Since I have all my TypoScript code in a file, to put TS directly in the root-page is not so flexible, while going from one to the next webpage. If someone has a solution how to do it with simple TS, please leave a note in the comment section.