Bilder mit/ohne Text
In dieser Seite
Neben der Bedienungsanleitung für die Bilderfunktion finden Sie hier viele Beispiele, wie Bilder und Text miteinander arrangiert werden können.
Quicklinks
Bild "im Text rechts"
Das Bild ist "im Text rechts" ausgerichtet. Die Überschrift steht dabei über dem kombinierten Text-Bild-Element.
Normalerweise wird das Bild dann links vom Text umflossen. Hier gilt jedoch eine Besonderheit: Befindet sich neben dem Bild nicht mehr genug Platz (z.B. in der Seitenspalte oder auf Smartphone-Bildschirmen), wird das Bild automatisch über dem Text angezeigt! Die Nebeneinander-Darstellung erfolgt also nur bei ausreichend verfügbarer Breite.
Bilder mit/ohne Text
Wenn Bilder eingefügt werden sollen, kann dies entweder alleinstehend oder zusammen mit umfließendem Text geschehen. Es können auch gleichzeitig mehrere Bilder eingebettet werden und dabei wie in einem unsichtbaren Raster nebeneinander und/oder übereinander angeordnet sein.
In jedem Fall müssen die zu verwendenden Bilder als Grafikdateien vorliegen, um anschließend in der Webseite platziert werden zu können. Als Vorbereitung sollte man diese Dateien (z.B. JPG-Bilder) bereits ins TYPO3-Dateiverzeichnis hochgeladen haben, siehe Bilder und Downloads verwalten.
Grafiken in eine Webseite einsetzen
Um Bilder "richtig" in TYPO3 einzusetzen, verwendet man in einem Inhaltselement vom Typ "Text & Medien" (Abb.1) den Reiter [Medien].
Unter [Medien] wählt man aus der TYPO3-Dateiliste die gewünschten Bilddateien aus (Abb. 2 → Marke 1) und kann danach durch Anklicken des grauen Balkens eines Bildes (Abb. 2 → Marke 2) weitere Merkmale zu diesem Bild bearbeiten:
Merkmale, die pro Bild eingestellt werden
Nachdem der Balken für das Bild aufgeklappt wurde:
- Titel: Wird angezeigt, wenn man die Maus über das Bild hält, ohne zu klicken
- Link: Beim Anklicken des Bildes wird ggf. das hier eingestellte Linkziel aufgerufen
- Alternativer Text: Kurzbeschreibung des Bildinhalts (wichtig z.B. für Blinde!)
- Beschreibung (Bildunterschrift): Dieser Text wird, falls vorhanden, unter dem Bild dargestellt.
- Editor: Hinter diesem Button (Abb. 2 → Marke 3) verbirgt sich die Möglichkeit, das jeweilige Bild zuzuschneiden, also einen Bildausschnitt auszuwählen. Hierbei kann ein Ausschnitt frei gewählt oder auch eine vorgegebene Proportion (Höhen-Breiten-Verhältnis) verwendet werden.
Alle diese Werte können bereits als "Standard" beim Hochladen des Bildes in der Dateiliste vergeben werden und finden dann hier automatisch Verwendung. Werden hier jedoch eigene Werte gesetzt, überschreiben sie die beim Hochladen gesetzten Standardwerte.
Medienanpassungen – gemeinsame Einstellungen für alle Bilder
Unterhalb der Bilderauswahl werden nun die "Medienanpassungen" gesetzt, die gleichermaßen für alle oben ausgewählten Bilder gelten:
- die Pixel-Größe innerhalb der Seite (Abb. 3 → Marke 1; bitte unbedingt nur eines der Felder "Breite jedes Elements" und "Höhe jedes Elements" ausfüllen - das jeweils andere ergibt sich durch proportionale Größenänderung von allein!) sowie eventuelle Umrahmung der Bilder (Abb. 3 → Marke 2)
- die "Position und Ausrichtung" in Bezug auf den umfließenden Text (Abb. 3 → Marke 3)
- die Spaltenaufteilung, d.h. bei mehreren vorhandenen Bildern: in wieviel Spalten nebeneinander die Bilder angezeigt werden sollen (Abb. 3 → Marke 4)
- Vergrößerung: Soll beim Anklicken der Bilder eine vergrößerte Version als "Lightbox" angezeigt werden? (Abb. 3 → Marke 5)
- Download: Soll in der Bildunterschrift ein Download-Link für die Bilddatei in unverminderter Größe angeboten werden? (Abb. 3 → Marke 6)
Bildunterschriften im Bild platzieren
Bildunterschriften im Bild – mit großer Schrift
Die Bildunterschrift wird normalerweise in verkleinerter Schriftart unterhalb von Bildern dargestellt. Stattdessen kann sie aber auch als markante Beschriftung im Bild platziert werden.
Wählen Sie dazu in den Elementeigenschaften des Text&Medien-Elements im Reiter "Erscheinungsbild" das Layout "Bildunterschrift im Bild / fett" aus. Sie erhalten dann diese Optik:
Variante: Bildunterschrift im Bild mit kleiner Schrift
Wählen Sie in den Elementeigenschaften des Text&Medien-Elements im Reiter "Erscheinungsbild" das Layout "Bildunterschrift im Bild / klein" aus.
Sie erhalten dann die hier gezeigte Optik der Bildunterschrift.
Copyright-Infos anzeigen
Ist die Nennung des Urheberrechts erforderlich oder nicht?
Copyright sichtbar machen
- Copyright-Informationen zuweisen:
In der Dateiliste das neben einer Grafikdatei angezeigte Stift-Symbol anklicken und dann im Reiter [Metadaten] das eigene Feld „Urheberrecht” entsprechend füllen. - Copyright in der Webseite anzeigen:
Im Reiter [Medien] des Text&Medien-Elements ganz unten rechts den Schalter „Copyright-Informationen anzeigen” aktivieren.
Und so sieht es dann aus (das Copyright wird leicht ausgegraut dargestellt und ist dadurch von der normalen Bildunterschrift unterscheidbar):
Bildergalerie
Grafiken geweitet platzieren
Sollen mehrere Bilder (z.B. Logos) nebeneinander erscheinen und dabei möglichst locker und harmonisch über die verfügbare Breite verteilt werden, kann dem betreffenden Inhaltselement im Reiter [Erweitert] die CSS-Klasse galerie-geweitet zugewiesen werden. Die Bilder werden dann sowohl horizontal geweitet platziert als auch vertikal zentriert.
Wichtig dabei: Die Gesamtbreite der Bilder darf in der Summe die verfügbare Breite auf der Seite nicht von vornherein komplett ausfüllen, muss also niedriger bleiben, damit für die Weitung der Darstellung überhaupt noch Raum vorhanden ist. Ggf. können Sie im Reiter [Medien] den Zahlenwert im Feld "Breite jedes Elements" verringern, um die Grafiken zu verkleinern und damit zusätzliche "Luft" zu schaffen.
Hier ein Beispiel mit drei Grafiken, deren "Breite jedes Elements" auf 180px eingestellt wurde, die "Anzahl der Spalten" auf 3 und die "Position" auf Unten mittig:
Eine besondere Art der Bild-Text-Präsentation: Flip-Cards
Flip-Cards sind wie Postkarten - sie haben ein Bildmotiv auf der Vorderseite und Text auf der Rückseite.
Für die Präsentation besonderer Objekte kann dieses Werkzeug sinnvoll sein. Es ist jedoch unbedingt zu beachten, dass der zugehörige Text gewissermaßen hinter dem Bild versteckt wird. Daher bieten sich Flip-Cards nur für besondere Formen der Präsentation an und sollten keinesfalls für "alles und jedes" verwendet werden!
Wie eine Flip-Card erzeugt wird
Eine Flip-Card ist ein Text&Medien-Element (bestehend aus einem Bild und dem dazugehörigen Text), bei dem im Reiter [Erweitert] die CSS-Klasse flip-card eingetragen wurde. Der Text wird dann automatisch zentriert auf der "Rückseite" des Bildes dargestellt.
Wichtig: Achten Sie unbedingt darauf, dass der Text nicht zu lang wird und also vollständig auf die "Rückseite" des Bildes passt!
Beispiele
Beispiel: Flip-Card (2er)
Das Ossietzky-Mahnmal
Das Mahnmal befindet sich vor dem Hörsaalzentrum und erinnert an den Namensgeber der Universität, den Friedensnobelpreisträger Carl von Ossietzky.
Das Ossietzky-Mahnmal
"Wissenschaft und Technik waren nicht in erster Linie dazu da zu helfen. Sie schufen Werkzeuge der Vernichtung. Werkzeuge gräßlichsten Mordes. Wir müssen die Wissenschaft wieder menschlich machen."
Carl von Ossietzky 1889-1938
Friedensnobelpreisträger und Häftling im KZ Esterwegen
Bild "im Text links"
Das Bild ist "im Text links" ausgerichtet. Bild und Textkörper sind obenbündig ausgerichtet. Langer Text fließt ggf. um das Bild herum.
Bitte beachten: Befindet sich neben dem Bild nicht mehr genug Platz (z.B. in der Seitenspalte oder auf Smartphone-Bildschirmen), wird das Bild jedoch automatisch über dem Text angezeigt!
Bild "im Text links" und vertikal "zentriert"
Das Bild ist "im Text links" ausgerichtet. Außerdem wurde zur vertikalen Zentrierung die CSS-Klasse zentriert zugewiesen, wodurch der Text im Verhältnis zu Bild vertikal zentriert platziert wird.
Bild "neben dem Text links", "zentriert"
Das Bild ist "neben dem Text links" (inkl. Überschrift!) ausgerichtet, das Element hat außerdem die CSS-Klasse zentriert.