Using Typo3 8.7.19, and I was asked to include a set of links to documents/videos inside a page, so I thought about a description list. Each title would be the title of the link(s), and the description the actual links that should be rendered as
http://something.linky
So all the thing should become something like
<dl>
<dt>A title for this link</dt>
<dd>http://something.linky</dd>
</dl>
Looking at the documentation, on this component one should put each description like
Term 1|Description 1
Term 2|Description 2
Term 3|Description 3
But I'm not sure if is there any way to include links using this schema, or if I have to resort to using the default text component.
It can be possible, when you edit the fluid-Template.
First outsource the default fluid-templates.
Then edit this template:
Partials/Bullets/Type-2.html
<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">
<f:if condition="{bullets}">
<dl class="ce-bullets">
<f:for each="{bullets}" as="definitionListItem">
<f:for each="{definitionListItem}" as="termDescription" iteration="termDescriptionIterator">
<f:if condition="{termDescriptionIterator.isFirst}">
<f:then>
<dt>{termDescription}</dt>
</f:then>
<f:else>
<dd>{termDescription}</dd>
</f:else>
</f:if>
</f:for>
</f:for>
</dl>
</f:if>
</html>
Just add a
<f:format.html>{termDescription}</f:format.html>
around
{termDescription}
Then you can write this in the description list.
Term1 | <LINK 1>Your description</LINK>
Term2 | http://something.linky
Related
I have a fluid template language navigation in which i use bootstrap which looks like follows:
<f:for each="{config.lang.uid}" as="lang" iteration="iterator">
<f:if condition="{languageNavigation.{iterator.index}.available}">
<f:then>
<a
href="{languageNavigation.{iterator.index}.link}"
class="dropdown-item{f:if(condition: '{languageNavigation.{iterator.index}.active}', then: ' active')}"
hreflang="{config.lang.hreflang.{lang}}"
title="{config.lang.title.{lang}}"
>
<span>
<f:if condition="{settings.navbar.langFlags}">
<core:icon identifier="{config.lang.flag.{lang}}" size="small" />
</f:if>
{config.lang.title.{lang}}
</span>
</a>
</f:then>
<f:else>
<span class="dropdown-item text-muted">
<f:if condition="{settings.navbar.langFlags}">
<core:icon identifier="{config.lang.flag.{lang}}" size="small" />
</f:if>
{config.lang.title.{lang}}
</span>
</f:else>
</f:if>
</f:for>
when I'm in the detail view of a news article and I switch the language, the parameters of the query are not translated, so it basically sends me to an empty detail page
I've been trying for hours to fix this problem but I don't seem to find a solution……
I use route enhancer to translate the detail view URLs query into the news title
the nearest i've found is to add following to the link:
addQueryString="TRUE" addQueryStringMethod="GET"
but this only seems to work in < f:link.page > and I can't use
href="{languageNavigation.{iterator.index}.link}"
in <f:link.page>
i've tried with < link.typolink > as well but in both methods i lose the language-switching-goal, even if i use
lang={config.lang.hreflang.{lang}} which would translate to en-US or de-DE in the site configuration……… it just renders the link to the detail page in the current language for all links in menu
any help? I think i've reached my capabilities to solve this
I'd be grateful for any solution
-----------------Example------------------
lets say i have the following URL which is a page with the news plugin detail view of an article:
https://my.domain/news/detail/news-title
When I go to my language navigation of this page the domains rendered are:
EN: https://my.domain/news/detail/
DE: https://my.domain/de/news/detailansicht/
so, the /news-title at the end basically gets lost
If I'm navigating only in german site and I'm standing in the news list page:
https://my.domain/de/news/
from there, all links are rendered correctly, so if i go to the list item of article in question it would send me to:
DE: https://my.domain/de/news/detailansicht/news-title
So, that's what I mean with the question, the problem only appears when I'm already in the detail view page, and I want to switch the language with the navbarmenu.
instead of rendering
https://my.domain/LANG/news/detail/news-title it renders
https://my.domain/LANG/news/detail/
Did you tried the LanguageMenuDataProcessor? With it, the links are
all correct. See:
https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/ContentObjects/Fluidtemplate/Index.html?highlight=languagemenuprocessor#dataprocessing
In older TYPO3 versions DataProcessing of menu was
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
special = languages
as = languageNavigation
}
Now it uses
10 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
10 {
languages = auto
as = languageNavigation
}
This solved my Problem, thanx for the hint #Thomas Löffler
I've also updated my template to make the code more simple by getting rid of the iterator and its index:
<f:section name="Language">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="language" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<f:for each="{languageNavigation}" as="item">
<f:if condition="{item.active}">
<f:if condition="{settings.navbar.langFlags}">
<core:icon identifier="{config.lang.flag.{item.languageId}}" size="small" />
</f:if>
<span class="nav-label">{item.title}</span>
</f:if>
</f:for>
</a>
<div class="dropdown-menu dropdown-menu-right mt-0 language-menu">
<f:for each="{languageNavigation}" as="item">
<f:if condition="{item.available}">
<f:then>
<a
href="{item.link}" hreflang="{item.hreflang}" title="{item.title}"
class="dropdown-item{f:if(condition: '{item.active}', then: ' active')}"
>
<f:if condition="{settings.navbar.langFlags}">
<core:icon identifier="{config.lang.flag.{item.languageId}}" size="small" />
</f:if>
{item.title}
</a>
</f:then>
<f:else>
<span class="dropdown-item text-muted">
<f:if condition="{settings.navbar.langFlags}">
<core:icon identifier="{config.lang.flag.{item.languageId}}" size="small" />
</f:if>
{item.title}
</span>
</f:else>
</f:if>
</f:for>
</div>
</li>
</f:section>
Did you tried the LanguageMenuDataProcessor? With it, the links are all correct. See: https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/ContentObjects/Fluidtemplate/Index.html?highlight=languagemenuprocessor#dataprocessing
<f:link.typolink parameter="{mylink"> links to a internal page- when this page is hidden / not visible in backend no is set.
This breaks my html:
Instead of
<div class="mylink">
my text
</div>
I get
<div class="mylink">my text/div>
Is there a way to check if the linked page is visible / not hidden?
You can use the f:uri.typolink viewhelper to check if the resulting URI is empty or not and then generate the link with f:typolink as normal:
<f:if condition="{f:uri.typolink(parameter: mylink)}">
<f:link.typolink parameter="{mylink}">my text</f:link.typolink>
</f:if>
If you do not care about attributes set in {mylink}, e.g. class or target you can reuse the already generated URI:
<f:alias map="{uri: '{f:uri.typolink(parameter: mylink)}'}">
<f:if condition="{uri}">
my text
</f:if>
</f:alias>
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