如何在自定义排版模板中输出图像标题？答案

【问题标题】：How to output an image caption in custom typoscript template?如何在自定义排版模板中输出图像标题？
【发布时间】：2021-06-02 12:33:15
【问题描述】：

我使用页面资源中的图像作为页面的标题图像。我找不到输出图像标题（描述）的解决方案。这是代码。

lib.headerImage = COA
lib.headerImage {
    30 = FILES
    30 {
        references {
            table = pages
            uid.data = page:uid
            fieldName = media
        }
        begin = 0
        renderObj = IMAGE
        renderObj {
            file {
                import.data = file:current:uid
                treatIdAsReference = 1
                maxW = 640
                maxH = 360
            }
            altText.data = file:current:alternative
            titleText.data = file:current:title

            layoutKey = picture
            layout {
                picture {
                    element = <picture class="header-image__picture">###SOURCECOLLECTION###<img src="###SRC###" ###PARAMS### ###ALTPARAMS### />###CAPTION###</picture>
                    source = <source srcset="###SRC###" media="###MEDIAQUERY###" />
                }
            }
            sourceCollection {

                big {
                    maxW = 2000
                    maxH = 1080
                    mediaQuery = (min-width: 1025px)
                }
                small {
                    maxW = 640
                    maxH = 360
                    mediaQuery = (max-width: 767px)
                }
            }
        }
        maxItems = 1
    }
    wrap = <div class="header-image">|</div>
}

是否有可能以某种方式输出标记###CAPTION###中的标题？

或者图片下方的某个地方？或者最好使用 FLUID 而不是打字稿？

【问题讨论】：

标签： image typo3 typoscript caption

【解决方案1】：

我找到了解决方案。我把图像对象放在 COA 里面

renderObj = COA
renderObj {
    10 = IMAGE
    10 {
        file {
            import.data = file:current:uid
            treatIdAsReference = 1
            maxW = 640
            maxH = 360
        }
        altText.data = file:current:alternative
        titleText.data = file:current:title

        layoutKey = picture
        layout {
            picture {
                element = <picture class="header-image__picture">###SOURCECOLLECTION###<img src="###SRC###" ###PARAMS### ###ALTPARAMS### /></picture>
                source = <source srcset="###SRC###" media="###MEDIAQUERY###" />
            }
        }
        sourceCollection {

            big {
                maxW = 2000
                maxH = 1080
                mediaQuery = (min-width: 1025px)
            }
            small {
                maxW = 640
                maxH = 360
                mediaQuery = (max-width: 767px)
            }
        }
    }
    20 = TEXT
    20.data = file:current:description
}

【讨论】：