typo3-handbuch.net
typo3-handbuch.net

Rich Text Editor (RTE): Bild einfügen

Bilder lassen sich über Inhaltselemente vom Typ Bild oder Text und Bilder in eine Seite einfügen – vgl. Typen von Inhaltselementen.

Oft ist die dort bereitgestellte Möglichkeit für das Einfügen von Bildern die bessere Wahl, da dabei zusätzliche Optionen bereitstehen, wie beispielsweise die Bildqualität zu verändern oder das Bild auszurichten. Auf die Einstellungsmöglichkeiten wird unter Bilder: Reiter Bilder und Bilder: Reiter Erscheinungsbild näher eingegangen.

Dennoch kann es von Vorteil sein, Bilder über den RTE zu integrieren. Soll beispielsweise bei einer News – siehe Newsbeiträge mit tt_news – ein Bild innerhalb des Textes integriert werden, ist die Möglichkeit der Bildintegration mittels des RTE unabdingbar.

Um ein Bild zu integrieren wird zunächst an die gewünschte Stelle im RTE-Textfeld geklickt, an der das Bild erscheinen soll. Anschließend ist das Bild-Icon  anzuklicken und es wird folgendes Dialogfenster geöffnet:

Abb.: TYPO3: Rich Text Editor (RTE) – Dialogfenster Bild einfügen
Abb.: TYPO3: Rich Text Editor (RTE) – Dialogfenster Bild einfügen

Im Verzeichnisbaum auf der linken Seiten der vorstehenden Abbildung ist zum Ordner zu navigieren, der das gewünschte Bild enthält. Die im Ordner vorhandenen Bilder werden dann im rechten Bereich angezeigt. Ist die Option Vorschaubilder anzeigen aktiviert, lässt sich das auszuwählende Bild schneller lokalisieren.

Durch Anklicken des Bildnamens wird das gewünschte Bild in den RTE eingefügt. Neben dem Reiter Neues Zauberbild stehen auch die Optionen Neues normales Bild sowie Drag and Drop zur Verfügung. Welche Möglichkeiten die einzelnen Optionen bieten, wird im unteren Bereich des jeweiligen Fensters beschrieben:

Ein Neues Zauberbild wird vom RTE vor der Implementierung noch für das Web optimiert, während beim Einsatz von Neues normales Bild das Vorlagenbild bereits zuvor weboptimiert worden sein sollte, indem es mit einer Bildbearbeitungssoftware wie Photoshop oder GIMP für den Einsatz im Web vorbereitet worden ist. Mit Drag and Drop schließlich lässt sich das Bild anklicken und in den Editor im Hauptfenster ziehen.

Nachdem das Bild in den Editor geladen wurde, stellt man eventuell fest, dass sich das Ergebnis nicht wie gewünscht präsentiert: Das Bild ist vielleicht zu groß oder zu klein, es wird ein größerer Randabstand zum Text gewünscht oder ähnliches.

Um Bildformatierungen vornehmen zu können, ist mit der rechten Maustaste auf das Bild zu klicken und Bild verändern zu wählen:

Abb.: TYPO3: Rich Text Editor (RTE) – Bild verändern, Schritt 1
Abb.: TYPO3: Rich Text Editor (RTE) – Bild verändern, Schritt 1

Im neu erscheinenden Dialogfenster lässt sich ein Bildstil festlegen, die Breite und Höhe des Bildes verändern oder das Bild mit einem Rand versehen. Es lassen sich die Abstände rund um das Bild in Pixel festlegen und nicht zuletzt ein Titel-Text, Alternativtext und die Klick-Vergrößerung definieren:

Abb.: TYPO3: Rich Text Editor (RTE) – Bild verändern, Schritt 2
Abb.: TYPO3: Rich Text Editor (RTE) – Bild verändern, Schritt 2

Tipp: Die Bildgröße kann auch angepasst werden, indem das Bild im Editor angeklickt und mit der Maus an den Skalierungspunkten im Bildrahmen gezogen wird.


BLÄTTERN INNERHALB DER AKTUELLEN RUBRIK

  • VORHERIGE SEITE
  • NÄCHSTE SEITE
 
Feedback zur TYPO3 Webagentur und Webdesign, Köln