CODEWITHSUNDEEP
imagetypo3fluid
Sebastian
Sebastian

Reputation: 929

TYPO3 FLUID - image and for each - INLINE

i need this FLUID Code "inline":

<f:for each="{dce:fal(field:'textImageTeaserImage', contentObject:contentObject)}" as="fileReference" iteration="iterator">
<f:image src="{fileReference.uid}" treatIdAsReference="1" title="{field.textImageTeaserHeadline}" alt="{field.textImageTeaserHeadline}" class="img-responsive" width="1920c" height="780c" />
</f:for>

and here a Test with Image-Url:

{f:for(each: '{dce:fal(field: \'textImageTeaserImage\', contentObject:contentObject)}', as:'fileReference', iteration:'iterator') -> f:uri.image(src: 'fileReference.uid', treatIdAsReference: '1')}

but, it dont work :(

Thanks, Sebastian

Upvotes: 1

Views: 1817

Answers (3)

Claus Due
Claus Due

Reputation: 4271

Inline syntax reverse the order (child node comes before parent node). Correct syntax:

{f:uri.image(src: 'fileReference.uid', treatIdAsReference: '1') 
    -> f:for(each: '{dce:fal(field: \'textImageTeaserImage\', contentObject: contentObject)}', as: 'fileReference', iteration: 'iterator')}

Same can be used to render a section for example, in case you need to add additional markup that is not added by the ViewHelpers themselves.

Upvotes: 1

Sebastian
Sebastian

Reputation: 929

that work:

<f:for each="{dce:fal(field:'textImageTeaserImage', contentObject:contentObject)}" as="fileReference" iteration="iterator">
        <div style="background-image: url('{f:uri.image(src: '{fileReference.uid}', treatIdAsReference: 1, absolute: 1)}');">
        </f:for>

but this is not fine :)

Upvotes: 0

Georg Ringer
Georg Ringer

Reputation: 7939

I propose to use an own section for it in combination with the <f:spaceless /> ViewHelper.

An (untested) example:

<f:section name="main">
    <f:render section="imgs" arguments="{field:field,fieldName:'textImageTeaserImage',contentObject:contentObject}" />
</f:section>

<f:section name="imgs">
    <f:spaceless>
        <f:for each="{dce:fal(field:fieldName, contentObject:contentObject)}" as="fileReference" iteration="iterator">
            <f:image src="{fileReference.uid}" treatIdAsReference="1" title="{field.textImageTeaserHeadline}" alt="{field.textImageTeaserHeadline}" class="img-responsive" width="1920c" height="780c" />
        </f:for>
    </f:spaceless>
</f:section>

Upvotes: 0

Related Questions