TYPO3 (Teil 14): Bilder einfügen

Ein ganz entscheidender Aspekt ist für Webseiten unerlässlich: Bilder. Und selbstverständlich lassen sich Bilder in TYPO3 integrieren. Wie sich das umsetzen lässt, wird in diesem Tutorial gezeigt. Dabei geht TYPO3 übrigens weiter als viele andere Content-Management-Systeme. Tatsächlich lassen sich Bilder in TYPO3 nämlich nicht nur einfügen, sondern auch automatisch bearbeiten.

Wir empfehlen:
TYPO3 CMS-Training

Normalerweise fügt man Bilder in TYPO3 über eines der beiden Inhaltselemente Text und Bilder oder Nur Bilder ein.

Diese Inhaltselemente sind exakt für diesen Zweck da und bieten daher auch ausreichende Funktionen für die Gestaltung der Bilder. Dennoch kann es natürlich vorkommen, dass man Bilder auch direkt über den RTE einfügen will. Das wird beispielsweise nötig, wenn Bilder im Fließtext angezeigt werden sollen.

 

Überprüft zunächst, ob im Editor das Symbol Bild einfügen verfügbar ist.

 

Sollte es das nicht sein, blendet es zunächst ein. Ruft dazu Adminwerkzeuge>Erweiterungsmanager auf und klickt bei htmlArea RTE auf Configure. Überprüft, ob die Option Enable images in the RTE aktiviert ist. Sollte sie das nicht sein, holt das entsprechend nach.

Mit Submit werden die Einstellungen übernommen. Anschließend ist im Editor das Icon Bild einfügen zu sehen. Um ein Bild der Seite hinzuzufügen, platziert man den Cursor an der gewünschten Stelle und klickt das Symbol an. Daraufhin öffnet sich ein Dialogfenster, das in die drei Register Neues Zauberbild, Neues normales Bild und Drag and Drop unterteilt ist.

 

Gleichgültig, welches dieser Register aufgerufen wird, in jedem ist der Verzeichnisbaum aufgeführt. Um ein Bild einzufügen, gibt es zwei Möglichkeiten:

• Das Bild liegt bereits auf dem Server. In diesem Fall kann man es direkt auswählen.
• Das Bild muss zunächst auf den Server geladen werden, bevor man es in die Seite einfügen kann.

Liegt das Bild noch nicht auf dem Server, ist zunächst der untere Bereich der jeweiligen Registerkarte interessant.

Zuvor solltet ihr allerdings im oberen Fensterbereich das Verzeichnis auswählen, in welches das Bild geladen werden soll. Zu sehen ist im oberen Fensterbereich der Verzeichnisbaum. Klickt man darin auf den Namen eines Verzeichnisses, wird dessen Inhalt im rechten Fensterbereich angezeigt. Um ein Bild direkt einzufügen, braucht man es nur anzuklicken.

 

Allerdings ist es natürlich so, dass eben nicht immer die benötigten Bilder auf dem Server liegen. Und genau an diesem Punkt kommt der untere Seitenbereich ins Spiel. Hierüber lassen sich die Bilder hochladen. Klickt dazu auf eine der Schaltflächen Dateien auswählen und wählt das gewünschte Bild aus. Maximal drei Bilder lassen sich so parallel auf den Server laden. Nachdem das Bild ausgewählt wurde, klickt man auf Hochladen.

Anschließend kann man dessen Eigenschaften anpassen. Markiert dazu das Bild und klickt im Editor auf das Icon Bild verändern. (Alternativ dazu klickt man das Bild mit der rechten Maustaste an und wählt Bild verändern).

Daraufhin wird ein Dialogfenster geöffnet, über das man die Bildeigenschaften verändern kann. So lassen sich hier beispielsweise die Bildgröße und die Randabstände definieren. Im Zusammenhang mit den Größenfeldern ein allgemeiner Hinweis: Auf vielen Webseiten werden diese Felder für die Skalierung der Bilder verwendet.

