如何渲染存储在自定义页面属性选项卡中的图像？

Question

我正在 TYPO3 12 中构建一个主导航，其中包含每个子页面的图像的下拉菜单。我在页面属性中添加了一个自定义选项卡“导航”，我在其中上传该图像。我不明白的是我需要在流体模板中做什么才能在前端输出此图像。

我设置了一个菜单数据处理器和一个图像处理器：

dataProcessing {
    20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
    20 {
        levels = 2
        includeSpacer = 1
        as = mainnavigation
    }
    30 = files
    30 {
        as = images
        references.fieldName = image
        references.table = tt_content
        sorting = title
        sorting.direction = descending
    }
}

在我的流体模板中，我循环遍历包含主菜单的子页面/子页面的数组：

<ul class="dropdown__list">
    <f:for each="{mainnavigationItem.children}" as="child">
        <li class="{f:if(condition: child.active, then:'active')}">
            <a href="{child.link}" target="{child.target}" title="{child.title}"> {child.title}
            
            <img/> --- Here should be the image

            </a>
        </li>
    </f:for>
</ul>

使用 {child.data.navigation_image} 访问数组显然只会返回 0 或 1。我如何引用该文件？我读到了一些有用的扩展，例如 vhs 或短信响应图像。我知道如何在内容元素库中渲染图像，但该图像存储在页面属性中，这让我一无所知。我想我需要使用数据处理器，但如何操作？

Answer 1

您需要在菜单处理器的元素内处理图像（因为图像属于菜单项）。

您的尝试处理菜单之外的图像。

尝试可能是这样的：

dataProcessing {
    20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
    20 {
        levels = 2
        includeSpacer = 1
        as = mainnavigation

        dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
                references.fieldName = myMenuImage
            }
        }
    }
}

并在菜单循环中使用

<f:media file="{child.files.0}" />

或

<f:image image="{child.files.0}" />

。

基于文档，其中图像是从构建字段

media

中获取的。 （您写道您为导航/菜单图像生成了自己的字段）