Slideshow

Beschreibung

Mir einer Slideshow können Sie auf aktuelle Themen mit Bild und Text hinweisen. Die einzelnen Hinweise (Slides) können dabei automatisch oder von Hand durchgeblättert werden.

Slideshows können im Intro-Bereich einer Seite prominent platziert werden, aber auch im Content-Bereich.

Die Bilder werden auf die verfügbare Spaltenbreite skaliert und in der Höhe zentriert. Bitte beachten Sie dazu unbedingt die Hinweise unten.

Erstellung

  • Klicken Sie im Bereich «Content» auf «New Content Component».
  • Wählen Sie «Slideshow» und bestätigen Sie mit «Auswählen».

Erstellung

Slideshow-Konfiguration
Slideshow-Konfiguration
Grundeinstellungen der Slideshow
  • Klicken Sie im Bereich «Content» auf «New Content Component».
  • Wählen Sie «Slideshow» und bestätigen Sie mit «Auswählen».
  • Im neuen Fenster wählen Sie bei «Design» die Hintergrundfarbe «Grau» oder «Weiss». (Falls die Bilder unterschiedliche Seitenverhältnisse haben, empfehlen wir «Weiss»).
  • Wenn die Slides automatisch durchgeblättert werden sollen, aktivieren Sie «Autoplay».
  • Geben Sie die «Anzeigedauer» (in Sek.) an.
  • Speichern Sie diese Einstellungen.

Nun ist die Slideshow grundsätzlich erstellt. Die Bilder.fügen wir im nächsten Abschnitt ein. Diese müssen sich bereits im Assetbereich befinden.

Bild-Konfiguration
Bild-Konfiguration
Jedes Bild einer Slideshow erlaubt drei zusätzliche Eingaben: Titel, Text und Link
  • Öffnen Sie die Komponente «SLIDESHOW» (Klicken Sie im grünen Balken auf den  Schreibstift rechts).
  • Klicken Sie auf die Schaltfläche «ADD».
  • Eine Bildlegende erstellen Sie mit «Titel» und «Text» (Optional).
    Achtung: Verwenden Sie keine doppelten Hochkommas ("), sonst werden die Felder nicht angezeigt. Verwenden Sie einfache Hochkommas (') oder Guillemets («…»).
  • Im Feld «Bild» wählen Sie das gewünschte Bild aus: Select New.
  • Sie können einen Link zum Slide hinzufügen (Optional). Er erscheint unter der Bildlegende als Mehr… und das Bild wird ebenfalls verlinkt.
  • Bestätigen Sie die Angaben mit «Änderungen speichern».

Hinweise

  • Alle Bilder sollten das gleiche Seitenverhältnis haben, z.B. 3:2 oder 16:9. Am einfachsten haben alle Bilder die genau gleiche Breite und Höhe (in Pixel).
  • Falls die Bilder ein ungleiches Seitenverhältnis haben, zeigt der Safari-Browser in den 3-spaltigen (nicht aber den 1- oder 2-spaltigen) Seiten unter- und oberhalb der Slideshow eine leere Fläche an. So kann man dieses Problem lösen:

    1) (Im Firefox, für jedes Slide) Rechtsklick > Grafik-Info anzeigen
    2) Notieren Sie sich die skalierte Höhe Ihres höchsten Slides (s. Bild unten).
    3) Speichern Sie in den Seiten-Einstellungen im Feld Scripts folgenden Code:
    <style>
    .comp-slideshow .slick-track {
        height: 294px !important;
    }
    </style>

    (Tragen Sie bei "height" die grösste skalierte Höhe Ihrer Slides ein.)

  • Bilder, die schmäler als die Spalte sind, werden nicht auf die Spaltenbreite vergrössert, wenn ein Link eingegeben wird. (Dieser Fehler sollte mit einem zukünftigen CMS-Update behoben werden.)

grafik-info
grafik-info
Bild rechtsklicken (im Firefox), dann «Grafik-Info anzeigen»

Beispiel