Schnellnavigation:

Inhalte

Das Inhaltselement »Text m/Bild«

Mit dem Inhaltselement »Text m/Bild« können Text und Bildelemente vielfältig kombiniert werden, ohne dass von den Redakteuren jemals auf HTML zurückgegriffen werden muss. Die Redakteure wählen mit Hilfe von Ankreuzfeldern einige Optionen aus, laden ein oder mehrere Bilder hoch, geben eine Breite an und ergänzen mit Text.

TYPO3 kombiniert alles zu einem ansehlichen Layout, das zudem dem vorgegebenen Designrichtlinien folgt. Sie sehen in den folgenden Abschnitten eine kleine Auswahl der Möglichkeiten, jeweils mit einer kleinen Erläuterung.

Text mit Bilder »oben links«

Hölzerne Fußgängerbrücke in Form einer Hängebrücke über die Altmühl bei Essing.
Die berühmte hölzerne Hängebrücke über die Altmühl,
Hölzerne Fußgängerbrücke in Form einer Hängebrücke über die Altmühl bei Essing.
zu finden in der Nähe des Ortes Essing

Inhaltselement Text mit Bild. Einstellungen: Bilder oben rechts, aufgeteilt in zwei Spalten; Bilder optional mit Rahmen versehen. Die Bilder werden auf gleiche Höhe formatiert (206 Pixel hoch), dabei ergeben sich die Breiten automatisch. Die Höhe kann frei angepasst werden, was auch erforderlich ist, da sich aufgrund der unterschiedlichen Proportionen der Bilder für jede Bildkombination eine andere ideale Höhe ergibt. Man kann solange ausprobieren, bis die beiden Bilder in eine Zeile passen und diese weitgehend ausfüllen. Da TYPO3 die Bilder automatisch in der Größe anpasst und ihre Auflösung anpasst, ist das keine große Aktion.

Es ist »Klick-Vergrößern« und »Lightbox« aktiviert, das heisst, die beiden Bilder können durch Klick mit der Maus vergrößert in einem Overlay-Fenster dargestellt werden. Beide Bilder sind gekoppelt, das heisst, man kann im Overlay-Fenster der Lightbox in das andere Bild wechseln.

Blick auf die Altmühl in der Nähe von Essing
Die Altmühl bei Essing
Herbstliches Laub

Neben dem Text links

Inhaltselement Text mit Bild, die Bilder neben dem Text links. Ein Spalte, Bilder wieder mit Rahmen. Diesmal wurden die Bilder auf eine gemeinsame Breite von 200 Pixeln formatiert. Die Voreinstellung: Bilder ohne Text: 530 Pixel breit, Bilder im Text 260 Pixel breit. Das bedeutet, dass die Bilder zwar kleiner formatiert werden können, aber nicht größer. Wichtig: dieser Wert muss in den Konstanten an das Layout angepasst werden. 

Lightbox

Die Lightbox ist wie im obigen Beispiel eingestellt, die Bilder können also wieder per Mausklick vergrößert werden. Diese Zwischenüberschrift wurde mit dem RTE eingefügt. 

Text mit Bild: Im Text links

Der Schneck vom Bavariapark

Diesmal ist die Ausrichtung »Im Text links«, das Bild wird also vom Text umflossen, wenn dieser lang genug ist. Die Breite ist wieder auf 200 Pixel eingestellt, wieder mit Rahmen. Im Gegensatz zu obiger Formatierung befindet sich die Hauptüberschrift nicht rechts neben den Bildern sondern über dem gesamten Inhaltselement.

Die Lightbox wurde wieder aktiviert, diesmal aber nur für ein einziges Bild. Um zu sehen, wie das Bild umflossen wird, muss dieser Text etwas länger werden, deshalb wird er mit eigentlich überflüssigem Text aufgefüllt.

Mehrspaltigkeit

Diese Techniken lassen sich ihrerseits wieder kombinieren mit dem Spaltenlayout und den Rahmen um die Inhaltselemente selbst.

Text und Bild: In Text links

Blick auf die hölzerne Hängebrücke bei Essing

Diesmal ein Bild im Text, sehr klein (80 Pixel breit) und umflossen. Ohne Rahmen und ohne Lightbox; es kann also nicht vergrößert angezeigt werden. Auf eine Bildunterschrift wird ebenfalls verzichtet – das ist also ein Beispiel für eine einfache Illustration. Natürlich können wie immer auch die üblichen Formatierungen angewendet werden: Abstand vor und nach dem Element, Rahmen und Linien sowie Einrückungen. 

Nach oben

Kleiner Test