Bilder einfügen - Basics

Zu Beginn wird (1) ein neues Inhaltselement erstellt. 

Im sich anschließend öffnenden Auswahlmenü wird eine der folgenden zwei Optionen gewählt:

1. „Text und Bilder“
   Falls zusätzlich zu den Bildern auch Text eingefügt werden soll.
2. „Nur Bilder“
   Falls ausschließlich Bilder eingefügt werden sollen.

Falls zu einem bereits bestehenden Inhaltselement Bilder hinzugefügt werden sollen, muss der Typ auf „Text und Bilder“ gestellt sein. Falls dies nicht der Fall sein sollte, kann der Typ über das (1) Auswahlmenü geändert werden.

Wenn der Typ des Inhaltselementes korrekt eingestellt ist, können über (2) den Reiter „Bilder“, Bilder eingefügt werden.

Unter dem Reiter können (1) Bilder über den Button „Bild hinzufügen“ eingefügt werden. Des Weiteren kann unter „Verhalten“ über eine Checkbox eingestellt werden (2) ob sich die Bilder vergrößern lassen sollen oder nicht. Damit ist gemeint, dass das Bild im Frontend durch einen Klick auf dieses vergrößert dargestellt werden soll.

Nachdem auf den Button „Bild hinzufügen“ geklickt wurde, öffnet sich ein neues Fenster. In diesem Fenster kann auf der linken Seite über den (1) Verzeichnisbaum der Speicherort der Bilder ausgewählt werden. In diesem Beispiel befinden wir uns im Ordner „Seitenbereiche“.

Auf der rechten Seite des Fensters werden die Inhalte des Ordners angezeigt.

Falls die gewünschten Bilder sich schon im Ordner befinden kann direkt auf den (2) Namen des Bildes geklickt werden um dieses einzufügen. Anschließend schließt sich das Fenster und das Bild erscheint im Inhaltselement.

Falls mehrere Bilder eingefügt werden sollen, können diese über die (3) Checkboxen, links neben dem Namen, ausgewählt werden. Wenn alle gewünschten Bilder markiert wurden, kann die Auswahl über den Button (4) „Auswahl importieren“ in das Inhaltselement eingefügt werden. Anschließend schließt sich das Fenster und alle ausgewählten Bilder erscheinen im Element.

Die ausgewählten Bilder erscheinen nun im Inhaltselement. Es werden ein kleines Vorschaubild und der Name der Datei angezeigt. Mit (1) Klick auf den Namen kann das Akkordeon zugeklappt werden. Unter dem Namen des Bildes befindet sich der Bereich mit den Metadaten des Bildes.

Dazu gehört (2) der Titel des Bildes. Dieser wird z.B. angezeigt wenn mit dem Mauszeiger über das Bild gefahren wird.

Der (3) Alternativ Text wird immer dann angezeigt, wenn das Bild im Frontend nicht angezeigt werden kann. Dieser Text muss immer ausgefüllt werden um die Barrierefreiheit der Webseite sicherzustellen. Dabei sollte in einem kurzen Satz das Bild möglichst präzise beschrieben werden.

Mit dem Feld (4) Link, können Links zum Bild hinzugefügt werden. Diese werden durch Klick auf das Bild ausgelöst. Über das Icon rechts neben der Textzeile können u.a. interne und externe Webseiten oder auch Dateien verlinkt werden.

Unter (5) Beschreibung kann eine Bildunterschrift hinzugefügt werden. Diese erscheint im Frontend unter dem Bild und sollte eine Beschreibung des Bildes, ggf. auch eine Quellenangabe, enthalten.

Wenn beim Hochladen des Bildes diese Informationen bereits ausgefüllt wurden, werden diese angezeigt. Wenn die Textfelder leer sind, sind die Informationen nicht vorhanden. Um diese einfügen bzw. ändern zu können, muss die Checkbox "überschreiben" aktiviert werden. Dadurch wird das Textfeld editierbar.

Unter (6) Copyright kann das Copyright für das Bild eingetragen werden. Dieses erscheint im Frontend links unten im Bild.

Mit dem (7) Mülleimer kann das Bild aus dem Inhaltselement gelöscht werden. Mit der Glühbirne kann das Bild versteckt werden.

Unter dem Akkordeon des Bildes können weitere Einstellungen vorgenommen werden. Diese gelten immer für alle Bilder innerhalb eines Inhaltselementes.

Unter dem Reiter „Erscheinungsbild“ kann das Aussehen des Inhaltselementes verändert werden. Dabei haben aber nur die Punkte „Bildeinstellungen“ und „Bildausrichtung“ direkten Einfluss auf das Bild.

Unter (1) Bildeinstellung kann die maximale Höhe bzw. Breite angegeben werden. Die Angabe wird dabei immer in Pixel gemacht. Das Bild wird dabei von TYPO3 automatisch auf die entsprechende Größe skaliert. Die Angaben beziehen sich immer auf das gesamte Bild, es kann mit dieser Einstellung nicht, nur ein Teil des Bildes angezeigt werden.

Im Punkt (2) Bildausrichtung kann die Position der Bilder im Verhältnis zum Text ausgewählt werden.

• (3) „Oben links“ Das Bild erscheint über dem Text und ist linksbündig ausgerichtet
• (4)„Unten links“ Das Bild erscheint nach dem Text und ist linksbündig ausgerichtet
• (5) „Neben dem Text links“ Das Bild erscheint links neben dem Text. Der Text richtet sich dabei am rechten Rand des Bildes aus