DE

Text mit Bildern

Text und Bild kombinieren

Um Ihrer Seite Text und Bilder hinzuzufügen, die inhaltlich zusammengehören und/oder nebeneinander stehen sollen, erstellen Sie an der gewünschten Stelle durch Klick auf den Button "+ Inhalt" ein neues Inhaltselement.

Wählen Sie den Typ "Text & Bilder" aus. Wählen Sie dieses Element nur aus, wenn Sie tatsächlich auch ein Bild hinzufügen möchten. Ansonsten wählen Sie bitte das Inhaltselement "Text".

Textbearbeitung

Hier werden nur die wichtigsten Eingabefelder erklärt:

  1. Wählen Sie den Reiter "Allgemein" aus.
  2. Fügen Sie eine Überschrift ein. Mit der Schaltfläche Typ können Sie den Überschriftentyp ändern oder die Überschrift verbergen.
  3. Verwenden Sie den Texteditor. Hier können Sie Ihren Text auch formatieren.

 

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.

Platzierung des Bildes und Hintergrundillustration

  1. Sie können das Bild über, unter oder neben Ihrem Text platzieren. Wählen Sie dazu im Reiter "Bilder" die Einstellungen unter Position und Ausrichtung.
    • Neben dem Text = Text und Bild im Verhältnis 50:50
    • Im Text = Text und Bild im Verhältnis 2/3 zu 1/3. Bei längeren Texten umfließt der Text das Bild.
  2. 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.
  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.
  4. Zwei Bilder nebeneinander können Sie darstellen, indem Sie den Wert der Anzahl der Spalten auf 2 setzen. Eine dreispaltige Ausgabe ist nicht möglich. Diese Einstellung funktioniert nur in Kombination mit der Position Neben dem Text. Eine Hintergrundillustration wird dann nicht ausgegeben. Sie können beliebig viele Bilder hinzufügen, die dann in zweispaltiger Ansicht dargestellt werden - siehe Beispiel unten.
  5. Sollen sich die Websitebesucher*innen per Klick das Bild in Originalgröße ansehen können, aktivieren Sie diesen Regler.

Tipps

Besondere Bilddarstellungen wie, z.B. ein Imageslider oder ein Imagegrid zur Darstellung mehrerer Bilder in einem ansprechenden Layout stehen nicht für "Text und Bild" zur Verfügung, sondern nur im Element "Bilder".

Troubleshooting: Bilder im Rich Text Editor

Es kann vorkommen, dass Sie ein Bild im Frontend Ihrer Webseite sehen, dieses aber nicht im entsprechenden Inhaltselement in TYPO3 finden. Oder dass ein Bild plötzlich verschwindet, nachdem Sie ein Element im Backend bearbeitet haben. Dies liegt daran, dass Bilder bis TYPO3 Version 7 (an der TUHH bis Ende 2021 im Einsatz) direkt im Rich Text Editor eingebunden werden konnten. Seit dem Update auf TYPO3 Version 10 ist dies technisch nicht mehr möglich. Bilder, die früher direkt im Rich Text Editor eingefügt wurden, sind im Frontend noch sichtbar, im Backend aber nicht mehr und sobald Sie das Inhaltselement mit dem Bild einmal bearbeiten, verschwindet das Bild. Bitte arbeiten Sie betroffene Inhaltselemente entsprechend um und fügen Sie das Bild (welches ja noch in Ihrem Fileupload liegen müsste) erneut im Tab Images/Bilder hinzu wie weiter oben auf dieser Seite beschrieben.

Beispiel: Text im Bild rechtsbündig, Illustration hinter dem Bild

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Beispiel: Bild nebem dem Text links, Illustration neben dem Bild

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Beispiel: mehrere Bilder nebeneinander neben dem Text rechts

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.