Zum Inhalt springen

textmedia Bild als Hintergrund in <div>

Erstellt am 27. April 2020 · 1 Antwort · letzte Antwort am 2. Januar 2021

Tags: Fluid, Bilder, Frage

mimii ·

Hallo ins Forum,
ich möchte aus bestimmen colPos die Bilder als Hintergrundbilder für ein <div> auslesen. Dazu möchte ich die lib.dynamicContent nutzen, die mir für alle anderen colPos auch die Inhalte ausliest.

lib.dynamicContent = COA
lib.dynamicContent {
    10 = LOAD_REGISTER
    10 {
        colPos.cObject = TEXT
        colPos.cObject {
            field = colPos
            ifEmpty.cObject = TEXT
            ifEmpty.cObject {
                value.current = 1
                ifEmpty = 0
            }
        }
        pageUid.cObject = TEXT
        pageUid.cObject {
            field = pageUid
            ifEmpty.data = TSFE:id
        }

        contentFromPid.cObject = TEXT
        contentFromPid.cObject {
            data = DB:pages:{register:pageUid}:content_from_pid
            data.insertData = 1
        }
    }

    20 = CONTENT
    20 {
        table = tt_content
        select {
            includeRecordsWithoutDefaultTranslation = 1
            orderBy = sorting
            where = {#colPos}={register:colPos}
            where.insertData = 1
            pidInList.data = register:pageUid
            pidInList.override.data = register:contentFromPid
        }
   }
    30 = RESTORE_REGISTER
}

Ich wollte das im Fluid dann so mache, funktioniert aber nicht

<div class="col-md-6" style="background-image:url('{f:cObject(typoscriptObjectPath: 'lib.dynamicContent', data: '{pageUid: '{data.uid}', colPos: '60'}')}">
</div>

Irgendwie müsste es wohl mit {f:uri.image(src:mediaElement.uid, treatIdAsReference:1)}, wobei mir hier nicht ganz klar ist, wo das mediaElement herkommen soll, wenn es nicht vorher aus Seite und der colPos ausgelesen wurde.

Wie kriegt man das hin?

THX für Eure Hilfe und Gruß
mimii

Eumolp ·

Hi!

Du liest hier ja Inhalte aus Spalte 60 aus und lässt die komplett rendern.
So bekommst du das komplette HTML etc und da könntest du dann per JS das Bild rausfischen....#-\

Eleganter kannst du das mit GridElements machen, weil du ja etwas um andere Inhalte herum wrappen willst

<div class="bgImage" style="background: url({bgimage})"> 
  die Inhalte auf dem HG Bild
</div>

Geh mal von den GridElements Beispielen aus baue einen 1-Spalter der nur Inhalte und ein Bild aufnimmt.

Dann rennt das.

Richtig sauber, wenn du die tt_contentTCA aufbohrst, dann könntest du bei jedem Element ein anderes Bild verwenden.
Im Bootstrap-Paket (offizielle Basis Projekt) wird das sehr schon durchexerziert.
An sich gar nicht so kompliziert.

Für den Anfang nimm mal Grid-Elements.

(ist zwar schon ein Weilchen her, aber das braucht bestimmt wieder mal jemand als Denkanstoß)

Christian.