簡體   English   中英

如何在自定義打字稿模板中 output 圖像標題?

[英]How to output an image caption in custom typoscript template?

我使用頁面資源中的圖像作為頁面的 header 圖像。 我找不到 output 圖片標題(描述)的解決方案。 這是代碼。

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

是否有可能以某種方式 output 標記###CAPTION### 中的標題?

或圖像下方的某個地方? 或者最好使用 FLUID 而不是打字稿?

我找到了解決方案。 我將圖像 object 放入 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
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM