Möglichkeiten

Es gibt verschieden Möglichkeiten in TYPOlight dynamisch Bilder auf einer Seite darzustellen. Hier möchte ich Möglichkeiten aufzeigen, wie man auf jeder Seite ein anderes Bild haben kann, ohne eine extra Erweiterung nutzen zu müssen. Zusätzlich möchte ich ein wenig anregen, wie kreativ man mit TYPOlight umgehen kann und Lösungen für sich finden kann.

Natürlich gibt es auch schon eine passende Erweiterung für solche Bedürfnisse: pageimage - Seitenbild

Grundlagen

• deutsche Beschreibung der Inserttags
• Man sollte sich mit den Grundbegriffen von TYPOlight auskennen ;-)
• Natürlch HTML und CSS

Ein Bild über das Seitenlayout und Artikel einbinden

Natürlich kann man auch mit einem Artikel ein Bild auf einer Seite einbinden. Dazu muss man nur unter Seitenlayout das Layout bearbeiten und noch einen Artikel an der Stelle einbinden, wo man das Bild dann später einmal haben möchte (zu finden unter Frontend-Module > Eingebundene Module). Dann hat man die Möglichkeit bei einem neuen Artikel in den Einstellungen auszuwählen wo der genau hin soll (Unter Artikel bearbeiten > Layoutbereich und Suchbegriffe > Anzeigen in), ob in die Hauptspalte oder in die Kopfzeile, je nachdem wo man das Modul Artikel so drinn stehen hat. Dann reicht es einfach ein ContentElement Bild einzufügen. Das muss dann für jede Seite gemacht werden. Ansonsten wird kein Bild angezeigt.

Für diejenigen, die ein Bild mehrfach verwenden wollen, kann es sich lohnen dieses über eine eigenes Modul (eigener HTML-Code) verfügbar zu machen. Dann braucht man als ContentElement nur noch das Modul auszuwählen und hat dann schon alle Parameter so wie man diese haben möchte.

Bild per CSS im Background oder Bild per Inserttag im img-Tag ?

Das kommt immer ganz darauf an was man im Resultat erreichen möchte. Ich werde hier an dieser Stelle beide Wege Beschreiben.

Ein Bild über CSS einblenden

Mit einer Klasse im Body

• Seitenstrukur > Seite bearbeiten > Experten Einstellung > CSS Klasse für Navigation (wird auch für den Body verwendet!) -> erst ab TL Version 2.6?)
• im CSS: .cssfuerdieseite #header {background: #fff url(tl_files/header/bildfuerdieseseite.png) no-repeat top left;}
• diese Schritte für jede Seite wiederholen, wobei auch die selbe Klasse mehrfach vergeben werden kann.

Ein Bild über einen Inserttag einbinden

Hier kann man auch direkt im eigenen Template arbeiten wenn man möchte bzw. wenn man eh schon eins angelegt hat. Ansonten empfiehlt sich der Weg über ein Eigenes HTML-Code Modul.

Für jede Seite ein Bild

• Module -> Eigener HTML-Code
• <img src="/tl_files/header/{{env::page_alias}}.png" alt="{{env::page_title}}" />
• Eigenes Modul im Seitenlayout dem Header zuweisen

env::page_alias gibt den Alias der aktuellen Seite aus. env::page_title gibt den Titel der aktuellen Seite aus. Jetzt braucht man nur für jede Seite ein Bild in dem Ordner header anlegen und es so benennen wie der alias der Seite ist auf dem das Bild zu sehen sein braucht. Im Grunde kann es auch immer das selbe Bild mit einem anderen Namen sein ;-)

Für jede Hauptseite ein Bild

• Module -> Eigener HTML-Code
• <img src="/tl_files/header/{{env::main_alias}}.png" alt="{{env::main_title}}" />
• Eigenes Modul im Seitenlayout dem Header zuweisen

env::main_alias gibt den Alias der übergeordneten Hauptseite aus. env::main_title gibt den Titel der übergeordneten Hauptseite aus. Jetzt braucht man nur für jede Hauptseite ein Bild in dem Ordner header anlegen und es so benennen wie der alias der Seite ist auf dem das Bild zu sehen sein braucht. Im Grunde kann es auch immer das selbe Bild mit einem anderen Namen sein ;-)

Spezialfall: für jede Hauptseite 2 (oder mehr) verschiedene Bilder

Hier wird der Ordner einfach durch den Inserttag ersetzt:

<img src="/tl_files/header/{{env::main_alias}}/rechtes_bild.png" alt="{{env::main_title}} - {{env::page_alias}}" />
 <img src="/tl_files/header/{{env::main_alias}}/linkes_bild.png" alt="{{env::main_title}} - {{env::page_alias}}" />

Jetzt muss man natürlich für jeden Hauptpunkt einen extra Ordner anlegen und da drinn die Bilder mit den passenden Namen anlegen. Zu beachten ist hier, das der alt-Inhalt vom main_title und page_alias genommen wird, damit man ein wenig abwechslung hat ;-)

Aber das kann jeder natürlich so machen wie er möchte.

Spezialfall: mehr Ordnung durch verschiedene Dynamische Ordner

Richtig schön wirds dann mit verschiedenen Bildern in verschiedenen Ordnern um richtig Ordnung zu halten bei größeren Seiten:

<img src="/tl_files/header/{{env::main_alias}}/{{env::page_alias}}.png" alt="{{env::main_title}} - {{env::page_alias}}" />

Bei eigenem Seitentamplate kann man auch einen Insertag im Body verwenden

Klasse:

<body id="top"<?php if ($this->class): ?> class=" {{env::page_alias}}<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>

ID:

<body id="top {{env::page_alias}}"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>

Natürlich geht das auch wieder mit env::main_alias

Sprachabhängig?

Das beste ist: Das ganze ist durch den page_alias auch schon sprachabhängig, da jede andere Sprache auch einen anderen Alias haben wird (Cave: zum Teil unterscheiden sich die Seiten nur durch Zahlen, die TL automatisch generiert). Wenn man zum Beispiel auf dem Bild auch noch Text hat kann das sehr praktisch sein.

--- Tutorial erstellt von --MacKP 23:04, 10. Mär. 2010 (UTC)