Ein Redakteur lädt also beispielsweise ein Bild auf den Server, das 500*300 Pixel groß ist. Da er es aber nur in einer Größe von 250*150 Pixel braucht, trägt er eben jene Größenangaben ein. Der Browser wird im Frontend das Bild in der Originalgröße laden und es dann auf die kleinere Version herunterberechnen. So etwas ist aus Performancesicht natürlich fatal.

 

Am besten lädt man die Bilder immer in der Größe auf den Server, in der man sie tatsächlich braucht.

Neben diesen selbst erklärenden Optionen gibt es auch solche, die noch einmal eine genauere Betrachtung verdienen.

Da sind zunächst die beiden Felder Titel und Alternativtext. Das, was man in das Feld Titel einträgt, wird dem title-Attribut des img-Elements zugewiesen. Zu sehen ist der Inhalt des Titelfeldes, wenn man im Frontend der Seite mit dem Mauszeiger auf das Bild zeigt.

Interessant ist auch das Feld Umfließen. Denn darüber legt man im Endeffekt fest, wie sich nachfolgende Inhalte hinsichtlich des Bildes verhalten sollen. Sollen die nachfolgenden Elemente unter dem Bild angezeigt werden, wählt man Nicht umfließen.

Stellt man hingegen Links ein, wird das Bild links positioniert. Nachfolgender Text läuft in diesem Fall rechts um das Bild.

 

Soll das Bild rechts ausgerichtet werden, stellt man Rechts ein. In diesem Fall fließt der nachfolgende Text dann links um das Bild.

Während man einen Titel angeben kann, sollte man einen Alternativtext unbedingt eintragen. Denn dieser wird intern dem alt-Attribut des img-Elements hinzugefügt. Zu sehen ist der Alternativtext immer dann, wenn das Bild – aus welchem Grund auch immer – nicht angezeigt werden kann.

Eine besondere Funktionalität verbirgt sich hinter der Option Klick vergrößern. Aktiviert man diese, wird eine größere Version des Bildes angezeigt, wenn es im Frontend angeklickt wird.

Mit Aktualisieren werden die Einstellungen übernommen.

 

Die verschiedenen Varianten, Bilder einzufügen

Wie bereits erwähnt, ist das Dialogfenster, über das sich Bilder einfügen lassen, in die drei Register Neues Zauberbild, Neues normales Bild und Drag and Drop unterteilt. Etwas seltsam mag die Bezeichnung Neues Zauberbild anmuten. Dieser Modus ist aber durchaus praktisch. Denn das ausgewählte Bild wird automatisch in ein webtaugliches Format umgewandelt. Außerdem wird die Größe der Bilder angepasst.

Dieser Modus empfiehlt sich also für all diejenigen, die ihre Bilder vorher nicht selbst optimieren wollen. (Wobei diese automatische Optimierung natürlich immer nur ein Kompromiss sein kann. TYPO3 ist nun mal Software, die den Optimierungsprozess automatisiert, ohne zu überprüfen, ob alles ideal ist).

Ist keine Bearbeitung seitens TYPO3 erwünscht/erforderlich, muss der Zauberbild-Modus nicht gewählt werden. In diesen Fällen wechselt man vielmehr ins Register Neues normales Bild.

 

In diesem Modus lassen sich ausschließlich Bilder in einem der Formate JPG, GIF und PNG bis zu einer Auflösung von 640×680 Pixeln verwenden. Bilder, die diesen Kriterien entsprechen, können hierüber direkt auf den Server geladen werden. TYPO3 nimmt an den Bildern keinerlei Änderungen vor. Interessant ist dieser Modus natürlich in erster Linie für Bilder, die zuvor bearbeitet wurden.

Als letzter Modus steht Drag and Drop zur Verfügung, der über die gleichnamige Registerkarte aufgerufen werden kann. In diesem Modus wählt man das Bild wie gewohnt aus, zieht es aber anschließend ganz einfach in das Editorfenster.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

TYPO3 CMS-Training

TYPO3 CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • 8 Stunden Video-Trainings zum beliebten TYPO3 CMS 6
  • 36 Praxis-Lektionen in Text/Bild als PDF (über 400 Seiten)
  • Themeerstellung mit TypoScript
  • Blog, Forum, Multidomainfähigkeit, Mehrsprachigkeit, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training