Hallo, ich möchte im CSS dynamisch ein Bild, je nach Kategorie setzen.
Folgender Code zeigt dies etwas besser:
<div id="header" style="background: url(header.jpg) no-repeat center;">
<a href="">
<img src="maske.gif" alt="Technisches Hilfswerk" />
</a>
</div>
Wie kann ich das Bild header.jpg in TemplaVoila per Kategorie ändern? Alles was ich finde, erstellt ein ganzes Image-Tag. Ich brauche aber nur den CSS-Style des DIVs zu füllen.
Wäre für Hilfe sehr dankbar.
Gruß
Simon
Hi,
wenn du nur das Attribut "style" des div-Tags füllen willst,
kannst du es ja auch als Attribut mappen. Aber bei dir geht es ja eher
darum der Inhalt der Klammer "url(*)" zu füllen, oder?
Gruß,
Sun
Hallole!
Mal abgesehen davon, dass du ja (eigentlich) den HTML-Code und den CSS-Code getrennt halten solltest, sprich CSS ausgelagert in eine eigene Datei 😉 , verstehe ich dein Problem wie folgt:
Du willst in einem mit Templavoila gemappten Layout "dynamisch" den Hintergrund des DIVs "header" füllen. Womöglich in Abhängigkeit davon, welche Seite gerade angezeigt wird (mit "per Kategorie" konnte ich wenig anfangen)?
Wenn meine Vermutung stimmt, so kannst du dies über den Seitentyp "Erweitert" erreichen. Dort hinterlegst du die gewünschte Hintergrundgrafik. In Templavoila musst du dann noch ein Objekt auf den <div id="header"> mappen z.B. mit dem Object Path lib.header. Ins Roottemplate gehört dann noch folgender Code
//*** Einfügen eines Bildes aus dem Seitentyp "Erweitert" ***//
//*** und dem dortigen Eintrag in "Dateien" ***//
lib.header = IMAGE
lib.header {
file.import.data = levelmedia: -1, slide
file.import = uploads/media/
file.import.listNum = 0
file.import.override.field = media
}
//*** Einfügen eines Bildes ENDE ***//
Über die Funktion slide wird erreicht, dass von einer Unterseite ausgehend so lange in Richtung Root-Seite gesucht wird, bis ein Bild gefunden wurde. Oder anders herum ausgedrückt. Das Bild wird so lange an die Unterseiten "vererbt", bis auf einer der Unterseiten ein anderes Bild eingefügt wurde.
War's das? Oder fällt meine Erklärung eher unter "Ich hatte eine Lösung, aber die paßte nicht zum Problem"?
Grüße
Erwin
Hallo,
wie Suntzu meinte, möchte ich gerne das Bild innerhalb von url() dynamisch halten.
Der Code von Ehontheim macht genau das, was ich mit Kategorien meinte. Für verschiedene Bereiche der Webseite, sollen verschiedene Header angezeigt werden. Allerdings wird eben ein Image-Tag erzeugt, welches das Bild austauscht, welches eigentlich fix sein sollte. Es ist ein teilweise transparentes Gif (maske.gif) als Bild definiert, unter das mittels CSS ein anderes Bild (header.jpg) ähnlich einer darunterliegenden Ebene angezeigt wird.
Am einfachsten gezeigt am bisher erstellten Code: http://www.tiffert.biz/index.php?id=153
Stecke da wirklich fest und weiß nicht, wie ich in das Style-Attribut ein Bild aus dem Media-Bereich packen kann.
georg
Super, vielen Dank.
Trotz Suche und durchwühlen von Büchern nicht schlauer geworden. Da fehlt einfach noch das Typoscript-Verständnis.
Problem somit gelöst, mit Dank an alle Beteiligten.
Als Nachtrag noch mal mein Code angepasst an Templavoila:
<field_header type="array">
<tx_templavoila type="array">
<title>Header</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>TypoScriptObject</eType>
<eType_EXTRA type="array">
<objPath>lib.header</objPath>
</eType_EXTRA>
<TypoScriptObjPath>lib.header</TypoScriptObjPath>
<tags>div:attr:style</tags>
</tx_templavoila>
<type>attr</type>
</field_header>
# Headerimage
lib.header = COA
lib.header {
# HTML-Objekt
5 = HTML
5.value = background:url(
# Bild
10 = IMG_RESOURCE
10 {
file.import {
cObject = TEXT
cObject.value = fileadmin/templates/thw-alsdorf.de/header.jpg
cObject.override {
required = 1
data = levelmedia: -1, "slide"
wrap = uploads/media/ |
listNum = 0
}
}
}
# HTML-Objekt
15 = HTML
15.value = ) no-repeat center;
}
so gehörts sich, danke! 😉
georg