TYPO3 / Typoscript: Get properties of a content element

Question

I have a problem with accessing content in a content object in TYPO3:

Running in TYPO3 8.7.11, I have a page with a Content Element "Image" and I've loaded a single image inside. I want to get an output like this:

<section class="foo" style="background-image:url('fileadmin/foo.png')">
   <h2>[image title]</h2>
   <p>[image description]</p>
</section>

I got the part with the image title and description working, but I cannot get the image filename for the background image running!

My current Typoscript looks like this: (edited after Thomas answer, but still not running)

lib.teaser = CONTENT
lib.teaser {
    table = tt_content
    select.where = colPos = {$teaser_column}
    languageField = sys_language_uid


    renderObj = COA
    renderObj {

        # Attempt 1 (regarding the answer of Thomas Löffler)
        # this doesn't work and result in an empty URL
        #
        # 10 {
        #     references {
        #         uid.data = uid
        #         table = tt_content
        #         fieldName = media
        #     }
        #
        #     begin = 0
        #     maxItems = 1
        #
        #     renderObj = IMG_RESOURCE
        #     renderObj {
        #         file.import.data = file:current:publicUrl
        #     }
        #     stdWrap.wrap = <section class="teaser" style="background-image:url('|');">
        # }

        # Attempt 2 (regarding the answer of Bernd Wilke πφ)
        # this doesn't work and result in an empty URL

        10 = FILES
        10 {
            references {
                uid.data = uid
                table = tt_content
                fieldName = media
            }

            # a) did you mean that I want to replace
            # my renderObj and use a TEXT object instead?

            renderObj = TEXT
            renderObj {
                data = file:current:publicUrl
            }

            # b) ... or did you mean that I want to provide
            # an IMG_RESOURCE and inside of that I want to
            # provide a renderObj = TEXT?
            #
            # renderObj = IMG_RESOURCE
            # renderObj {
            #     listNum = 0
            #     override.field = media
            #     renderObj = TEXT
            #     renderObj.data = file:current:publicUrl
            # }

            stdWrap.wrap = <section class="teaser" style="background-image:url('|');">
        }

        20 = TEXT
        20.field = header
        20.wrap = <h2 class="hide-text">|</h2>

        30 = TEXT
        30.field = bodytext
        30.wrap = <p>|</p>

        90 = TEXT
        90.value = </section>
    }
}

# ...
# edit: added after Thomas answer below

page {
    10 = FLUIDTEMPLATE
    10 {
        format = html
        file = {$root}/Templates/{$template}/Layouts/{$main_layout}.html
        layoutRootPath = {$root}/Templates/{$template}/Layouts
        partialRootPath = {$root}/Templates/{$template}/Partials

        variables {
            teaser < lib.teaser
            # ... some other variables ...
        }

        # load templates for sections, otherwise Typo3 won't find your sections
        file.stdWrap.cObject = CASE
        file.stdWrap.cObject {
            key.data = levelfield:-1, backend_layout_next_level, slide
            key.override.field = backend_layout

            default = TEXT
            default.value = {$root}/Templates/{$template}/Templates/Main.html
        }
    }
}

Currently resulting in this HTML code:

<section class="teaser" style="background-image:url('');">
   <h2 class="hide-text">Get our latest products:</h2>
   <p></p>
</section>

Answer 1

you have all the parts together, you just mixed them up.

        renderObj = IMG_RESOURCE
        renderObj {
            file.import.data = file:current:publicUrl
            listNum = 0
            override.field = media
            file.treatIdAsReference = 1
        }

IMG_RESOURCE would be the correct object, but you do not build it up correctly:

file.import.data = file:current:publicUrl: where the filename is expected you provide the full path to the image. Wait!? 'the full path to the image'? wasn't it what you want to achive?

renderObj = TEXT
renderObj.data = file:current:publicUrl

If you use 'treatIdAsReference = 1' you need to provide an UId (of a sys_file) and no name

---

    10 = FILES
    10 {
        references {
            // this line should not be neccessary as the current context identifies the record
            #uid.data = uid
            table = tt_content
            fieldName = media
        }
        // we only can handle one image:
        maxItems = 1

        // if we want no processing of the image:
        renderObj = TEXT
        renderObj {
            data = file:current:publicUrl
        }

        // maybe a processing  is necessary 
        // (always deliver smallest image possible)
        #renderObj = IMG_RESOURCE
        #renderObj {
        #    file {
        #        import.data = file:current:uid
        #        treatIdAsReference = 1
        #        width = 500c
        #        height = 200c
        #    }
        #}
        stdWrap.wrap = <section class="teaser" style="background-image:url('|');">
    }

If this does not work you have a general problem extracting the files from your tt_content elements.
Maybe your fieldname is not media?
Inspect your database:

SELECT fieldname 
  FROM sys_file_reference 
  WHERE tablenames = 'tt_content' 
    AND uid_foreign = <tt_content_record-uid>

I just inspected one installation of mine and found: the fieldname is assets.

Answer 2

I can't try it but I would do it like this:

10 = FILES
10 {
    references {
        uid.data = uid
        table = tt_content
        fieldName = media
    }

    begin = 0
    maxItems = 1

    renderObj = IMG_RESOURCE
    renderObj {
        file.import.data = file:current:publicUrl
    }
    stdWrap.wrap = <section class="teaser" style="background-image:url('|');">
}

Example: https://docs.typo3.org/typo3cms/TyposcriptReference/8.7/ContentObjects/Files/Index.html#usage-with-references

Answer 3

You use fluid_styled_content, don't you? Why not using FLUIDTEMPLATE and DataProcessing? There you get all the content data in a nice array and you are able to build your HTML like you want.

See https://usetypo3.com/custom-fsc-element.html for a small start.

Here the documentation for DataProcessing: https://docs.typo3.org/typo3cms/TyposcriptReference/8.7/ContentObjects/Fluidtemplate/#dataprocessing