DE

Nur Bilder

Inhaltselement Bilder hinzufügen

Erstellen Sie an der gewünschten Stelle ein neues Inhaltselement. Wählen Sie den Typ Nur Bilder aus.

  1. Sie können dem Element im Reiter Allgemein eine Überschrift geben, die im Frontend angezeigt wird.
  2. Sie können die Überschrift auch verbergen.

Bild hinzufügen

  1. Wechseln Sie zum Reiter "Bilder".
  2. Klicken Sie dort auf "Bild hinzufügen".

 

Falls Ihr Bild schon in TYPO3 vorhanden ist, weil Sie es vorher in der Dateiliste hochgeladen haben:

  1. Auf der folgenden Seite erscheint links der Dateibaum.
    Wählen Sie dort den Ordner aus, in dem das Bild liegt und wählen Sie es aus.
    Die weiteren Schritte sehen Sie weiter unten in dieser Anleitung.

Falls Ihr Bild noch nicht in TYPO3 vorhanden ist:

  1. Wählen Sie im Dateibaum links den Ordner aus, in den Ihr Bild gespeichert werden soll.
  2. Klicken Sie in diesem Bereich auf den Button "Dateien auswählen".
    In einem Fenster wird Ihnen nun Ihr Dateiexplorer (oder Finder) angezeigt. Rufen Sie dort den Pfad auf, in dem Ihr Bild liegt und wählen Sie es aus. Das Bild wird dann direkt in den Ordner geladen. Sie können auch mehrere Bilder gleichzeitig auswählen. Sie werden dann alle gleichzeitig hochgeladen.

 

  1. Neben dem Button "Dateien auswählen" erscheint jetzt der Name der Datei.
    Falls Sie mehrere Dateien gleichzeitig ausgewählt haben, erscheint hier die Anzahl der Dateien.
  2. Stellen Sie nochmal sicher, dass der Ordner ausgewählt ist, in den das Bild gespeichert werden soll.
  3. Falls Sie gerade eine veränderte Version eines schon vorhandenen Bildes hochladen wollen, setzen Sie hier ein Kreuz. Ansonsten lassen Sie dieses Feld bitte frei, damit nicht versehentlich Bilder gelöscht werden.
  4. Klicken Sie nun auf "Dateien hochladen".

 

Im Verzeichnis des Dateibaums sollte das Bild jetzt erscheinen. Das Verzeichnis ist alphabetisch geordnet, ggf. müssen Sie zu dem Bild scrollen.

Klicken Sie den Namen des Bildes an.

 

Jetzt ist das Bild in Ihre Seite übernommen. Um das Bild weiter anzupassen, klicken Sie auf den kleinen Pfeil links neben dem Vorschaubild.

 

  1. Fügen Sie hier einen erklärenden Text ein.  Dieser Text beschreibt, was auf dem Bild zu sehen ist und ist z.B. hilfreich für die Seitendarstellung mit Screenreadern oder wenn das Bild nicht geladen werden kann. Siehe auch die Hinweise zur Barrierefreiheit.
  2. Fügen Sie ggf. eine Bildunterschrift hinzu.
  3. Sie können dem Bild auch einen Link hinzufügen.
  4. Wenn Sie hier einen Titel eintragen, dann wird er innerhalb des Bildes angezeigt. Der Titel wird im TUHH-Webdesign üblicherweise für das Copyright genutzt.
  5. Mit dem Editor können Sie den angezeigten Bildausschnitt anpassen.

Hintergrundillustration

Die Bilder werden im TU-Webdesign standardmäßig mit eine grafischen Illustration hinterlegt. Das System wählt diese automatisch anhand der Maße des hochgeladenen Bildes (Quer- oder Hochformat). Sie können die Illustration händisch anpassen oder ganz entfernen.

  1. Sie können das Bild mittig, rechts- oder linksbündig platzieren.
  2. Hier können Sie die Illustration ändern automatisch händisch anpassen oder ganz entfernen.
  3. Die Breite des Bildes können Sie nicht mehr unter "Medienanpassung" selbst verändern. Das Bild wird in einer Standardgröße ausgegeben, um sowohl ein einheitliches Layout als auch die optimale mobile Darstellung zu gewährleisten. Es ist auch nciht möglich einen Rahmen um das Element zu setzen.
  4. Sollen sich die Websitebesucher*innen per Klick das Bild in Originalgröße ansehen können, aktivieren Sie diesen Regler.

Zwei Bilder nebeneinander setzen

Um zwei Bilder nebeneinander darzustellen, fügen Sie im Reiter Bilder zwei Bilder hinzu und setzen dann die Anzahl der Spalten auf den Wert 2.

Die Hintergrundgrafik kann in dieser Darstellung nicht verändert oder entfernt werden.

Imageslider und Imagegrid

Für die Darstellung mehrerer Bilder bieten sich der Imageslider oder das Imagegrid an.

Der Imageslider generiert eine Bildergalerie. Hierfür wird die gewünschte Anzahl von Bildern im Reiter Bilder in das Inhaltselement geladen. Die Reihenfolge in der Liste bestimmt auch die Reihenfolge im Slider - indem Sie die drei Striche mit einem Mausklick festhalten, können Sie die Bilder verschieben. Wählen Sie dann unter Bilderdarstellung die Option Slider aus und speichern Sie. Wir empfehlen nur Querformat-Bilder für den Imageslider und diese nicht mit Hochformaten zu mischen.

Das Imagegrid zeigt bis zu sechs Bilder auf einer Hintergrundillustration angeordnet an. Hierfür wird ebenfalls die gewünschte Anzahl von Bildern im Reiter Bilder in das Inhaltselement geladen. Wählen Sie dann unter Bilderdarstellung die Option Grid aus und speichern Sie.Die Bilder werden automatisch in einem bestimmten Layout angeordnet, Sie können nur die Anzahl und Reihenfolge der Bilder ändern. Auch die Illustration kann nicht entfernt werden.

Beispiel: Illustration zentriert dahinter

Beispiel: Illustration daneben

Beispiel: Illustration umschließend

Beispiel: Zwei Bilder nebeneinander

Beispiel: Image Grid