@Jochen,
vielen Dank für den praktischen Hinweis. Das klappt gut.
Was mache ich aber, wenn ich nun doch einzelne übersetzte Seiten mit eigenen Bildern versehen will?
Gruß Andreas
TYPO3: Dynamische Headerbilder
Ein oft gewünschtes Feature, ist das Einfügen von Headerbildern. Diese sollen am besten für jede Seite einzeln aus den TYPO3-Backend angegeben und auf untergeordnete Seiten vererbt werden können. Und vielleicht darfs noch eine Slideshow mit mehreren Bildern sein? Wenn's sonst nichts ist...Einzelne Headerbilder mit Vererbung
First Things First. Versuchen wir zunächst für eine Seite ein Bild zu bestimmen. Die Vererbung nehmen wir gleich mit. In den Seiteneigenschaften für die betreffende Seite hängen wir dazu unter "Dateien" das gewünschte Bild an. Soweit so einfach. Der Rest geschieht im Typoscript und im Template. Abb: TYPO3: Seiteneigenschaften > Ressourcen: Bilder auswählen Im Template sollten wir ein entsprechenden Marker einfügen, also z.B. ###HEADER###. Im Typoscript folgt jetzt die Verknüpfung von Beidem. Marker ansprechen
page.10.marks.HEADER = TEXT
Datenbankfeld "media" mithilfe von des Befehls levelmedia ansprechen (dort ist unser Bild angegeben) und durch die Angabe von "slide" den Seitenbaum rekursiv durchsuchen
page.10.marks.HEADER.data = levelmedia:-1, slide
Nur den 1. Treffer verwenden:
page.10.marks.HEADER.listNum = 0
Den Bildnamen mit dem Pfad "/uploads/media/" wrappen und entweder als Bild oder als Hintergrundbild ausgeben. Wichtig ist, dass TYPO3 an Seiten angehängte Bilder immer unter "/uploads/media/" speichert, egal wo sie vorher lagen!
page.10.marks.HEADER.wrap = <img src="/uploads/media/|" alt="header"/>
#page.10.marks.HEADER.wrap = <div style="background: url('/uploads/media/|'"></div>
Und schon ist es einem Redakteur mit den nötigen Rechten möglich, Headerbilder einzustellen oder auszutauschen.
Let's slide! Mehrere Headerbilder auf der gleichen Seite.
Wirklich interessant wird's, wenn man eine Slideshow aus den Headerbildern machen soll. Aus den Backend heraus ist es wieder sehr leicht. Man gibt einfach statt einem Bild gleich mehrere an. Das Typoscript sorgt jetzt dafür, dass die Bildnamen von Javascript oder vielleicht auch Flash interpretiert werden können. In diesem Beispiel werden die Daten an ein Javascipt weitergegeben.
#Bildnamen an das JS übergeben(xBilderArray) page.headerData.60 = TEXT page.headerData.60.data = levelmedia:-1, slide page.headerData.60.wrap = <script type="text/javascript">var bilderArray = "|";</script> Dazu legen wir zunächst einen neuen Textlayer an und führen erneut eine Suche nach dem Media-Datenbankfeld der Seite durch. Der entscheidende Unterschied zum obigen Beispiel, ist das “fehlen” von listNum = 0. Das führt dazu, dass als Dateinamen einfach kommasepariert ausgegeben werden. Die Variable “bilderArray” kann jetzt mit Javascript weiterverwendet werden. Zunächst könnte man ein Array mit den Bildernamen bauen: bilderArray = bilderArray.split(”,”); Von hier ab kann jeder sein eigenes Javascript erdenken, um den Bildwechsel wirklich zu realisieren. Mit Javascipt-Bibliotheken wie Mootools sind aufwendige Überblendungen und andere Effekte möglich, aber oft reicht es mit
document.getElementById(”id-des-bildes”).src = '/uploads/media/' + andererbildname
die Bilder auszutauschen. Wie genau die Umsetzung aussehen könnte, würde in dieser Anleitung zu weit gehen. Aber zumindest der Grundstein sollte damit gelegt sein. Viel Erfolg!
Kommentare
@BigThumb:
Welche Felder von den Seiteneigenschaften übersetzt werden sollen und welche sich TYPO3 aus der Originalseite ziehen soll, kannst Du im Install-Tool unter page_overlay_fields einstellen. Dort einfach Media rausnehmen, dann ist das Feld in den Übersetzungen weg.
Hallo,
erst mal vielen Dank für die gut erläuterte, verständliche und (für mich als relativer Neuling bei Typo3) hilfreiche Anleitung zur Anzeige von wechselnden Bildern.
Das funktioniert bei Mehrsprachigkeit aber nur, wenn ich für jede relevante Seite für jede Übersetzung in den Seiteneigenschaften ein Bild auswähle. Wenn ich für die verschiedenen Sprachen das selbe Bild verwenden möchte, so wird dieses von Typo3 doppelt/mehrfach in /uploads/media gespeichert.
Das ist unhandlich und (eigentlich) überflüssig.
Wie kann ich das umgehen?
Vielen Dank
Andreas
Danke für die Anleitung!
Bei mir hat die Anzeige der Bilder zuerst auch nicht geklappt, ging dann aber nachdem ich den Pfad von /uploads/media/ in uploads/media/ geändert hatte.
Ein anderes Problem wenn kein Bild angezeigt wird, könnte sein, dass das Bild zu groß ist. Hier kann man die maximale Bildgröße in den Konstanten hochsetzen:
styles.content.imgtext.maxW = z.B. 1000
Hallo,
ich weiß das Thema ist schon uralt, aber funktioniert ja. Nur wenn ich das Bild als Hintergrundbild ausgeben will passiert nichts hier der HTML Code:
Ich habe noch Probleme mit dem Typoscript.
Es wäre suuper wenn das was oben nur als >> Im Typoscript folgt jetzt die Verknüpfung von Beidem. << ein bisschen genauer definiert wäre.
Wo finde ich das Typoscript?
Welche Datei mit welchem Pfad ist damit gemeint?
Geht das Sktipt direkt vom typo3 installationsordner aus? Oder wäre es evtl. besser mit relativem Pfad zu arbeiten?
@Till:
Schau im im Intallationstool.
Dort gibts glaub bei "Basic Configuration" ganz unten in der Localconf eine Einstellung: [GFX][gdlib_png]
Ansonten gibt im InstallTool noch einen extra Punkt "Image Processing"
Viele Grüße
Tobi
Geile scheisse! Vielen Dank!
Hallo
Ich habe das selbe problem wie ralfi...
Ich habe nachgesehen wenn man unter der aktuellen typo3 instanz einen file uploaded unter resources speichert es bei mir unter uploads/tf ab.
Ich habe dass dann angepasst ohne erfolg...
Es kam der alt text dabei heraus und im quelltext stand dann:
http://192.168.11.2/tvweb405/”/uploads/tf/”
Danach hab ich im typoscript die "" weg gemacht bei img src und der erste / vor uplaods weg danach stand dann korrekt im quelltext :
http://192.168.11.2/tvweb405/uploads/tf/
allerdings kam kein bild...
Daher habe ich im typoscript auch den vollständigen pfad zum header image angegeben und dieses ging..
Nur die funktion die der typoscript erfüllen soll erfüllt es ja damit nicht ;)
Wäre um eine hilfestellung sehr dankbar
gruß
nils
[...] [...]
@Till: warum sollte TYPO3 beim Hochladen über den Dateimanager irgendetwas konvertieren?
@Ralfi: Prüf doch mal, was genau als HTML-Code ausgegeben wird und schaue, ob die Bilder tatsächlich existieren. Prüf nochmal genau, ob die Pfade stimmen. //LG /thomas
Frage:
Wenn ich Headerbilder als .jpg hochlade konvertiert Typo3 sie mir in .gifs mit ziemlicher Grobkörnung.
Wo kann ich das auf .jpf umstellen?
ups....tschuldigung
Hier die Tags
Seite 1:
img src=”/uploads/media/header_1.jpg” alt=”header”/
Seite 2:
img src=”/uploads/media/header_2.jpg” alt=”header”/
usw.
@Thomas
Besten Dank für die schnelle Antwort!
Bei mir wird im Seitenquelltext folgender Tag ausgegeben:
Seite 1:
Seite 2:
usw.
Das heisst, dass der jeweiligen Seite zugeordnete Header Bild wird im Namen erkannt aber ausgegeben wird nur:
”header”/
Hab auch schon versucht den Pfad zum jeweiligen Ordner im Fileadmin anzugeben funktioniert aber auch nicht.
@Raphi: Das klingt so, wie wenn er die Bildquelle nicht findet. Welcher Image-Tag kommt denn genau raus?
Bin Typo3 Neuling und irgendwie funktioniert bei mir das ganze nicht. Es erscheint nur der 'alt' Text :-( was mache ich falsch? Installierte Typo3 Version ist 4.2.2
Danke Für die Antwort
ich für meinen teil muss mich hier mal ganz herzlich bedanken. wenn ich auch meine anforderung mit diesem tip nicht völlig erfüllt sehe, so hat es mir die denkanstöße gegeben, die ich brauchte, um zum ziel zu kommen.
danke dafür
@Lina:
Hallo Lina! Dank für den Kommentar.
Sorry, aber ich muss Dir widersprechen: Ich finde, bequemer geht es nicht, als direkt in den Seiteneigenschaften die Bilder auszuwählen und sogar hochladen.
Ansonsten läd man sie zuerst über den Dateimanager hoch und dann Wählt man einfach die Headerbilder aus.
Unser Vorgehen ist doch genau das gleiche wie bei der Extension, nur dass wir ohne eine extra Exension auskommen.
Grüße // thomas alboth
Ich finde sauberer und einfacher geht es nicht. Dazu muss man nicht erst eine Extension bemühen.
Das Problem der vorgeschlagenen Methode sehe ich vor allem darin, dass die Headerbilder weder komfortabel hochgeladen noch durch die Redakteure ausgetauscht werden können.
Eine sehr viel flexiblere Lösung verwendet läd die HEader Bilder in den Seiteneigenschaften und verwendet die Extension tx_danprootlineinfo: http://typo3-blog.net/typo3-extensions/wechselnde-headerbilder.html
Liebe Grüße Lina