I've following code in my fluid partial:
<v:asset.style name="flexrows{uid}" overwrite="0" group="flex" standalone="0" rewrite="0" namedChunks="0">
<f:for each="{mqs}" as="mq" key="width" iteration="i">
#media only screen and (min-width: {v:math.division(a: '{width}', fail: 1, b: '16')}em) {
<f:if condition="{i.isFirst}">
<f:if condition="{0:settings.row.flexdirection} == {0:'row-reverse'}">
.row.row{uid} > .col{
float:right;
}
.flexbox .row.row{uid} > .col, .flexboxtweener .row.row{uid} > .col
{
float:none;
}
</f:if>
.....some more stuff
</f:if>
}
</f:for>
</v:asset.style>
It's generating the first css block (where style "float right" its added) correct, means it is replacing {uid} with the actual uid. In the second css block its not replacing the {uid} variable. it just writes {uid}.
But if I split the f:if in two parts, for each css block one, it is doing it correct.
Is here somebody who could me explain why, or whats wrong in the above example?
Related
I am trying to get an Image from a custom content element into my fluid template. To achieve this I am using FilesProcessor.
custom element
Here is the corresponding code snippet from my setup.typoscript:
tt_content {
heiner_newcontentelement =< lib.contentElement
heiner_newcontentelement {
templateName = Default
dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
dataProcessing.10 {
as = images
references.fieldName = image
references.table = tt_content
sorting = title
sorting.direction = descending
}
}
}
Showing what's available via f:debug-Viewhelper provides the following:
available variables in fluid template
So far, so good, what I have tried was to simply output the image in my fluid template with the following code:
<html data-namespace-typo3-fluid="true" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"></html>
<f:layout name="Default" />
<f:section name="content">
<ul class="Das ist gut">
<f:for each="{images}" as="image">
<f:debug>{image}</f:debug>
<f:image image="{image}" height="250c" width="200c"/>
</f:for>
</ul>
</f:section>
</html>
although the variable "image" in the for-each loop is not empty, the image-viewhelper wont render anything. I am so desperate :( Somebody knows whats going wrong here? A lot of thx :)
According to the documentation, File Reference information are not always available in the fluidtemplate (see also https://docs.typo3.org/m/typo3/reference-coreapi/9.5/en-us/ApiOverview/Fal/UsingFal/Frontend.html#fluidtemplate).
What happens if you try this:
<ul class="Das ist gut">
<f:for each="{images}" as="image">
<f:debug>{image}</f:debug>
<f:image image="{image.originalFile}" height="250c" width="200c"/>
</f:for>
</ul>
How can I check if a page has a specific ID, and if true output a text?
I thought about something like this (pseudocode):
<f:if condition="{current.page.uid}=='78'">
<p>I am Page 78</p>
</f:if>
If you want to use this in an FLUIDTEMPLATE (page.10 = FLUIDTEMPLATE as example) you can access the page data with {data.uid}.
<f:if condition="{data.uid} == 78">
<p>I am Page 78</p>
</f:if>
In an extbase Extension you can make it like #dimitri-l says.
You can fetch current page ID via typoscript object
typoscript:
lib.currentPageId = TEXT
lib.currentPageId.data = TSFE:id
FLUID:
<f:if condition="{f:cObject(typoscriptObjectPath:'lib.currentPageId')}==78">
<p>I am Page 78</p>
</f:if>
You can make a variable into your "page TS setup" like here :
variables {
pageUid = TEXT
pageUid.field = uid
...
}
So you can make your fluid condition as here :
<f:if condition="{pageUid}=={settings.homepid}">
<p>I am Page 78</p>
</f:if>
for exemple...
You would need to pass the page id to the fluid template. If you are using an Extbase controller you can pass $GLOBALS['TSFE']->id to your view and then use an if condition as you did.
$this->view->assign('pageId', $GLOBALS['TSFE']->id);
I am not sure if it is already possible to do string comparison in Typo3 6.2, if not, you have to compare it that way:
<f:if condition="{0:pageId} == {0:'78'}>
...
</f:if>
Otherwise this is a clean solution for current versions
<f:if condition="{pageId} == '78'>
...
</f:if>
With the VHS viewhelper you can do it with fluid only, no need for a Typoscript helper:
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:if condition="{v:page.info(field: 'uid')} == '21'">
<f:then>
Shows only if page ID equals 21.
</f:then>
</f:if>
Sometimes you need to give a link a class when the link target is the current page (here: uid=1). The inline version helps:
<f:link.page pageUid="1"
class="{f:if(condition: '{data.uid} == 1', then: ' current')}">
Link
</f:link.page>
I am using Twitter Bootstraps "dropdown menu" on WordPress for some widget I created and it works fine. But I want to change the icon to "minus" when it drops the content and when another "plus"-icon is clicked the "minus" should close. At the moment it will only toggle the current "plus".
<div class="dropdown toggle-details">
<img src="">
<h3>title</h3>
<h4><subtitle</h4>
<a class="dropdown-toggle my-btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-plus-circle"></i></a>
<ul class="dropdown-menu" >
<li> <h6>item 1</h6></li>
<li><h6>item 2</h6></li>
</ul>
</div>
my script is
jQuery('a').click(function() {
jQuery(this).find('i').toggleClass('fa-minus-circle');
jQuery(this).find('fa-minus-circle').toggleClass('fa-plus-circle')});
You're missing a dot in your jQuery, so right now jQuery is looking for an html element with tag name fa-minus-circle within the "a" element. And obviously not finding it.
jQuery(this).find('.fa-minus-circle').toggleClass('fa-plus-circle')...
actually that probably won't fix it either, because after that statement you'll end up with both classes on the i element. I guess you could work around that with css, but cleaner would be to have the "i" element default to a + icon, and then toggle a more semantic class name like "open".
So css:
i { /* show plus icon */ }
i.open { /* show minus icon */ }
And jQuery:
jQuery("a").on("click", function() {
jQuery(this).find("i").toggleClass("open");
});
Heh - now that I just typed everything out I see what you were doing with that second statement. So yeah, you just need a dot so jquery looks for the classname not the element.
I have a typoscript TEXT object:
lib.myid = TEXT
lib.myid.value = 1413
And want to use it in a fluid template (for tx_news):
<f:for each="{newsItem.categories}" as="category">
<f:if condition="{category.uid} == {lib.myid}">
Category ID is the same as myid
</f:if>
</f:for>
How can I do this?
You can use the ViewHelper f:cObject. It would look like this:
<f:for each="{newsItem.categories}" as="category">
<f:if condition="{category.uid} == {f:cObject(typoscriptObjectPath: 'lib.myid')}">
Category ID is the same as myid
</f:if>
</f:for>
Alternatively, you can make the value a setting of the news plugin, by setting
plugin.tx_news {
settings {
valuefromlibrary < lib.myid
}
}
Afterwards, you can access the value using {settings.valuefromlibrary} in your template. But beware that the settings are not automatically passed on to partials, so in a partial the value might not be defined. This restriction is circumvented in the default template of EXT:news by passing the settings-variable to partials.
I have a typo3 fluid template in which I want to check if content exists before rendering some elements.
Is there an efficient way to do this?
eg.
<f:if condition="{contentInColPos0}">
<div class="section-content">
<f:render section="Main" />
</div>
</f:if>
Is there a built-in variable or a simple way to check content exists in a column position?
This is a common task in CMS templating (don't render this part unless there's something to show), but I can't seem to find how to do it simply.
There is no easy way to do that. But you can use some TypoScript and then pass the count to Fluid and use it in a condition:
lib.countContent = CONTENT
lib.countContent {
table = tt_content
select {
selectFields = count(uid) AS count
pidInList = this
andWhere = (deleted = 0 AND hidden = 0)
}
renderObj = COA
renderObj {
10 = TEXT
10 {
data = field:count
}
}
This object will output the number of content rows on the given page and can be accessed in Fluid:
<f:if condition="{f:cObject(typoscriptObjectPath:'lib.countContent')} > 0">
Then show some stuff
</f:if>
If you're going to use the content anyway and don't have global wrap in your content object, you can also use it directly because the Fluid IfViewHelper checks for empty strings. So e.g. this might be working even better:
lib.content < styles.content.get
(This object is empty if there is no content)
<f:if condition="{f:cObject(typoscriptObjectPath:'lib.content')}">
<f:then>
<f:format.html>{lib.content}</f:format.html>
</f:then>
<f:else>
No content found
</f:else>
</f:if>
Easyest way to check this with VHS and without TypoScript:
<f:if condition="{v:content.get(column:6) -> v:iterator.first()}">
<div class="myAmazingClass">
</div>
</f:if>
You can slide the content throug subpages if you want:
<f:if condition="{v:content.get(column:6, slide:'-1') -> v:iterator.first()}">
<div class="myAmazingClass">
</div>
</f:if>
Consider VHS with ViewHelpers https://fluidtypo3.org/viewhelpers/vhs/master/Content/GetViewHelper.html or https://fluidtypo3.org/viewhelpers/vhs/master/Content/RenderViewHelper.html combined with using the as argument and an f:if condition to check the assigned variable for being empty.
You can solve this easily:
In your TypoScript file:
lib.contentInColPos0 < styles.content.get
lib.contentInColPos0 t.select.where = colPos = 0
In your Template file:
<f:if condition="{f:cObject(typoscriptObjectPath:'lib.contentInColPos0')}">
<div class="section-content">
<f:render section="Main" />
</div>
</f:if>