Bilder einbinden

Bild-Elemente

Bild 1: Inhaltselemente mit Bildern

Um ein oder mehrere Bilder in ein Inhaltselement einzufügen, wählen Sie als Inhaltstypen (Type) „Text & Images“ oder „Images“ aus (Bild 1).

Sie können übrigens jederzeit den Inhaltstyp ändern. Bilder und Texte bleiben in der Datenbank und sind nach dem zurückschalten wieder sichtbar.

Bilder hinzufügen

Bild 2: Add Image
Bild 3: Bild auswählen

Klicken Sie im Reiter Images auf Add image (Bild 2). Es öffnet sich ein Pop-Up (Bild 3). Dort haben Sie zwei Möglichkeiten ein oder mehrere Bilder hochzuladen:

  1. Aus Filelist: Im oberen Bereich sehen Sie ihre Ordner/Dateien die unter Fileilst abgelegt sind. Wählen Sie hier die gewünschten Bilder aus.
  2. Direkt vom eigenen Rechner: Im unteren Bereich des Pop-Ups klicken Sie auf "Durchsuchen..." und wählen im Dateiverzeichnis Ihres Rechners die gewünschte Datei aus. Sie wird in das angezeigte Verzeichnis der Filelist hochgeladen.

Wichtig: Erst nachdem Sie das Content Element gespeichert haben, sind die Bilder im Inhalt eingebunden und im Frontend sichtbar.

Reihenfolge der Bilder ändern

Bild 4: Bilder verschieben

Um die Reihenfolge der Bilder zu verändern, müssen Sie die Vorschaukästen mit Drag & Drop verschieben. Klicken und halten Sie den „Festhalter“ (Bild 4) und ziehen das Bild an die gewünschte Position.

Beschriftung und Beschreibung

Bild 4: Bildmetadaten

Die graue Zeile mit dem Vorschaubild und Titel lässt sich durch anklicken auf- und zuklappen. Aufgeklappt sehen Sie die Felder für Bildtexte und Verlinkung (Bild 4).

Sind in Ihren Bildern Metadaten hinterlegt, erscheinen diese in den Feldern Title, Alternative Text und Description (Caption). Sie haben die Möglichkeit diese zu überschreiben, indem Sie die entsprechende Checkbox Override aktivieren und den gewünschten Text in die Textbox schreiben.

Die drei Felder Title, Alternative Text und Description dienen unterschiedlichen Zwecken. Auf keinen Fall dürfen sie mit dem gleichen Text gefüllt werden.

Titel

Der Text, der in das Feld Title (Bild 4, Nr. 1) eingetragen wird, wird dem Bild als zusätzliche Information beigefügt. Die meisten Browser zeigen ihn als Tooltip beim Überfahren des Bildes mit der Maus. Aus Gründen der Barrierfreiheit wird mittlerweile empfohlen dieses Feld nicht mehr zu verwenden.

Text-Alternative

Das Feld Alternative Text (Bild 4, Nr. 2) soll – wie der Name vermuten lässt – Text enthalten, der als Alternative zum Bild benutzt werden kann. Dieser Text wird von Unterstützungs­technologien für Sehbehinderte herangezogen, aber auch für die automatisierte Kategorisierung des Bildes z.B. durch Suchmaschinen. Das Schreiben guter Alternativtexte kann sehr schwierig sein. Die folgenden Webseiten befassen sich ausführlich mit dem Thema.

Bild als Link

Sie haben auch die Möglichkeit Ihrem Bild einen Link zu hinterlegen. Dazu fügen Sie die entsprechende URL in das entsprechende Feld Link ein (Bild 4, Nr. 3). Informationen zu den Pfeilen sind weiter unten.

Beachten Sie, dass Sie nicht gleichzeitig "Enlarge on Click" und einen Link auf ein Bild setzen können.

Beschriftung

Im Feld Description (Caption) (Bild 4, Nr. 4) wird die Bildunterschrift eingetragen. Beschriftungen enthalten normalerweise zusätzliche Informationen. Auch die Angaben zum Urheber gehören hierher.

Info:
Pfeile bei verlinkten Bildern
W3C
Mit Pfeil
W3C
Ohne Pfeil

Damit die Seitenbesucher ohne Ausprobieren oder Umherfahren mit der Maus (Smartphone?) erkennen, dass ein Bild verlinkt ist, wird es mit einem kleinen Pfeil überlagert. In Fällen, wo eine Verlinkung impliziert ist, z. B. bei Logos oder Icons, sind diese Pfeile überflüssig oder gar störend. Sie können die Überlagerung ausschalten, wenn Sie im Link-Dialog im Feld CSS-Class den Wert „no-hint“ (ohne die Anführungszeichen) eintragen.

Weitere Möglichkeiten der Präsentation

Vergrößern

Die Funktion, Bilder beim Klicken vergrößert anzuzeigen, aktivieren Sie mit der Option Enlarge on Click (Bild 4, Nr. 5). Weitere Informationen dazu finden Sie in der Beschreibung zur Bildergalerie-Funktion.

Slideshow

Um mehrere Bilder in einer Diaschau anzuzeigen, folgen Sie der Anleitung zur Einrichtung einer Slideshow.

Größe und Anordnung

Änderung der Bildgrößen

Bild 5: weitere Bildeigenschaften

Sie haben die Möglichkeit, die Größe Ihrer Bilder zu ändern. Dies ist im Reiter Appearance unter Image Adjustments möglich (Bild 5, Nr. 1). Hierbei müssen Sie entweder Breite oder Höhe eingeben. Der andere Wert wird automatisch proportional zu der ursprünglichen Bildgröße berechnet.

Textfluss um das Bild

Den Textfluss um das Bild können Sie im Reiter Appearance unter Image Alignment bestimmen (Bild 5, Nr. 2). Wählen Sie entweder aus der Dropdown-Liste oder den kleinen Vorschaubildchen.

Mehrere Bilder nebeneinander

Wollen Sie mehrere Bilder nebeneinander positionieren, wählen Sie im Reiter Appearance unter Number of Columns die entsprechende Zahl aus (Bild 5, Nr. 3).

Info:

Empfohlene und maximale Bildgrößen

Die maximale Breite von Bildern in der Hauptspalte ist 950 Pixel beim zwei-spaltigen Seitenlayout (ohne rechte Spalte), und 720 Pixel bei drei-spaltigen Seitenlayout. Die maximale Breite für Bilder in der Enlarge-on-click-Funktion ist 1200 Pixel

Für Anordnungen von Bildern neben dem Text oder in mehreren Spalten nebeneinander werden diese Maße entsprechend verringert. Das gilt natürlich auch dann, wenn Sie bei Appearance die Breite oder Höhe direkt bestimmen.

Ist das Bild in der hochgeladenen Datei größer als es in der Ausgabe verwendet wird, wird von TYPO3 eine skalierte Kopie des Bildes angelegt und verwendet. Die Bildqualität wird durch dieses Skalieren möglicherweise schlechter. Je größer der Skalierungs-Schritt, umso deutlicher verschlechtert sich das Bild. Sie sollten also Bilder vor dem Hochladen an Ihrem Computer mit einem geeigneten Bildbearbeitungsprogramm so skalieren, dass TYPO3 Ihre Datei direkt verwenden kann. Das gilt insbesondere für Fotos, die Sie von einer Digitalkamera übernehmen, und dann, wenn das Original-Format erhalten bleiben soll. (GIF oder PNG werden sonst als JPEG ausgegeben.)