I am creating a custom news template for tx_news which uses a Fluid Template.
I need to get the uid of the next news record in the loop.
<f:for each="{news}" as="newsItem" iteration="iterator">
<div id="{newsItem.uid}">
Go to next
</div>
</f:for>
You could use the extension vhs, it provides a ton of useful ViewHelpers - among them the ViewHelper v:iterator.next. I've never used it, but from reading the documentation I'd use it like this (using the ViewHelper v:variable.set from the same extension for a creating a local variable):
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:for each="{news}" as="newsItem" iteration="iterator">
<div id="{newsItem.uid}">
<v:variable.set name="nextNews" value="{news -> v:iterator.next(needle: newsItem)}"/>
Go to next
</div>
</f:for>
Related
By default, the extension shows all in the plugin selected categories even if not used by the event. I would like to display only the currently used categories. Any ideas?
<f:for each="{categories}" as="category">
<f:if condition="{overwriteDemand.category} == {category.item.uid}">
<f:then>
<f:link.action class="button active tiny" action="list" controller="Event" arguments="{overwriteDemand:{category: category}}">{category.title}</f:link.action>
</f:then>
<f:else>
<f:link.action class="button tiny" action="list" controller="Event" arguments="{overwriteDemand:{category: category}}">{category.title}</f:link.action>
</f:else>
</f:if>
</f:for>
first you need a list of categories belonging to the event. this is probably not the Fluid-Variable {categories} (where you hold all your categories as it seems)
probably you need something based on the categoriefield of your event record.
this could be done with a dataProcessor (espec. DatabaseQueryProcessor)
You can just disable the display of inactive categories like in the following code:
<f:for each="{categories}" as="category">
<f:if condition="{overwriteDemand.category} == {category.item.uid}">
<f:then>
<f:link.action class="button active tiny" action="list" controller="Event" arguments="{overwriteDemand:{category: category}}">{category.title}</f:link.action>
</f:then>
<f:comment><![CDATA[
<f:else>
<f:link.action class="button tiny" action="list" controller="Event" arguments="{overwriteDemand:{category: category}}">{category.title}</f:link.action>
</f:else>]]></f:comment>
</f:if>
</f:for>
or remove the codee for the unused categories completely:
<f:for each="{categories}" as="category">
<f:if condition="{overwriteDemand.category} == {category.item.uid}">
<f:link.action class="button active tiny" action="list" controller="Event" arguments="{overwriteDemand:{category: category}}">{category.title}</f:link.action>
</f:if>
</f:for>
The code seems to be from this template: Templates/Event/List.html
IMPORTANT:
Don't alter the original fluid templates but make a copy first into your own sitepackage (or a different extension).
You can adjust the template path for sf_event_mgt then by typoscript to your own templates. At best you do it in the constant editor in the backend.
Like this the changes are kept even if you update the extension, and you always have the original templates available if you need to look at them. It would also be possible to use the original templates on some pages and on other pages your own ones.
The TypoScript template snippet with the constants for the fluid files looks like this, so you know the options you've to search for in the constant editor:
plugin.tx_sfeventmgt {
view {
# cat=plugin.tx_sfeventmgt/file; type=string; label=Path to template root (FE)
templateRootPath = EXT:sf_event_mgt/Resources/Private/Templates/
# cat=plugin.tx_sfeventmgt/file; type=string; label=Path to template partials (FE)
partialRootPath = EXT:sf_event_mgt/Resources/Private/Partials/
# cat=plugin.tx_sfeventmgt/file; type=string; label=Path to template layouts (FE)
layoutRootPath = EXT:sf_event_mgt/Resources/Private/Layouts/
}
...
}
Since version 6.1.0 of the extension, there is the e:category.count() viewHelper available which returns the amount of events assigned to a category. This viewHelper can be used to filter out categories which do not have any events assigned as shown below:
<f:for each="{categories}" as="category">
<f:if condition="{e:category.count(categoryUid: category.uid)} > 0">
<f:if condition="{overwriteDemand.category} == {category.uid}">
<f:then>
<f:link.action action="list" controller="Event" arguments="{overwriteDemand:{category: category}}" class="active button">{category.title}</f:link.action>
</f:then>
<f:else>
<f:link.action action="list" controller="Event" arguments="{overwriteDemand:{category: category}}" class="button button-outline">{category.title}</f:link.action>
</f:else>
</f:if>
</f:if>
</f:for>
Please make sure, that you add the viewHelper namespace xmlns:e="http://typo3.org/ns/DERHANSEN/SfEventMgt/ViewHelpers" to the opening HTML tag of the Fluid template.
I have a problem with TYPO3/Powermail. I tried to add custom checkbox images and ran into problems with IE. I found another website based on TYPO3 with customized checkboxes working fine on IE too.
What is weird is, that my html form structure (generated by TYPO3/Powermail) looks different.
Here is my checkbox html:
As you can see, I have a field with type hidden inserted, don't know why. And my label has no "for" attribut.
This form field here (TYPO3/Powermail as well) looks nice:
Here we have no strange hidden input field, and there is a "for" attribut in the label.
Can someone help?
The templates of the both installations differ. Check the original templates and partials delivered with EXT:powermail in folder EXT:powermail/Resources/Private. If you use own templates add all needed fields and options.
For example add the for-attribute to the <label> in partial for radio buttons: <label for="powermail_field_{field.marker}_{index.cycle}">.
In newer versions of EXT:powermail (7.3.1) file Resources/Private/Partials/Form/Field/Radio.html looks like:
{namespace vh=In2code\Powermail\ViewHelpers}
<div class="powermail_fieldwrap powermail_fieldwrap_type_radio powermail_fieldwrap_{field.marker} {field.css} {settings.styles.framework.fieldAndLabelWrappingClasses}">
<f:render partial="Form/FieldLabel" arguments="{_all}" />
<div class="{settings.styles.framework.fieldWrappingClasses}">
<f:for each="{field.modifiedSettings}" as="setting" iteration="index">
<div class="{settings.styles.framework.radioClasses} {vh:Validation.ErrorClass(field:field, class:'powermail_field_error')}">
<label>
<f:form.radio
property="{field.marker}"
value="{setting.value}"
checked="{vh:Misc.PrefillMultiField(field:field, mail:mail, cycle:index.cycle)}"
id="powermail_field_{field.marker}_{index.cycle}"
additionalAttributes="{vh:Validation.ValidationDataAttribute(field:field, iteration:index)}"
class="powermail_radio" />
<vh:string.escapeLabels>{setting.label}</vh:string.escapeLabels>
</label>
</div>
</f:for>
<f:if condition="{settings.validation.client}">
<div class="powermail_field_error_container powermail_field_error_container_{field.marker}"></div>
</f:if>
</div>
Resources/Private/Partials/Form/FieldLabel.html:
{namespace vh=In2code\Powermail\ViewHelpers}
<f:comment>
Partial file for the HTML-structure of nearly all field labels
</f:comment>
<f:if condition="{field.css} != 'nolabel'">
<label for="powermail_field_{field.marker}" class="{settings.styles.framework.labelClasses}" title="{field.description}">
<vh:string.escapeLabels>{field.title}</vh:string.escapeLabels><f:if condition="{field.mandatory}"><span class="mandatory">*</span></f:if>
</label>
</f:if>
I am using TYPO3 9, News Plugin (News system).
I am looking for a way to group news articles by year, like this:
2019
--------
article 1
article 2
article 3
--------
2018
--------
article 1
article 2
...
I can't find an easy solution for this and find it hard to believe that the only way to implement this is to edit TYPO3's source code...
Can anyone help?
-------------------------- Edit
Fixed and working code suggested by Bernd Wilke:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:layout name="General" />
<!--
=====================
Templates/News/List.html
-->
<f:section name="content">
<!--TYPO3SEARCH_end-->
<f:if condition="{news}">
<f:then>
<f:variable name="oldYear">2010</f:variable>
<f:for each="{news}" as="newsItem" iteration="iterator">
<f:variable name="currentYear"><f:format.date format="%Y">{newsItem.datetime}</f:format.date></f:variable>
<f:if condition="{oldYear} < {currentYear}">
<hr />
<h3>{currentYear}</h3>
<hr />
</f:if>
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:for>
</f:then>
<f:else>
<div class="alert ">
<f:translate key="list_nonewsfound" />
</div>
</f:else>
</f:if>
<!--TYPO3SEARCH_begin-->
</f:section>
</html>
However, I award this question to Georg Ringer as his solution was working right away.
Of course this is possible by fluid by using the ViewHelper f:groupedFor, see official documentation.
There is also an example in the docs of the news extension. So the example should work like that
<f:groupedFor each="{news}" as="groupedNews" groupBy="yearOfDatetime" groupKey="year">
<div style="border:1px solid blue;padding:10px;margin:10px;">
<h1>{year}</h1>
<f:for each="{groupedNews}" as="newsItem">
<div style="border:1px solid pink;padding:5px;margin:5px;">
{newsItem.title}
</div>
</f:for>
</div>
</f:groupedFor>
however I also want to warn about the following
Keep an eye on performance!
To be able to group the records, fluid
will load every record itself and groups those afterwards. If you plan
to group many records just for getting something like a count, maybe
it is better to fire the query directly and don’t use fluid for that.
However if the result is on a cacheable page, the issue is only relevant on the first hit.
There is no typoscript option for grouping like this.
But you can do it in FLUID:
Copy the template files for news listing to your (site) extension and modify it according to your needs: build in a group processing.
<f:variable.set name="oldYear">0000</f:variabel.set>
<f:for each="{news}" as="newsItem" iteration="iterator">
<f:variable.set name="currentYear">{newsItem.datetime->f:format.date("Y")}</f:varaible.set>
<f:if condition="{oldYear} == {currentYear}">
<hr />
<h3>{currentYear}</h3>
<hr />
<f:variable.set name="oldYear">{currentYear}</f:variable.set>
</f:if>
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
</f:for>
You might use one of the viewhelpers mentioned in this answer or this answer.
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 try to render some Elements from another page via fluid in a Partial and try to use v:content.render. As you can see in the code I want to render 3 elements from the page with the Uid 9. But as soon as I have the v:content.render element in it I just get a blank page.
So my question is how to use v:content.render or what alternative I have? Or do I still need to use Typoscript for that?
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="footer2">
<v:content.render column="0" limit="3" pageUid="9" as="contentElements">
<f:for each="{contentElements}" as="contentElement" iteration="footerIteration">
<f:format.html>{contentElement.bodytext}</f:format.html>
</f:for>
</v:content.render>
</div>
I am not sure if it is important, but the elements on the Page 9 are also fluid content elements.
I found a solution that works:
<v:variable.set name="contentElements" value="{v:content.get(column:'0', limit:'3', pageUid:'9', render:'FALSE')}" />
<f:for each="{contentElements}" as="contentElement" iteration="footerIteration">
<v:content.render contentUids="{0:contentElement.uid}" />
<f:format.html>{contentElement.bodytext}</f:format.html>
</f:for>
I think your first attempt was more readable. {contentElement} already had what you needed, there is no property bodytext if you leave render to its default true.
<v:content.render column="0" pageUid="9" limit:"3" as="contentElements">
<f:for each="{contentElements}" as="contentElement">
<f:format.raw>{contentElement}</f:format.raw>
</f:for>
</v:content.render>
If you don't know what you get back in as="" to work with, just try a debug:
<v:content.render column="0" pageUid="9" limit:"3" as="contentElements">
<f:for each="{contentElements}" as="contentElement">
<f:debug inline="true">{contentElement}</f:debug>
</f:for>
</v:content.render>
And I replaced <f:format.html> with <f:format.raw> so prevent some unwanted <p></p>