typo3 - 使用 Fluid Powered TYPO3 vhs 为页面资源启用滑动

Question

大家好，在场的人，

我已经配置了我的页面模板，以便我可以创建 FAL 关系。我能够读取当前页面的数据并吐出图像。

但我真正想要的是我可以向上滑动 - 如果当前页面没有 FAL 关系，那么我想在父页面中查看图像 - 如果父级本身没有 FAL 关系，则父级父页面（依此类推——直到我在根页面）。

阅读文档后，可以使用内容进行类似的操作，但我找不到任何提示如何使用页面资源执行此操作。

希望有人可以提供帮助

马库斯

Answer 1

您可以将 vhs viewhelper v:page.resource与 slide 参数结合使用，从 vhs 版本 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>

第一个元素的内联语法示例

<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"/>

Answer 2

使用 VHS ViewHelper 是不可能的，因为 Resource / Record / FalViewHelper 不像 Content / GetViewHelper 那样支持内容滑动。你可以做什么：

使用您的解决方案编写功能请求或拉取请求。

或者

编写自己的 ViewHelper。

或者

使用好的旧（或坏的？）印刷术：

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>
}

并在您的模板中使用它，例如：

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

Answer 3

因为TYPO3 8.7您必须使用 TypoScript，vhswithv:page.resources.fal 不再工作（问题） - 就我而言。请参见上面 N1ck 的示例。

我使用带有来自页面属性（媒体/资源）的图像的子页面站点地图。

体液：

<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>

排版：

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 = |
    }
}

完美运行，无需 vhs 扩展。FLUID 的解决方案会很好。