Ziehen Sie einfach Ihr Browser-Fenster auf die Größe eines Smartphones oder Tablets, um zu testen, wie ein Element in der mobilen Ansicht mit dem Smartphone oder auf dem Tablet aussieht.
Fotostrecke ausfüllen
Wenn Sie mehrere Bilder für eine Webseite haben und diese nicht untereinander oder an verschiedenen Stellen der Seite verteilt in flexiblen Textblöcken darstellen möchten, eignet sich das Seitenelement Fotostrecke. Darin werden mehrere Bilder neben- und untereinander als kleine Vorschaubilder angezeigt. Vier Bilder pro Zeile sind möglich.
Es gibt eine Bildvorschau-Variante mit quadratischem Zuschnit, eine mit individueller Bildhöhe und Zuschnitte in den Quer- und Hochformaten 4:3, 16:9, 3:4, 9:16. Mehr dazu lesen Sie im Absatz „Darstellungs-Varianten“.
Durch Klicken auf ein einzelnes Bild in der Fotostrecke wird dieses im Großformat samt Bildtitel, Bildunterschrift und Copyright-Angabe angezeigt. Sobald die Bilder im Großformat angezeigt werden, ändert sich der Cursor der Maus zu einer kleinen Hand - durch einen anhaltenden Klick wird diese Hand zur Faust und nun können durch Bewegung nach links und rechts alle Bilder im Großformat angeschaut werden. Eine Bewegung nach unten oder oben beendet die Darstellung der Bilder im Großformat. Ein Durchlaufen der Fotostrecke im Großformat kann man alternativ auch mit den Pfeiltasten steuern.
Das Seitenelement Fotostrecke kann nur in der grünen Layoutzeile mit voller Breite (12 cols) platziert werden.
Mindestens zwei Felder müssen bei jedem Fotostrecken-Element ausgefüllt werden, nämlich das Feld "Überschrift" und das Feld "Ordner". Bei "Ordner" tragen Sie den Pfad zum Bilderordner ein, der die Bilder für das Fotostrecken-Element enthält.
Optional können Sie im Bearbeitungsfeld der Fotostrecke auch eine Sortierreihenfolge (auf- oder absteigend) und einen Sortierschlüssel wählen, nach welchem die Bilder in der Fotostrecke angezeigt werden, zur Auswahl stehen folgende Sortierschlüssel:
- Erstellungsdatum
- Änderungsdatum
- Veröffentlichungsdatum
- Titel
- Pfad
- Dateiname
- Extension
- Größe
Weitere Informationen und detaillierte Erklärungen zu den Filter- und Sortiermöglichkeiten finden Sie unter Sub-Schema Datenquelle.
Standard: Quadratische Bilder
Die Standard-Einstellung sind quadratische Vorschaubilder. OpenCms ermittelt die Mitte der Bilddateien und platziert sie nebeneinander. Sie können so querformatige und hochformatige Bilder in einer Fotostrecke mischen. Alle Bilder der Fotostrecke bekommen dieselbe Höhe, auch die Zeilen sind deshalb gleich hoch.
Beispiel mit quadratischer Bildvorschau
Individuelle Bildhöhe
Um die Bilder unbeschnitten verkleinert auszugeben, wählen Sie über das Zahnrad-Symbol (Seiten-Element-Einstellung) die Ausgabe-Variante „Individuelle Bildhöhe“. Die Bildbreite ist identisch, nur die Höhe wird nun proportional angepasst. Bitte achten Sie darauf, dass alle Bilder exakt gleich hoch sind, um mögliche Leerfelder zu vermeiden.
Beispiel mit individueller Bildhöhe
Weitere Bild-Formate
Für Bilder ausschließlich im Querformat oder im Hochformat – z.B. Porträtaufnahmen – gibt es weitere Einstellvarianten. Um sie auf einheitliche Höhe zu bringen, wählen Sie über das Zahnrad-Symbol (Seiten-Element-Einstellung) der Fotostrecke eine der weiteren Ausgabe-Varianten:
- Querformat 4:3
- Querformat 16:9
- Hochformat 3:4
- Hochformat 9:16
Vertikales Flattern
Ist die Element-Einstellung &bdqup;Spaltenflattern aktivieren“ abgehakt, zeigt es ab der dreispaltigen Darstellung die zweite (und vierte) Spalte um 50 Prozent der Kachelhöhe nach unten versetzt an.
Fotostrecke vorbereiten
Bilder in einer Bildergalerie hochladen
Um eine Fotostrecke zu erstellen, müssen Sie zunächst etwas Vorarbeit leisten. Alle Bilder, die Sie für die Fotostrecke verwenden wollen, müssen Sie in einen gesonderten Ordner hochladen. Bitte wechseln Sie hierzu zunächst in die Explorer-Ansicht.
Erstellen Sie eine neue Bildergalerie, indem Sie über den Zauberstab einen neuen Ordner anlegen.
Wählen Sie den Reiter "Bildergalerie" aus und benamen Sie den Ordner so, dass Sie ihn gut wiederfinden und zuordnen könnnen.
Nun können Sie alle Bilder in den Ordner hochladen, die Sie in der Fotostrecke verwenden wollen.
Bildtitel, -unterschrift und Copyright
Bildtitel, Bildunterschrift und Copyright werden in der Fotostrecke in der Großformat-Ansicht unter jedem Bild angezeigt. Die Copyright-Angabe ist zusätzlich schon in der kleinen Vorschauansicht im jeweiligen Bild unten zu sehen.
Diese Angaben müssen wir nicht im Fotostrecke-Element eintragen, sondern direkt in den Eigenschaften der einzelnen Fotos:
- Bildtitel deutsch ins Feld "Title"; Bildtitel englisch ins Feld "Title_en" eingeben
- Bildunterschrift deutsch ins Feld "Description"; Bildunterschrift englisch ins Feld "Description_en" eingeben
- Copyright deutsch ins Feld "Copyright"; Copyright englisch ins Feld "Copyright_en" eingeben
Einige der Felder sind in den Eigenschaften erst zu sehen, wenn man im Reiter "Individuell" auf "Unbenutzte Eigenschaften" klickt (siehe Screenshot).
Alternative zum Eigenschaftenfeld: "Galerie optimieren"
In der Exploreransicht kann man, wenn man auf einen Bilder- oder Dokumentenordner z.B. "img"-Ordner klickt, den Dialog "Galerie optimieren" wählen.
Im neuen Fenster kann zu jedem Bild in der Galerie ein Titel, das Copyright und eine Beschreibung eingeben werden.
Fotostrecke erstellen
Nachdem Sie den Typ Fotostrecke in eine Layoutrow mit der vollen Breite (12 cols) gezogen haben, klicken Sie bitte auf bearbeiten und fügen dann eine Datenquelle hinzu.
In der Zeile mit dem Ordnersymbol geben Sie den gewünschten Bilderpfad der eben erstellten Bildergalerie ein. Außerdem können Sie an dieser Stelle beispielsweise die Sortierung der Fotostrecke auswählen.
Weitere Informationen zu den Filter- und Sortiermöglichkeiten finden Sie unter Sub-Schema Datenquelle.
Damit die Fotostrecke ästhetisch ansprechend dargestellt wird, sollten Sie mindestens acht Bilder und immer eine durch vier teilbare Anzahl verwenden.
