Background Images mit Markern ansteuern?

Hallo!

Ich komme leider nicht drumrum ein Hintergrundbild in einer Tabelle einzubauen. Dieses soll zudem später im Frontend austauschbar sein... Hat jemand einen Tip? Mit TS-Beispiel wäre super!

Vielen Dank!
Grüße,Tom

Hallo onefortypo,

die Geschichte mit dem Austausch des Bildes im FE kann ich so spontan nicht lösen. Aber Bilder, die als Background eingerichtet sind, können via CSS angesprochen werden und mit TS kann man die nötige Flexibilität einbauen.

Im Template muss nur ein zusätzlicher Marker eingebaut werden:

<table class="###IMAGEMARKER###>
</table>

in der CSS-Datei werden kann beispielsweise zwei Klassen "Bild1" und "Bild2" eingerichtet und im TS sieht das Ganze dann so aus:

page.marker {
  IMAGEMARKER = TEXT
  IMAGEMARKER.value = Bild1 
  }

Das produziert folgenden Quellcode:

<table class="Bild1">
</table>

Wenn nun die Hintergrundbilder bei bestimmten Unterseiten automatisch wechseln sollen, kann man das mit Conditions und der entsprechenden Anwendung des obigen TS-Codes, sowie entsprechender CSS-Klassen tun.

War es das, was Du wolltest?

Gruß
typo3Newbie

hi typo3newbie!

vielen dank für hilfe!
das wäre aufjedenfall genau das was ich brauche...

ich könnte auf den frontend austausch der bilder durchaus verzichten.
ich weiss allerdings nicht wie ich dein beispiel fortführen soll, wenn ich die verschiedenen bildklassen aus der css datei verschiedenen typoseiten zuweisen möchte.

hast du ein beispiel?
vielen dank!

onefortypo schrieb

ich könnte auf den frontend austausch der bilder durchaus verzichten.
ich weiss allerdings nicht wie ich dein beispiel fortführen soll, wenn ich die verschiedenen bildklassen aus der css datei verschiedenen typoseiten zuweisen möchte.

Wenn du auf verschiedenen Seiten, verschiedene Bilder einfügen willst, kannst du das in TYPO3 einfach gestalten.

Such mal nach Banner im Forum

Diese kannst du dann an einem Marker im HTML Template ausgeben lassen:

<div style="background-image:url(uploads/media/###DEINMARKER###)">blabla</div>

hi wunschtacho!

danke für den ansatz!

ich weiss allerdings nicht genau wonach ich suchen soll wenn ich mir die banner beiträge ansehe.#paralyzed#

grüße,
tom

temp.banner_1 = TEXT
temp.banner_1 {
	data = levelmedia: -1,slide
	field.listNum = 0
	ifEmpty = bild1.jpg
	wrap = url(uploads/media/|)
} 

page.10.marks.BANNER < temp.banner_1

Damit fügst du am ###BANNER### dein Bild ein. Das Bild kannst du über Seiteneigenschaften innerhalb einer erweiterten Seite einfügen

HTML Code z.B.:

<div id="links" style="background-repeat: no-repeat; background-position: center center; width:100px; height:100px; background-image:  ###bild###"></div>

Das muss jetzt aber reichen 😉

hi! danke für das script!
es scheint wirklich sehr einfach zu gehen.... nur natürlich bei mir nicht! #paralyzed#

in dem css aus deinem beispiel steht ###bild###
sollte es nicht ###banner### heissen?

in meinem versuch wird leider der marker nicht überschrieben.

vielleicht siehst du ja den fehler im ts! (markername BACKGROUNDIMAGE)

seite.10 {
template = FILE
template.file = fileadmin/home_templ.htm
marks.INHALT < styles.content.get
marks.NEWS < styles.content.getRight
marks.BACKGROUNDIMAGE < temp.BACKGROUNDIMAGE_1

marks.MENUE = HMENU
marks.MENUE.entryLevel = 0
marks.MENUE.1 = TMENU
marks.MENUE.1 {
	NO.allWrap = <tr><td class="boxtitel" height="30">|</td></tr>
   	ATagParams=class="#no"
   	NO.beforeImg = fileadmin/img/pfeil.gif
   	NO.AtagParams = style=none
   	NO.after = &nbsp;
}

temp.BACKGROUNDIMAGE_1 = TEXT
temp.BACKGROUNDIMAGE_1 {
        data = levelmedia: -1,slide
        field.listNum = 0
        ifEmpty = bild1.jpg
        wrap = url(uploads/media/|)
} 
}

CSS einbindung:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image: ###BACKGROUNDIMAGE###; background-repeat: no-repeat; background-attachment: fixed;">

danke nochmal!

definiere das temp.BACKGROUNDIMAGE_1 nicht innerhalb von seite.10 sondern zB ganz am anfang deines TS

georg

super funktioniert!
vielen dank an alle!

mich würde nur noch interessieren warum das temp.gedöns nicht in den seitenteil gehört!

grüße,
tom

weil die temporären Objekte nicht dort angelegt werden

georg