TYPO3 News扩展如何自定义内容元素渲染及传递媒体资源

现有配置的局限 #

当前使用的RECORDS类型TypoScript逻辑只会输出内容元素的默认渲染结果，既无法灵活自定义单类内容元素的输出结构，也不会将内容元素、关联媒体的数据直接暴露给Fluid模板。直接按Fluid遍历方案拿不到媒体资源，本质是没有开启内容元素的关联资源加载配置。

自定义渲染实现方法 #

• 替换原有TypoScript配置，将内容元素及关联资源直接传入自定义Fluid模板

lib.tx_news.contentElementRendering = FLUIDTEMPLATE
lib.tx_news.contentElementRendering {
    file = EXT:your_site_ext/Resources/Private/Templates/News/ContentElements.html
    variables {
        contentElements = TEXT
        contentElements.current = 1
        contentElements.split {
            token = ,
            cObjNum = 1
            1 = CONTENT
            1 {
                table = tt_content
                select {
                    pidInList = root,-1
                    selectFields = tt_content.*
                    where = tt_content.uid = {current:current}
                    markers.current.current = 1
                    # 关联查询媒体资源引用
                    join = sys_file_reference ON sys_file_reference.uid_foreign = tt_content.uid AND sys_file_reference.tablenames = 'tt_content' AND sys_file_reference.fieldname IN ('assets','image','media')
                    leftjoin = sys_file ON sys_file.uid = sys_file_reference.uid_local
                }
            }
        }
    }
}

• 在自定义Fluid模板中按内容元素类型写渲染逻辑，直接调用关联媒体资源

<f:for each="{contentElements}" as="ce">
    <f:switch expression="{ce.CType}">
        <f:case value="text">
            <div class="ce-text">
                <f:format.html>{ce.bodytext}</f:format.html>
            </div>
        </f:case>
        <f:case value="image">
            <div class="ce-image">
                <f:for each="{ce.media}" as="fileRef">
                    <f:image image="{fileRef}" width="800c" height="450c"/>
                </f:for>
                <f:if condition="{ce.bodytext}">
                    <div class="ce-caption"><f:format.html>{ce.bodytext}</f:format.html></div>
                </f:if>
            </div>
        </f:case>
        <!-- 其他CType的渲染规则按需新增即可 -->
    </f:switch>
</f:for>

媒体资源加载失败排查 #

• 检查TypoScript配置是否开启内容元素媒体自动加载：plugin.tx_news.settings.contentElementRendering.loadMedia = 1
• 渲染媒体时必须使用f:image/f:uri.image视图助手处理文件引用，禁止直接输出sys_file原始路径
• 确认内容元素的媒体字段未在TCA中被排除，sys_file_reference表中存在对应关联记录

如果不想手写关联查询，可开启news扩展配套的内容元素支持组件，开启后会自动将所有内容元素的关联字段（媒体、分类、关联关系等）注入Fluid模板变量，无需额外编写查询逻辑。

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