Inhaltselement: Galerie

Dieses Inhaltselement fügt dem Artikel eine einfache Bildergalerie hinzu.

Überschrift

Geben Sie die gewünschte Überschrift in das Textfeld ein. Mit dem Ausklappfenster rechts daneben können Sie die semantische Hierarchie dieser Überschrift festlegen. Die wichtigste Überschrift der Seite wird als h1 angegeben (meist nur eine pro Seite), während die Werte h2 bis h6 hierarchisch niedrigere Überschriften abbilden und natürlich mehrfach vorkommen.

Hinweis

Bemühen Sie sich um eine hierarchisch logische Struktur der Überschriften auf einer Seite. Sie unterstützen damit z. B. blinde Besucher, da diese den Inhalt eines Textes mithilfe einer guten Überschriftenhierarchie leichter erfassen können.

Quelldatei

Hier legen Sie fest, welche Bilder in der Galerie angezeigt werden sollen.

Falls die Bilder noch nicht im Dateisystem der Webseite hinterlegt sind, können Sie auf das Symbol Dateimanager in einem Popup-Fenster öffnen rechts neben der Abschnittsüberschrift Quelldatei klicken. So können Sie die Dateiverwaltung für das Hochladen der Bilder nutzen, ohne dabei den Eingabemodus des Inhaltselements zu verlassen. Die Benutzung der Dateiverwaltung wird in Kapitel, Die Dateiverwaltung, beschrieben.

Wenn die Bilder hingegen schon im Dateisystem der Webseite verfügbar sind, müssen Sie einen Haken bei Auswahl ändern setzen. Dadurch öffnet sich die Dateiansicht.

Dateisystem für die Bildauswahl öffnen

Hinweis

Der für Sie sichtbare Inhalt des Dateisystems hängt von den Einstellungen ab, die der Administrator für Ihre Benutzergruppe eingestellt hat. Es kann daher sein, dass Sie nur ein paar Dateien sehen, oder aber viele Ordner, Unterordner und darin abgelegte Dateien.

Klicken Sie im Dateisystem auf die Symbole Bereich öffnen / Bereich schliessen vor den Ordnernamen. Dadurch klappt der Ordner auf und Sie können den darin hinterlegten Inhalt (weitere Ordner oder Dateien) sehen.

Sie können sowohl ganze Ordner als auch einzelne Bilder für die Galerie auswählen, indem Sie den Haken in das eckige Feld rechts neben der Bezeichnung setzen. Wenn Sie Ordner auswählen, werden alle Bilder, die direkt in diesem Ordner liegen, für die Galerie genutzt.

Hinweis

Sortieren Sie die gewünschten Bilder am besten in eigene Ordner und wählen Sie dann für die Galerie im Dateisystem den Ordner anstatt die einzelnen Bilder. So wird die Galerie automatisch erweitert, sobald Sie über die Dateiverwaltung ein neues Bild in den Ordner legen.

Bilder/Ordner im Dateisystem wählen

Benutzerverzeichnis verwenden

Setzen Sie hier den Haken, wenn Sie möchten, dass Frontend-Nutzer, die an der Webseite angemeldet sind, Bilder aus ihrem jeweiligen Benutzerverzeichnis sehen. Sie können auf diese Art und Weise mit nur einem Inhaltselement für jeden angemeldeten Besucher eine individuelle Galerie anzeigen.

Im Abschnitt, Neues Mitglied anlegen, erfahren Sie, wie Sie Benutzerverzeichnisse anlegen.

Hinweis

Sie können gleichzeitig Bilder bei den Quelldateien wählen und den Haken bei Benutzerverzeichnis verwenden setzen. Unangemeldete Besucher der Webseite sehen dann die Bilder der Quelldateien, während angemeldete Besucher die Bilder aus ihrem Benutzerverzeichnis sehen.

Bildbreite und Bildhöhe

Wenn Sie in diese Felder nichts eintragen, zeigt Contao das Bild in seiner Originalgröße an. Falls Sie Angaben für die Bildbreite und/oder Bildhöhe machen, zeigt Contao das Bild auf der Webseite mit den entsprechenden Maßen an. Das Originalbild bleibt dabei unverändert im Dateisystem erhalten, sodass Sie es ohne Probleme mehrfach in der Webseite mit unterschiedlichen Maßen einbinden können.

Achtung

