https://wiki.stephanschlegel.de/index.php?action=history&feed=atom&title=Typo3_-_Header_Image_austauschenTypo3 - Header Image austauschen - Versionsgeschichte2026-05-06T15:22:10ZVersionsgeschichte dieser Seite in WikizoneMediaWiki 1.35.14https://wiki.stephanschlegel.de/index.php?title=Typo3_-_Header_Image_austauschen&diff=18449&oldid=prev84.161.174.119: /* Auswahl über ein Extension Template */2006-03-16T15:43:38Z<p><span dir="auto"><span class="autocomment">Auswahl über ein Extension Template</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 16. März 2006, 15:43 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l11" >Zeile 11:</td>
<td colspan="2" class="diff-lineno">Zeile 11:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Vorgehensweise:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Vorgehensweise:</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''1. HTML-Template vorbereiten'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''1. HTML-Template vorbereiten'''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Im Template wird ein Marker gesetzt. Um die Trennung von Inhalt und Aussehen der Seite zu gewährleisten machen wir das mal über einen Inline Style:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Im Template wird ein Marker gesetzt. Um die Trennung von Inhalt und Aussehen der Seite zu gewährleisten machen wir das mal über einen Inline Style:</div></td></tr>
</table>84.161.174.119https://wiki.stephanschlegel.de/index.php?title=Typo3_-_Header_Image_austauschen&diff=223&oldid=prev84.161.174.119 am 16. März 2006 um 15:42 Uhr2006-03-16T15:42:58Z<p></p>
<p><b>Neue Seite</b></p><div>Die Aufgabe ein Bild im Headerbereich der Seite auszutauschen kommt ziemlich oft vor. <br />
Zur Lösung bieten sich verschiedene Möglichkeiten an:<br />
# Flash Film im Header<br />
# Zufällige Bildauswahl - siehe Random Image<br />
# Auswahl über ein Inhaltselement (z.B. in der Border-Spalte)<br />
# Auswahl über ein Extension Template <br />
<br />
<br />
== Auswahl über ein Extension Template ==<br />
Diese Möglichkeit hat den Vorteil daß man ein Bild als Default-Wert vorgeben kann und diesen Wert für verschiedene Abzweige des Seitenbaumes Überschreiben kann. Der neue Wert (=das neue Bild) gilt dann für alle Unterseiten.<br />
<br />
Vorgehensweise:<br />
'''1. HTML-Template vorbereiten'''<br />
Im Template wird ein Marker gesetzt. Um die Trennung von Inhalt und Aussehen der Seite zu gewährleisten machen wir das mal über einen Inline Style:<br />
<br />
<div id="bild" style="background-image: url(###HEADERIMAGE###);"></div><br />
<br />
Der Marker ###HEADERIMAGE## soll später durch den Pfad zum Bild ersetzt werden.<br />
Ein weiterer Vorteil: wenn der Marker keinen gültigen Wert hat wird in den meisten Browsern einfach nichts angezeigt und nicht etwa der Marker selbst oder ein rotes Kreuzchen...<br />
<br />
'''2. Extension Template anlegen'''<br />
<br />
Constant Feld:<br />
<pre><br />
#cat=headerimage/ctext/a; typoe=string; label=Header Image<br />
headerimage=fileadmin/images/headerbild/headerbild1.jpg<br />
</pre><br />
Die erste Zeile sorgt dafür dass man später das Bild komfortabel im Constant Editor eingeben kann. Das kann man sich auch sparen wenn man lieber die Konstanten direkt im Constant Feld eingibt.<br />
Die zweite Zeile legt die Variable headerimage an.<br />
<br />
Setup Feld:<br />
<pre><br />
temp.headerimage=TEXT<br />
temp.headerimage.value={$headerimage}<br />
</pre><br />
Hier wird ein temporäres Textobjekt angelegt und mit dem Inhalt der Variablen headerimage befüllt.<br />
Wenn man nicht mit CSS arbeitet sondern das Bild direkt in den Inhaltsbereich des Templates füllen will kann man auch mit einem IMAGE Objekt arbeiten oder sogar mehrere Bilder in ein COA Objekt füllen. Dann macht Typo3 auch gleich die passenden img Tags.<br />
<br />
3. Marker füllen<br />
Im Haupttemplate müssen wir jetzt noch das Extension Template unter Include Basis Templates einbinden und den Marker im Setup einbinden:<br />
<pre><br />
workOnSubpart = DOCUMENT_BODY<br />
# HEADERIMAGE<br />
marks.HEADERIMAGE < temp.headerimage<br />
...<br />
</pre><br />
<br />
4. Bilder austauschen<br />
Bis jetzt steht in allen Seiten das gleiche Bild. Will man für eine Unterseite ein neues Bild verwenden legt man einfach auf der betreffenden Seite ein neues Extension Template an und verändert im Constant Editor den Pfad oder schreibt direkt im Constant Feld den neuen Pfad rein:<br />
<br />
headerimage=fileadmin/images/headerbild/neuesHeaderbild.jpg</div>84.161.174.119