Slideshow

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.

• Klicken Sie im Bereich «Content» (resp. «Intro») auf «Neue Content/Intro Komponente».
• Wählen Sie «Slideshow» und bestätigen Sie mit «Weiter».
• 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.

• Öffnen Sie die Komponente «Slideshow». (Klicken Sie im grünen Balken auf den Schreibstift rechts.)
• Klicken Sie auf die Schaltfläche «Hinzufügen».
• 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 Abschnitt «Bild» wählen Sie mit «Neu wählen» das gewünschte Bild aus.
• Gleich darunter können Sie einen Link zum Slide hinzufügen. (Er erscheint unter der Bildlegende als Mehr…, und das Bild wird ebenfalls verlinkt.) Die Zeile zum Einfügen des Links erscheint aber erst, wenn Sie einen der Radio-Buttons «Interner Link» resp. «Externer Link» angewählt haben.
• Bestätigen Sie die Angaben mit «Änderungen speichern».

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

Homepage
Inhaltsseite