Sie sollten Bilder über diese Funktion niemals vergrößern, sondern nur verkleinern! Wenn Sie Bilder technisch künstlich vergrößern, ergibt das abhängig vom Grad der Vergrößerung meist ein sehr unsauberes Ergebnis.

Geben Sie in das erste Feld die Bildbreite und in das zweite Feld die Bildhöhe (in Pixel) ein. Daneben können Sie im Ausklappfenster wählen, nach welchem Prinzip das Bild skaliert werden soll. Standard ist hierbei die Einstellung Exaktes Format.

Hinweis

Wenn Sie nur einen Wert angeben (Bildhöhe oder Bildbreite), ist es irrelevant, welchen Skalierungstyp Sie wählen. Contao greift dann automatisch auf die proportionale Skalierung zurück.

Vermeiden Sie Formatwechsel! Wenn das Originalbild z. B. ein horizontales Format hat, sollten Sie es möglichst nicht auf ein vertikales Format skalieren.

Exaktes Format

Die kürzere Seite des Bildes wird auf das vorgegebene Maß skaliert, während die längere Seite exakt beim angegebenen Maß abgeschnitten wird. Die Skalierung geht von der Mitte des Bildes aus.

Das Bild entspricht exakt dem Zielmaß.

Achtung

Das Ergebnis kann beim exakten Format problematisch sein, falls sich wichtige Bildbestandteile auf dem abgeschnittenen Bereich befinden.

Proportional

Wenn die Originalbreite größer als oder gleich groß wie die Originalhöhe ist, dann passt Contao die Originalbreite exakt auf die neue Zielbreite an und skaliert die Originalhöhe proportional dazu.

Falls die Originalbreite kleiner als die Originalhöhe ist, passt Contao hingegen die Originalhöhe exakt auf die neue Zielhöhe an, während die Originalbreite proportional dazu skaliert wird.

Achtung

Das Bild kann das vorgegebene Maß auf der kürzeren Seite unter- oder überschreiten.

An Rahmen anpassen

Hierbei rechnet Contao mit der Formel (Originalhöhe * Zielbreite / Originalbreite). Wenn die Zielhöhe kleiner oder gleich dem Ergebnis der Formel ist, dann passt Contao die Originalbreite exakt auf die neue Zielbreite an, während die Originalhöhe proportional dazu skaliert.

Falls die Zielhöhe hingegen größer ist als das Ergebnis der Formel, passt Contao die Originalhöhe exakt auf die neue Zielhöhe an, während die Originalbreite proportional dazu skaliert.

Achtung

Das Bild überschreitet das vorgegebene Maß auf keinen Fall, kann aber kleiner sein.

Bildabstand

Hier können Sie den Abstand des Bildes zu den umgebenden Elementen bestimmen. Befüllen Sie die ersten vier Felder bei Bedarf mit einem Abstandswert:

  1. Feld: Abstand nach oben
  2. Feld: Abstand nach rechts
  3. Feld: Abstand nach unten
  4. Feld: Abstand nach links

Mit der Auswahl einer Option im nachfolgenden Ausklappfenster legen Sie die verwendete Maßeinheit fest. Die üblichsten Einheiten sind px (Pixel), % (Prozent) und em.

Hinweis

Geben Sie Abstände möglichst nur nach Absprache mit Ihrem Webdesigner ein, da derartige Anweisungen im Idealfall global vom Webdesigner definiert werden. Dadurch ist sichergestellt, dass die Abstände auf der ganzen Webseite identisch sind und sich ein gleichmäßiges Formatierungsbild ergibt.

Vorschaubilder pro Reihe

Wählen Sie aus dem Ausklappfenster, wie viele Bilder pro Reihe angezeigt werden sollen.

Elemente pro Seite

Legen Sie hier fest, wie viele Bilder maximal pro Seite in der Galerie angezeigt werden sollen. Wenn die Galerie mehr Bilder enthält, teilt Contao die Galerie automatisch auf und stellt den Besuchern Navigationsmöglichkeiten zu den weiteren Seiten der Galerie zur Verfügung.

Der Standardwert ist 0 und bewirkt, dass alle Bilder auf einer Seite sichtbar sind.

Nutzen Sie diese Funktion, wenn Sie sehr umfangreiche Galerien einsetzen. Dadurch verringern sich die Ladezeiten für die Galerie, da nicht so viele Bilder auf einmal geladen werden müssen.

Sortieren nach

