Navigation

Kontakt

Volker Burggräf
Internetkoordinator

In dieser Seite

Neben der Bedienungsanleitung für die Bilderfunktion finden Sie hier viele Beispiele, wie Bilder und Text miteinander arrangiert werden können.

Bild "im Text rechts"

Das Bild ist "im Text rechts" ausgerichtet.

Entsprechend wird es links vom Text umflossen.

Die Überschrift steht dabei über dem kombinierten Text-Bild-Element.

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".

Text und Bilder

Wenn Bilder eingefügt werden sollen, kann dies entweder alleinstehend oder zusammen mit umfließendem Text geschehen. 

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 die Bilder 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:

  • 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.

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.

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 grundsätzlich nur Breite oder Höhe angeben!) 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)

Beispiele

Bildergalerie

Bildunterschriften im Bild platzieren

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:

Für Copyright-Infos: Bildunterschriften im Bild platzieren (klein)

Mit dieser Methode können Bildern Copyright-Hinweise hinzugefügt werden.

Wählen Sie dazu in den Elementeigenschaften des Text&Medien-Elements im Reiter "Erscheinungsbild" das Layout "Bildunterschrift im Bild / klein" aus. Sie erhalten dann diese Optik:

Bild "im Text rechts"

Das Bild ist "im Text rechts" ausgerichtet.

Entsprechend wird es links vom Text umflossen.

Die Überschrift steht dabei über dem kombinierten Text-Bild-Element.

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.

Befindet sich daneben nicht mehr genug Platz, 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.

Befindet sich daneben nicht mehr genug Platz, wird das Bild jedoch automatisch über dem Text angezeigt.

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".

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!

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

Webmaste2inlerlct (intikierxeoeznetpo@u5ji//ol.1zlkde) (Stand: 21.04.2020)