Zum Inhalt springen

background-images im backend via flexible content

Erstellt am 17. März 2009 · 3 Antworten · letzte Antwort am 23. April 2009

Tags: Frage

TheRisingSun ·

Hallo!

Ich würde gerne den BE-Redakteuren die Möglichkeiten bieten selbst Hintergrundbilder pro Seite anzulegen. Ich habe nach einer Lösung gegooglet und auch etwas gefunden aber verstehe nicht ganz wie ich das umsetzen soll.
Hier die vermeintliche Lösung: http://www.typo3-jack.net/typo3-english-lists-netfielders-de/9688-typo3-using-background-image-flexible-content.html

Was ich getan habe ist folgendes:
1) bg_template.html angelegt mit folgendem Code:

<div class="bg_image_wrap">
  	<div class="bg_image" style="background-image:url(dummy.gif);"></div>
</div>

2) ds und to flex_bg_image angelegt
3) das erste div als root gemapped
4) das zweite div mit mapping-type "attribut" gemapped
(beide elemente mit editing-type "content elements")

Wenn ich es richtig verstehe, dann muss ich nun flexible-content anlegen und ein bild als content festlegen. Aber wie schaffe ich es, dass diese Bild als Hintergrundbild ausgespuckt wird?

Folgender Code soll laut Lösungsansatz (siehe oben) in die Datenstruktur:

10 = IMG_RESOURCE
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.stdWrap.wrap = background-image: url(|);

Nach meinem Verständis wird mit diesem TS-Code immer nur das erste Bild aus dem Verzeichnis "uploads/templavoila/" verwendet. Ich möchte aber wie gesagt, dass die Redakteure die gewünschten Bilder selbst hochladen und als Hintergrundbild anlegen können. Pro Seite des Seitenbaums jeweils ein Bild möglichweise über Flexible Content.

Hat jemand ne Idee?

TheRisingSun ·

Würde es vielleicht ausreichen via TS in der Datenstruktur den aktuellen Content des Flexible Contents auszulesen und als BG-Image auszugeben? Wenn ja, wie?

TheRisingSun ·

Ich habe übrigens 2 Seiteninhalte pro Seite:
1. Einen Seiteninhalt vom Typ Image (das zu verwendene Bild)
2. Einen Seiteninhalt vom Typ Flexible Content, der als Content das Bild aufnimmt.

Macht folgender Code Sinn?

<TypoScript>
<![CDATA[
10 = IMG_RESOURCE
10.file.import = uploads/pics/
10.file.import.field = field_flex_bg_image #(vielleicht so?)
10.stdWrap.wrap = background-image: url(|);
]]>
</TypoScript>

Hier mal die XML-Struktur des Seiteninhalts vom Typ "Flexible Content" (aus tt_content.tx_templavoila_flex):

<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
<T3FlexForms>
    <data>
        <sheet index="sDEF">
            <language index="lDEF">
                <field index="field_flex_bg_image">
                    <value index="vDEF">884</value>
                </field>
            </language>
        </sheet>
    </data>
</T3FlexForms>

Der Wert ist die UID des Seiteninhalts (vom Typ Image), also des Bildes, welches als Hintergrundbild ausgegeben werden soll.

froemken ·

Du schreibst ganz oben, dass du "Bilder pro SEITE" mhaben willst. Warum kloppst du die Bilder dann in ein CE rein?
Hier mal eine Quick&Dirty-Überlegung:
- In den Seiteneigenschaften hast du die Möglichkeit unter "Ressources" Bilder im Feld "Media" zu hinterlegen. Damit ist ein Bild WIRKLICH einer SEITE zugeordnet.
- Beim Mapping bitte nicht nur einfach div angeben, sondern div:attr:style, dann findet TV auch dein background-image
- Bevor du versuchst zwei CEs miteinander zu verbinden über das Feld field, solltest du es lieber bei einem CE belassen bzw. ist in deinem Fall wäre ein NONE als Art besser, da der andere User das Bild gar nicht in das FCE einträgt, sondern in das oben genannte Media-Feld.
- Unter "local configuration" fügst du dann die verkürzte XML-Struktur aus dem DS ein und ersetzt das vorgegebene <TypoScript> mit dem Script hier:

<TypoScript>
<![CDATA[
10 = IMG_RESOURCE
10.file.import = uploads/media/
10.file.import.data = page : media
10.file.import.listNum = 0
10.stdWrap.wrap = background-image: url(|);
]]>
</TypoScript>

"verkürzte XML-Struktur" ist schwer zu erklären...hoffe du weißt was ich damit meine.

So könnte das mit dem Hintergrund klappen.

Stefan