Alternative Bild­dar­stellung

Beitrag vom Februar 2022 | Autor Bettina Blaschek

Gibt es alter­native Dar­stellungs­möglich­keiten zu Bild­galerie und Slide­show?

Wir zeigen Ihnen eine alternative Darstellungs­möglichkeit beim Einbinden von Bildern über das Modul Mediabox Bild.
  • Erstellen Sie Bilder auf der SITEX-Seite in einem mehrspaltigen Layout.
  • Mit der Einstellung Aktion beim Klick auf Bild vergroessern ver­größern werden die Bilder auf der Web­site ver­größert darge­stellt, wenn Web­site­besucher sie an­klicken. Bei mehreren Bildern auf der Seite mit dieser Einstellung kann durch diese Bilder geswiped werden.
  • Pro Bild kann immer nur eine Einstellung bei Aktion beim Klick auf Bild ausge­wählt werden.

Wir verwenden diese Einstellung übrigens im gesamten Tutorial-Bereich 🤓.

Einstellung Aktion beim Klick auf Bild vergrößern aktiviert

In unserem Beispiel haben wir abwechselnd in 2- und 3-Spalten Bilder ange­legt. Wir empfehlen Ihnen bei dieser Form der Dar­stellung alle Bilder mit gleich großem Bild­aus­schnitt anzu­legen. Bei unseren Bildern haben wir einen Ausschnitt mit 800x500px ver­wendet. Beim Ver­größern und Swipen sind dann die Bilder gleich groß und die Dar­stellung passt für 2- und 3-spaltige begrenzte Layouts gut.

Zusätzlich haben wir pro Inhalts­zeile den Stil "10px Abstand zwischen den Flächen" verwendet, unten deaktiviert. Sie können hier natürlich auch andere Stile ein­setzen oder ganz weg­lassen 🤩.

Schmetterling auf einer Blume
rosa Blume
gelbe Blüten auf einem Baum
Bunte Blumen
Schmetterling auf einer Blume
Schmetterling auf einer Blume
rosa Blume
Blüten am Baum
gelbe Tulpen und blauer Himmel
zart rosa Blumen
WICHTIG: Alle Bilder, die auf dieser Seite mit der Einstellung "Aktion beim Klick auf Bild vergrößert" angelegt wurden, werden dann in der vergrößerten Dar­stellung aneinander­gereiht. Wir haben bei der Grafik oben für die Backend-Einstellung "vergrößern" daher nicht aktiviert!

Als Erinnerung, was bei Bildern zu beachten ist:

  • Bildgröße: so gering wie möglich
  • Farbraum: RGB vs. CMYK
  • Dateinamen: Klein­buch­staben, Binde­striche, keine Leer­zeichen oder Um­laute
  • Bildformate: JPG für farben­frohe Bilder, PNG für Grafiken
  • Alternativ-Texte: ein wichtiger Beitrag zur Barriere­freiheit
  • Bildrechte: am Besten eigenes Bild­material

Infos zu Bildern

Erstellen Sie eine Bild­galerie in 4 Spalten oder als Bild­galerie mit Thumb­nails. In den Tutorials finden Sie alle Informationen, wie Sie mit der Erweiterung Bild­galerie in Ihrem CMS arbeiten.

Tutorials Bildgalerie

Legen Sie Slide­shows mit groß­flächigen Bildern oder als Karussell an. Zeitge­steuert lässt sich die Erweiterung auch für Marketing-Kampagnen ver­wenden.

Tutorials Slideshow

Bildschirm mit lachendem Gesicht Wie stellen Sie Ihre Bilder dar?

Informieren Sie sich über die Gestaltungs­möglich­keiten bei Ihrem Projekt­manager. Wir helfen gerne weiter!

Beratungstermin vereinbaren