Wählen Sie aus dem Ausklappfenster, nach welcher Methode die Bilder in der Galerie sortiert werden sollen. Zur Wahl stehen:

  • Dateiname (aufsteigend)
  • Dateiname (absteigend)
  • Datum (aufsteigend)
  • Datum (absteigend)
  • Meta-Datei (meta.txt)
  • Zufällige Reihenfolge

Die Datum-Optionen richten sich nach dem Zeitpunkt, zu dem die Dateien in die Dateiverwaltung geladen wurden.

Die Meta-Datei ist ein spezielles Sortierformat, das in Contao in der Dateiverwaltung hinterlegt wird. Diese Datei bestimmt die Reihenfolge, in der Bilder oder Downloads in der Webseite dargestellt werden. Weitere Informationen zur Meta-Datei finden Sie im Abschnitt, Die Meta-Datei (meta.txt).

Hinweis

Beim Inhaltselement Galerie können Sie für einzelne Bilder nicht so einfach einen Alternativtext festlegen. Die einzige Ausnahme hierbei ist die Sortierung per meta.txt.

Wenn Sie zur Sortierung nicht die meta.txt wählen, kreiert Contao die Bildbeschreibung basierend auf dem Dateinamen. Wenn ein Bild also DSC00001.jpg heißt, würde Contao daraus den nichtssagenden Alternativtext DSC00001 machen. Sorgen Sie deshalb unbedingt dafür, dass die Bilder alle sinnvolle Dateinamen haben, wenn sie in die Dateiverwaltung geladen werden.

Großansicht/Neues Fenster

Setzen Sie hier den Haken, wenn Sie für die Bilder die Grossansicht (Lightbox-Effekt) aktivieren wollen. Wenn der Besucher dann auf ein Bild klickt, öffnet sich das Bild in einem kleinen Extrafenster in Originalgröße.

Sobald der Besucher die Großansicht nutzt, kann er darin von einem Bild der Galerie zum nächsten navigieren. Er muss also nicht für jedes Bild einzeln die Großansicht öffnen.

Achtung

Dieser Effekt funktioniert nur, wenn Ihr Administrator für die Webseite im Seitenlayout die Mediabox oder Slimbox aktiviert hat.

Galerietemplate

Hier können Sie aus dem Ausklappfenster eine strukturelle Vorlage (Template) auswählen. Standardmäßig steht nur die Option gallery_default zur Verfügung, aber Ihr Administrator kann weitere Vorlagen anbieten.

Element schützen

Setzen Sie hier den Haken, wenn Sie möchten, dass dieses Inhaltselement nur für angemeldete Mitglieder auf der Webseite (Frontend) sichtbar ist. Für unangemeldete Besucher wird es nicht angezeigt.

Erlaubte Mitgliedergruppen

Pflichtfeld, wenn Element schützen ausgewählt ist.

Sobald Sie den Haken bei Element schützen gesetzt haben, werden darunter die vorhandenen Mitgliedergruppen eingeblendet. Klicken Sie in die Felder der Mitgliedergruppen, die das Inhaltselement sehen sollen, wenn sie auf der Webseite angemeldet sind.

Nur Gästen anzeigen

Diese Funktion bewirkt genau das Gegenteil von Element schützen. Das Inhaltselement ist für normale Besucher der Webseite sichtbar und wird ausgeblendet, sobald sich der Besucher als Mitglied anmeldet.

Hinweis

Wenn Sie irrtümlich die Funktionen Element schützen und Nur Gästen anzeigen gleichzeitig ausgewählt haben, setzt sich die Schutzfunktion durch.

CSS-ID/Klasse

Hier können Sie dem Inhaltselement eine neue CSS-ID (ins erste Feld) und -Klassen (ins zweite Feld) zuweisen. Die notwendigen Angaben hierfür erhalten Sie normalerweise von Ihrem Webdesigner oder Administrator.

Abstand davor und dahinter

Im ersten Feld können Sie den Abstand vor und im zweiten Feld den Abstand nach dem Inhaltselement in Pixel festlegen.

Hinweis

Geben Sie Abstände möglichst nur nach Absprache mit Ihrem Webdesigner ein, da derartige Anweisungen im Idealfall global vom Webdesigner definiert werden. Dadurch ist sichergestellt, dass die Abstände auf der ganzen Webseite identisch sind und sich ein gleichmäßiges Formatierungsbild ergibt.