-
Galerie - responsive
Hallo,
ich habe folgendes Problem:
ich habe eine Galerie, in der ich definiert habe 3 Bilder pro Reihe anzuzeigen, passt wunderbar für den Desktop-Bereich.
Das gleiche Album/ Galerie möchte ich nun so responsive gestalten, dass habe ich soweit auch hinbekommen, dass Problem ist nur die 3 Bilder pro Reihe, je nach Display-Größe sieht man 1 Bild oder 2 und das 3te ist in der nächsten Reihe. Sprich ich habe in einer Reihe manchmal nur 1 Bild und untendrunter kommen wieder 2.
Kann ich das per css hinbekommen, dass es sich nach Display-Größe anpasst wieviele Bilder pro Reihe erscheinen oder dass nach jedem Bild eine neue Reihe erstelle?
Wäre halt blöd ein neues Album dafür anlegen zu müssen, vorallem da es mehrere werden.
Ich nutze die Erweiterung "gallery_creator"
-
update zuerst mal auf die aktuelle Version, ab 3.4.0 hast du automatisch die Möglichkeit je nach Bildschirmgröße auch die Anzeigeeigenschaften von Bilder zu ändern.
responsive-images-picture-contao mal durchlesen. Wenn du bei Google suchst, findest du dazu noch mehr..
-
Unabhängig von der Funktion der Galerie kannst Du folgendes machen:
Das Element dass ein Bild umgibt, meist ein li, so formatieren:
Code:
.ce_gallery li {float: left; width: 33.333%;}
Das Bild selbst bekommt, sofern nicht schon vorhanden noch:
Code:
img {max-width: 100%; height: auto;}
Danach kannst Du über mediaqueries für kleinere Bildschirme die weite des li und damit die Anzahl der Bilder pro Reihe beeinflussen.
zb:
tabletgröße (zb 960px)
width: 50% = 2 Bilder
Smartphone (zb 767px)
width: 100% = 1 Bild
Zu Beachten ist noch die Bildgröße. Wenn die Bildbreite kleiner ist der prozentuale Anteil der gesamten Displaybreite kann das unschön aussehen.
-
ich danke euch beiden :)
@Samuell, das ist ein gutes "Workaround" werde ich aufjedenfall im Hinterkopf behalten.
@mokaki, ein Update ist immer so eine Sache :) testen ob noch alles weiterhin geht usw :) bin aber momentan am testen auf die Version 3.4.5 zu gehen. Jedoch kann ich die erstellten Bildschirmgrößen bei der Erweiterung nicht verwenden (steht nicht zur Auswahl).
Aufjedenfall werde ich meine images nun mit "vw" und "vh" stylen, dass ist für mich noch Neuland und muss mich da erst einmal reinfinden.
