TYPO3中FilesProcessor无法填充图片数组，Fluid模板如何输出图片标签？

问题描述 #

我尝试通过FilesProcessor从内容元素中读取图片，但图片数组始终为空。后台已为内容元素添加了图片，但f:debug视图助手显示images => array(empty)。

提供的代码 #

TypoScript配置 #

// Part 1: Fluid template section
page.10 = FLUIDTEMPLATE
page.10 {
    templateName = TEXT
    templateName {
      cObject = TEXT
      cObject {
        data = pagelayout
        required = 1
        case = ucfirst
        split {
          token = pagets__
          cObjNum = 1
          1.current = 1
        }
      }
      ifEmpty = Default
    }
  templateRootPaths {
      0 = EXT:site_package/Resources/Private/Templates/Page/
      1 = {$page.fluidtemplate.templateRootPath}
  }

  partialRootPaths {
      0 = EXT:site_package/Resources/Private/Partials/Page/
      1 = {$page.fluidtemplate.partialRootPath}
  }

  layoutRootPaths {
      0 = EXT:site_package/Resources/Private/Layouts/Page/
      1 = {$page.fluidtemplate.layoutRootPath}
  }
 
}


page.10 {

    dataProcessing {
      10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      10 {
         levels = 1
         includeSpacer = 1
         as = mainnavigation
        
      }
      20 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
      20 {
        table = tt_content
        orderBy = sorting
        where = colPos = 1
        as = jumbotronContent 
         dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
              as = images
              reference.fieldName = image
            }
        }
      }
   
   }
}

Fluid模板代码 #

<f:debug title="all" inline="true">{_all}</f:debug>  

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
    <section class="hero">
        <div class="d-flex container">
            <div class="d-flex flex-column justify-content-center">
                <f:for each="{jumbotronContent}" as="Jumbotron" iteration="iter">
                    <h1>{Jumbotron.data.header}</h1>
                    <h2>{Jumbotron.data.subheader}</h2>
                    <button>SABER MAIS AGORA</button>
            </f:for>
            </div>
            <div class="hero-image d-flex justify-content-center">
                
                <f:for each="{images}" as="image">
                    <f:debug>{image}</f:debug>
                    <f:image image="{image.originalFile}"/>
                </f:for>
            
            </div>
        </div>
    </section>
</html>

问题原因 #

你将FilesProcessor直接放在了DatabaseQueryProcessor的dataProcessing下，此时FilesProcessor处理的是整个tt_content数据集，而非单个内容元素，导致无法正确关联每个元素的图片字段。

解决方案 #

1. 修正TypoScript配置 #

使用ContentObjectRendererProcessor包裹FilesProcessor，确保每个tt_content元素单独处理图片字段：

page.10 {
    dataProcessing {
      10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      10 {
         levels = 1
         includeSpacer = 1
         as = mainnavigation
      }
      20 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
      20 {
        table = tt_content
        orderBy = sorting
        where = colPos = 1
        as = jumbotronContent 
        dataProcessing {
          10 = TYPO3\CMS\Frontend\DataProcessing\ContentObjectRendererProcessor
          10 {
            fields = image
            dataProcessing {
              10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
              10 {
                as = images
                reference.fieldName = image
              }
            }
          }
        }
      }
   }
}

2. 调整Fluid模板 #

在遍历jumbotronContent时，访问每个元素内部的images数组（因为图片现在属于单个内容元素）：

<f:debug title="all" inline="true">{_all}</f:debug>  

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
    <section class="hero">
        <div class="d-flex container">
            <div class="d-flex flex-column justify-content-center">
                <f:for each="{jumbotronContent}" as="jumbotron" iteration="iter">
                    <h1>{jumbotron.data.header}</h1>
                    <h2>{jumbotron.data.subheader}</h2>
                    <button>SABER MAIS AGORA</button>
                    <!-- 渲染当前内容元素的图片 -->
                    <div class="hero-image d-flex justify-content-center">
                        <f:for each="{jumbotron.images}" as="image">
                            <f:image image="{image}" />
                        </f:for>
                    </div>
                </f:for>
            </div>
        </div>
    </section>
</html>

额外检查点 #

• 确认内容元素的图片字段确实是image（默认“图像”内容元素使用该字段，自定义元素需对应）
• 清理TYPO3缓存，确保配置生效

内容的提问来源于stack exchange，提问作者Sebastian