How to output an image caption in custom typoscript template?

Question

I use an image from page resources as a header image of the page. I could not find a solution to output the image caption (description). Here is the code.

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

Is it possible somehow to output the caption in the mark ###CAPTION###?

or somewhere below the image? or it is better to use FLUID instead of typoscript?

Answer 1

I found a solution. I put the image object inside 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
}