Zum Inhalt springen

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

Last updated on 30. April 2018

Who has used the TYPO3 extension tt_news in the last decade, certainly has built some pages with a news-latest preview. After upgrading to TYPO3 8.6 and the new fluid-based extension „news“ it is getting more difficult to realize this feature, since there is no comprehensive instruction in the online manual.The German speaking reader will find a verbal exchange (including scolding) in the TYPO3-forum, that even the developer of the extension couldn’t settle or calm down and the outcome was not a proper manual. Link:  tx_news: Latest Ansicht- Wie? The argument of the developer is, that there is no sense in having „news-latest“, since it is the same like „news-list“ with less items. But the tricky point is, how to implement a new template that will reduce the listed items to the demands of a preview.Since I usually have my news-preview („news-latest“) in the footer of the webpage, the next question was, how to display news with TypoScript and without the news-plugin-module. And then how to choose a different template for this implementation.My examples are in TYPO3 8.6 and with news version 5.3.2:

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

different templates in the news-plugin

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.

 

Additional information, added later on

In my TYPO3 master installation and basic layout for all websites, there is, in combination with Dynamic Content Elements, the need to add for every content element – including news – some wrapper-classes and sourrounding DIVs. This code must be inside the template-template-file, since it should not be repeated with every single news-element. In the footer latest-news though this DIVs and classes are disturbing, so there is an additional if-condition that has to go into the template-template-file.

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


<f:if condition="{news}">
<f:then>
<f:comment>The wrapper-class only for not-latest</f:comment>
<f:if condition="{settings.templateLayout} != 9">
<div class="news-list-container wrapper clearfix">
<div class="center">
</f:if>
<div class="news-list-all">

A second possiblity would be to call a different list-template (List2.html). Maybe the developer of the news extension can help with this topic, or some easy calling of different templates in combination with different partials.
 
 
If you have any improvements, please leave a comment!

 

Dieser Artikel ist  in Englisch, nicht um Ihnen das Leben schwer zu machen, sondern um den Autoren weltweit etwas zurückzugeben, die mir auch tagtäglich mit ihren Artikeln helfen!

Autor: Thomas Hezel

Ein Kommentar

  1. Thsnks foor shasring such a nice thinking, article is fastidious, thatrs why i have read it
    fully

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert