CODEWITHSUNDEEP
typo3
Tim Döring
Tim Döring

Reputation: 21

TYPO3 get page resources in Fluid Template

I am currently trying to access the images I uploaded to my page resources in my fluid template. But I can't make them appear in the frontend.

I have tried the following 2 approaches:

    <f:if condition="{files}">
      <f:then>
        <f:for each="{files}" as="image">
          <f:uri.image image="{image}" />
        </f:for>
      </f:then>
    </f:if>

and with vhs viewhelpers:

<v:page.resources.fal
        table="pages"
        field="media"
        uid="{page.uid}"
        as="images">

        <f:for each="{images}" as="image" iteration="index">
          <div style="background-image: url('{image.url}')" />
        </f:for>

</v:page.resources.fal>

Both don't output the image(s) in the frontend.

Also I cant find them in

<f:debug>{_all}</f:debug>

I am using TYPO3 11.5.25 with the bootstrap package

Upvotes: 0

Views: 1111

Answers (2)

Seebold
Seebold

Reputation: 63

this is a problem of vhs viewhelpers in one of the last versions. This viewhelper only works with a limit set. I have this problem in some typo3 instances and have to fix it by setting any limit.

<v:page.resources.fal
    table="pages"
    field="media"
limit="10"
    uid="{page.uid}" <--- sometimes this must be data.uid -->
    as="images">

<f:for each="{images}" as="image" iteration="index">
  <div style="background-image: url('{image.url}')" />
</f:for>

</v:page.resources.fal>

Upvotes: 0

Robert
Robert

Reputation: 592

You can use the FilesProcessor in your Typoscript.

https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Fluidtemplate/DataProcessing/FilesProcessor.html

Here is an example for a footer menu, that shows title or image

        // Footer Menu
        40 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
        40 {
            special = directory
            special.value = 672
            as = footerMenu
            titleField = nav_title // title
            dataProcessing {
                10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                10 {
                    references.fieldName = media
                }
            }
        }

Here is the fluid template

        <f:for as="footerMenuItem" each="{footerMenu}" iteration="iterator">
            <f:if condition="{footerMenuItem.files.0}">
                <f:then>
                    <a href="{footerMenuItem.link}">
                        <f:image class="img-fluid" image="{footerMenuItem.files.0}" width="80"/>
                    </a>
                </f:then>
                <f:else>
                    <a href="{footerMenuItem.link}">{footerMenuItem.title}</a>
                </f:else>
            </f:if>
        </f:for>

Upvotes: 0

Related Questions