Seitenelement: Fotostrecke

Dokumentation Template 3.0

Die Fotostrecke ist eine Galerieansicht für viele Bilder. Sie zeigt pro Zeile vier kleine Vorschaubilder. Alle Bilder lassen sich vergrößert öffnen.

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.

Bildschirmfoto einer vierspaltigen Fotostrecke mit insgesamt acht Bildern. Die zweite und die vierte Zeile sind jeweils um die Hälfte der Bildhöhe nach unten versetzt. Optisch ergibt sich damit an der Oberkante eine Lücke in den Spalten zwei und vier. An der Unterkante ist die Lücke bei einer zweizeiligen Fotostrecke in der ersten und dritten Spalte.

Beispiel mit vertikalem Flattern

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).

Title, Description, Copyright in Bilder für Fotostrecke eingeben
In den Eigenschaften jedes Bilds können wir Title, Description, Copyright auf Deutsch und Englisch eingeben.

Alternative zum Eigenschaftenfeld: "Galerie optimieren"

Neuer "Galerie optimieren"-Dialog für Bilder- und Downloadgalerien.

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.

Fotostrecke
Bearbeitungsfeld des Seitenelements Fotostrecke

Damit die Fotostrecke ästhetisch ansprechend dargestellt wird, sollten Sie mindestens acht Bilder und immer eine durch vier teilbare Anzahl verwenden.

Support vom Webteam

 

TIK - NFL - Webteam

Allmandring 30, 70550 Stuttgart

Zum Seitenanfang