Enable sliding for page resources with Fluid Powered TYPO3 vhs

Question

Hi everybody out there,

I have configured my page template so that I can create FAL relations. I'm able to read the data of the current page and spit out the image.

But what I really want is that I can slide up - if there is no FAL relation at the current page then I would like to look in the parent page for an image - and the parents parent page if the parent itself have no FAL relation (and so on - until I'm at the root page).

After reading the documentation something like this is possible with content, but I can not find any hints how to do this with page resources.

Hopefully someone can help

Markus

N1ck · Accepted Answer · 2017-03-01T20:49:07.593

You can use the vhs viewhelper v:page.resource in combination with the slide argument, wich is supported from vhs version 2.3.3.

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<v:page.resources.fal table="pages" field="media" uid="{page.uid}" as="images" slide="-1" >
  <f:for each="{images}" as="image">
    <f:image src="{image.url}" alt="{image.alternative} {image.name}" title="{image.title}" />
  </f:for>
</v:page.resources.fal>

Inline-syntax-example for the first element

<v:resource.image identifier="{v:page.resources.fal(field: 'media', uid: '{page.uid}' slide:'-1') -> v:iterator.extract(key: 'id') -> v:iterator.first()}" treatIdAsReference="1" maxWidth="1500"/>

score 1 · Answer 2 · answered Aug 30 '14 at 14:26

It's not possible with a VHS ViewHelper because Resource / Record / FalViewHelper doesn't support content sliding like Content / GetViewHelper does. What you can do:

Write a feature request or make a pull request with your solution.

or

Write your own ViewHelper.

or

Use good old (or bad?) typoscript for it:

lib.slider = FILES
lib.slider {
    references {
        data = levelmedia:-1, slide
    }
    renderObj = COA
    renderObj {
        10 = IMAGE
        10 {
            file.import.data = file:current:publicUrl
            file.width = 960
            titleText.data = file:current:title
            wrap = <li>|</li>
        }
    }
    stdWrap.wrap = <ul>|</ul>
}

and use it in your template like:

<f:cObject typoscriptObjectPath="lib.slider" />

user2310852 · Answer 3 · 2019-06-18T14:11:23.963

For TYPO3 8.7 you have to use TypoScript, vhs with v:page.resources.fal is not working anymore (issue) - in my case. See example from N1ck above.

I use a Subpage-Sitemap with images from page properties (media/resources).

FLUID:

<f:if condition="{menu}">
    <ul class="ce-menu ce-menu-1">
        <f:for each="{menu}" as="page">
            <li>
                <a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}">
                    <f:format.raw>{page.title}</f:format.raw>
                    <f:cObject typoscriptObjectPath="lib.mediaResources" data="{uid:'{page.data.uid}'}" />
                </a>
            </li>
        </f:for>
    </ul>
</f:if>

TypoScript:

lib.mediaResources = FILES
lib.mediaResources {
    references {
      table = pages
      #Seiten-ID ubergabe
      uid.dataWrap= {field:uid}
      fieldName = media
    }
    renderObj = IMAGE
    renderObj {
      file.width = 50c
      file.height = 50c
      file.import.data = file:current:uid
      file.crop.data = file:current:crop
      file.treatIdAsReference = 1
      altText.data = file:current:title
      params = class="ce-menu-1-image"
      wrap = |
    }
}

Works perfect, without vhs-Extension. A solution with FLUID would be nice.

Enable sliding for page resources with Fluid Powered TYPO3 vhs

3 Answers3