Bildergalerie

Die hier beschriebene Bildergalerie wird mit einem Inhaltselement vom Typ Images erzeugt, bei dem die Vergrößerungsfunktion aktiviert ist. In der vergrößerten Ansicht (lightbox) kann man dann manuell vor- und zurückblättern oder eine Slideshow starten, so dass alle Bilder nacheinander angezeigt werden (siehe Beispiel unten).

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. Dieses Feld können Sie getrost leer lassen.

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.

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:
Hinweise
  • Tragen Sie keine Links bei den Bildern ein (Bild 4, Nr. 3). Das verträgt sich nicht mit aktiviertem Enlarge on Click.
  • Die Bildunterschriften in der vergrößerten Ansicht stammen aus dem Title-Feld (Bild 4, Nr. 1).

„Enlarge on Click“: Vergrößerungsfunktion aktivieren

Um schliesslich die Bildergalerie zu aktivieren, müssen Sie einen Haken vor die Option Enlarge on Click setzen (Bild 4, Nr. 5).

Beispiel

alt
Caption

hoch