I´m using a Typo3 V9 together with the tx_news extension by G. Ringer. The extension is working very well, there´s only one feature I didn´t found:
Having different news categories, I want to style the teasertext in list view different for each category.
So I need a CSS class varying for every category (best would be the UIDs of the category records mapped directly into a css class). How can I accomplish this?
get inspired by the partial for the categories (ext:news/Resources/Private/Partials/Category/Items.html):
<f:section name="category-classes">
<f:for each="{categories}" as="category"> cat-class-{category.uid}</f:for>
</f:section>
and build it into your template (list, detail, ...)
e.g. the list item (ext:news/Resources/Private/Partials/List/Items.html) modify line 8 from
<div class="article articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" itemscope="itemscope" itemtype="http://schema.org/Article">
to
<div class="article articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}{f:render(section:'category-classes', arguments:'categories:newsItem.categories')}" itemscope="itemscope" itemtype="http://schema.org/Article">
Related
I want to override an extension's fluid template in Typo3 with my own template. My own template contains an if-condition. If not met, I want to include/render the extension's template (i.e. the overridden template) instead.
The actual case: I'm using the Typo3 News Extension which allows custom "template layouts". I want to add my custom template layout but also keep the News Extension's default template:
<!-- my_site_package/Resources/Private/Extensions/News/Templates/News/List.html -->
<f:if condition="{settings.templateLayout} == 2">
<f:then>
My specific list view for news entries
<ul>
<li>
...
</li>
</ul>
</f:then>
<f:else>
<!--
Include the original template here, e.g.
EXT:news/Resources/Private/Templates/Styles/Twb5/Templates/News/List.html
-->
</f:else>
</f:if>
How can I include / render the overridden template itself?
Fluid Is not able to Render the "Original Template" as there might be any number of TemplateRootpaths providing the Template. what you could do:
if the original Template is Part of an extension you controll, best to move the "Repeating" parts to an Partial. and let the Original Template use this partial as well.
if the original template is part of an extension you do not controll. (eg by a third party) you should copy the orignal template as partial in your Extension and then render this Partial. maybe ad a comment that this is an 1:1 copy of the original and shoud not be modified.
You can create another template layouts using page TSConfig, Define this TS in your root Page TSconfig (inside Resources) Tab.
plugin.tx_news {
templateLayouts {
1 = Homepage
2 = Specific list
}
}
then in your template you will get selected template value here in case 1 or 2.
You will find more help here.
https://docs.typo3.org/p/georgringer/news/main/en-us/Reference/TsConfig/General.html#confval-templateLayouts
I made an extension which display some data and I need to send them to my Layout.
In my file list.html I made a left column with some data, but finally I need this column in my layout.
there is some code :
Layouts/MyLayout.html
<f:render partial="Structure/Header" arguments="{_all}"/>
<f:render partial="Menus/Main" arguments="{_all}"/>
<!--the left column should be here -->
<f:render section="default" />
List.html
<f:layout name="Default"/>
<f:section name="main">
<aside>
<h2>Title</h2>
<ul>
<f:for each="{Mydata}" as="data">
<li>{data.title}</li>
</f:for>
</ul>
</aside>
</f:section>
That's why I would need to retrieve my extension data in my layout. It is possible to get I ?
If it's not possible, it is possible to get in list.html the name of the actual backend layout with some typoscript ?
There are multiple options to handle whether there are data for an additional column in layout.
first:
Even if in FLUID the files are stored in three folder (Layouts/, Partials/, Templates/) you are not forced to use it in that way. Meaning: you also can decide the layout in the template files.
In the default layout you just render a mainsection (from the template file). And in the different templates you decide whether a side column exist.
second:
extension data can be provided in multiple ways:
You can do the rendering completely in typoscript - or you use a content element with a plugin. The later would be more transparent for editors.
In your case you can provide a different BackEnd layout where editors can put a plugin in the additional column for that special 'layout'.
The rendering only occurs if that 'layout' is selected and a plugin is stored in that column.
When adding Mask content element it doesn't reflect some setting of the Appearance tab at front-end, like Layout, Frame, Space Before or After, also it doesn't include the uid of content element. How can I make usage of these fields?
By default Mask elements do not use standard wrapping for rendering the content element, fortunately you can easily access them within data variable which contains array of tt_content.
To check what fields of tt_content are available just put the line in FE template of your Mask element:
<f:debug>{data}</f:debug>
So you can make the wrapper div by yourself using simple Fluid syntax
<div class="
{f:if(condition: data.layout, then: 'frame-layout-{data.layout}')}
{f:if(condition: data.frame_class, then: 'frame-{data.frame_class}')}
{f:if(condition: data.space_before_class, then: 'frame-space-before-{data.space_before_class}')}
{f:if(condition: data.space_after_class, then: 'frame-space-after-{data.space_after_class}')} ">
<!-- your markup here -->
</div>
You can use the layouts like fluid_styled_content does - it takes care of headers, frames, spaceBefore, etc. This is also the easiest way.
First step: define the layout directories in TypoScript:
lib.maskContentElement.layoutRootPaths.5 = EXT:fluid_styled_content/Resources/Private/Layouts/
lib.maskContentElement.partialRootPaths.5 = EXT:fluid_styled_content/Resources/Private/Partials/
Second step: use the layout in your template:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">
<!-- your markup here -->
</f:section>
</html>
This also works for DCE (with corresponding TypoScript path)
Of course you can copy the layouts and partials to your theme path and make changes there, but I recommend sticking to the core functionality.
how can i build a TYPO3 special-Menu in fluid with tt_content Header Elements, not the "pages" ?
https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/7.6/ContentElements/Menu/Index.html
The Type-3 is a good Example, but i can only selected in the BE the Pages, not the tt_content - Elements.
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
<ce:menu.list pageUids="{pageUids}" as="pages">
<f:if condition="{pages}">
<ul class="ce-menu ce-menu-3">
<f:for each="{pages}" as="page">
<ce:menu.section pageUid="{page.uid}" as="contentElements" type="header">
<f:if condition="{contentElements}">
<f:for each="{contentElements}" as="contentElement">
<li>
<f:link.page pageUid="{page.uid}" section="c{contentElement.uid}">
{contentElement.header}
</f:link.page>
</li>
</f:for>
</f:if>
</ce:menu.section>
</f:for>
</ul>
</f:if>
</ce:menu.list>
</html>
I suppose you get back content elements which have "Show in Section Menus" enabled, and have the header filled and not hidden. The menu.section viewhelper does not have the possibility to filter on content element type. The type="header" argument of the view helper is not a filter for the content element type, but checks if there is a visible header_layout and the header field is not empty. I agree, the argument name type is misleading.
If you want to filter on content type (CType), add an extra "if" statement, filtering on {contentElement.CType} == header during the iteration of the content elements
<f:for each="{contentElements}" as="contentElement">
<f:if condition="{contentElement.CType} == 'header'">
<li>
<f:link.page pageUid="{page.uid}" section="c{contentElement.uid}">
{contentElement.header}
</f:link.page>
</li>
</f:if>
</f:for>
Better would be to write your own view helper for this, if you have the knowledge to do it.
First of all you should rename your question so it is clear that you want to create a content menu that works with grid_elements
I had the same problem and could not find another way but to create a small extension for that purpose since you have to modify the search query for the content. You can find it here: https://typo3.org/extensions/repository/view/gridelements_content_menu
There is currently no manual, just install the extension and include the static TS in your template. The resulting Menu might not be sorted right if your content elements are nested deeper than one level with grid_elements
I'm trying to access the settings of a Fluidtypo3 FCE element. My FCE is a news article that I want to include in another FCE, which is a slider. The slider only has one field and the configuration is the following:
<flux:field.relation
name="articles"
label="News-Beitrag"
multiple="true"
size="6"
table="tt_content"
condition="AND tt_content.pid = {record.pid} AND CType = 'fluidcontent_content' AND colPos = 1 AND sys_language_uid = {record.sys_language_uid}"
minItems="1"
maxItems="10"
renderMode="default"
/>
This configuration works, I can select all my news FCE's as a relation. The field articles saves the uid's of all referenced FCE's. Now I am trying to use these uid's to receive the content. Right now my code is the following:
<f:section name="Main">
<f:if condition="{articles}">
{v:iterator.explode(content: '{articles}', glue: ",", as: 'articles')}
{v:content.get(contentUids: "{articles}", render: 0) -> v:variable.set(name: 'slides')}
<f:for each="{slides}" as="element">
</f:for>
</f:if>
</f:section>
The <v:content.get> ViewHelper gets the tt_content record as it is recorded in the database. The flux settings are stored in XML-Format in the field pi_flexform. I am trying to access those specific flux settings one by one and not just the whole pi_flexform field in xml format.
I've looked for ViewHelpers that can convert XML to an Array and tried many other things, but nothing worked for me. I am grateful for any ideas how to solve this problem.
<flux:form.data> is the Viewhelper you seek. You can use it like this:
<f:for each="{slides}" as="element">
<flux:form.data table="tt_content" field="pi_flexform" record="{element}" as="flexformData">
<!-- Do stuff with flexformData -->
</flux:form.data>
</f:for>