I am using TYPO3 6.2 and the extension DCE (dynamic content elements).
Everything works fine, except that I wasn't able to display a thumbnail for the custom content elements in the backend.
For the frontend I use this fluid template:
<f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="fileReference" iteration="iterator">
<f:if condition="{iterator.isFirst}">
<f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" width="140px"/>
</f:if>
</f:for>
It works fine. But if i use the same code for the backend (in the field "Bodytext preview template (fluid)") it doesn't output anything. What could be the reason for this?
By the way, what is a more elegant way to output just the first image? I guess I wouldn't have to use this for loop then?
For some reason you need to refer to "fields" instead of "field" in the backend previews
<f:if condition="{fields.image}">
<f:for each="{fields.image}" as="fileReference">
<f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" width="140px"/>
</f:for>
</f:if>
Related
I want to select a logo depending on a check box of a page property I have added via extension. The variable selectcompany is shown correctly when dumping the variables.
I am running Typo3 8 LTS.
obj.logo {
<f:if condition="{field:selectcompany}==1">
<f:then>
file = fileadmin/template/private/images/Logo1.png
</f:then>
<f:else>
file = fileadmin/template/private/images/Logo0.png
</f:else>
</f:if>
}
Although the variable is set correctly, always Logo0.png is displayed. When the variable is set to 1, I expected Logo1.png.
If this is a TypoScript snippet, you can not fill in a Fluid condition there, but have to make use of the TypoScript variant of an if condition.
https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/Functions/If.html
On TypoScript, it is possible to use a condition (TYPO3 9.5.x syntax):
[page["selectcompany"] == 1]
obj.logo.file= fileadmin/Images/logo1.png
[GLOBAL]
Else, you could solve with fluid templating; it should be just:
<f:if condition="{data.selectcompany}">
<f:then>
<f:image src="fileadmin/template/private/images/Logo1.png" alt="" />
</f:then>
<f:else>
<f:image src="fileadmin/template/private/images/Logo0.png" alt="" />
</f:else>
</f:if>
I used <f:image> but I guess you could also go with a plain <img> tag, too.
I'm trying to imply lazyload with a specific slider, it requests the src of the image to be entered twice, once as src and second as data-lazy like this:
<img src="domain.com/image.png" data-lazy="domain.com/image.png">
with <f:image /> I can use data="{lazy: 'domain.com/image.png'}" and should repeat the src of the image created with the viewhelper ... (typo3 documentation and the inline use of f:uri.image)
i have actually two questions:
how do I nest f:uri.image ? this gives an error <f:image src="{image.uid}" treatIdAsReference="1" data="{lazy: '{f:uri.image(src: {image.uid})}'}"/>
it should actually be the refference to the same
image, if I nest f:uri.image would I create a second rendered image ?
(especially because I also set width and height, but I wanted to keep the snippets simple)
the solution should work for TYPO3 v7 and v8
Try this
<img src="{f:uri.image(src : image.uid)}" data-lazy="{f:uri.image(src : image.uid)}" />
You don't have to use the <f:image ..> tag for creating the <f:uri.image ..> returns the same processed resource.
In loop:
<f:for each="{MARKER}" as="file">
<img class="lazy" src=".../blank.gif" data-lazy="{f:uri.image(image: file, width:'XXXc', height:'XXXc', treatIdAsReference:1)}" alt="{file.alternative}" title="{file.title}">
</f:for>
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>
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>