Contao Bildergalerie: Bilderauflistung (Vorschaubilder pro Reihe)

[Twitt]

Hallo ins Forum

Ich steh momentan mit der Contao Bildergalerie an.
Sobald ich für die Höhe des bildfassenden <li> (in meinem Fall "#main .marken5 ul li") eine Höhe zuordne, wird bei der Screenverkleinerung nach 5 Bildern nochmals umbrochen. Fünf Bilder, weil ich im Backend "5 Bilder in einer Reihe" eingestellt habe.

Sobald ich den Wert für die Höhe entferne, klappts. Jedoch will ich die Bilder in gleich grossen Boxen publizieren und brauche daher die Höhenangabe.
Wie kann ich diesen Umbruch entfernen? Ich kann ja nicht keine Anzahl in der Bildreihe anwählen und ich muss auch damit rechnen, dass der Kunde mal noch einige Bilder mehr hochlädt.

Zur besseren Darstellung sind zwei Screenshots im Anhang.
Danke für ein Feedback.

[Spooky]

Bei solchen Problemen immer einen Link zur Seite posten.

[tab]

Da musst du einfach die CSS-Anweisungen, die den Umbruch verursachen, überschreiben. Die Umbrüche werden ja erzeugt, indem die li's gefloatet werden und an der passenden Stelle dann eben das float gecleart wird, so dass das nächste Element in einer neuen Zeile anfängt.

.ce_gallery > ul li.col_first {
    clear: left;
}

.ce_gallery > ul li {
    float: left;
}

Das clear:left; bewirkt den Zeilenumbruch. Also müsstest du das entweder mit clear:none im eigenen CSS überschreiben, oder gleich im Template (gallery_default) die ganzen Klassen rausräumen, die ja dann sowieso nicht mehr stimmen und nur noch den Quelltext aufblähen und den Quelltext-Lesenden verwirren.

[scroll]

Liegt vermutlich auch an dein Margin, die Breite ist in Prozent angegeben und dein Margin in Pixel. Ab einer bestimmten Breite kann das nicht mehr passen.

#main .marken ul li {
	width: 18%;
	height: 90px;
	margin: 0 1% 8px 1%;
	background: #fff;
}

Dann ist es auch völlig egal wieviele Bilder du im Feld "Vorschaubilder pro Reihe" einträgst, es werden immer 5 angezeigt.

Gruß Michael

[Samuell]

Ich formatier die Galerie immer mit CSS und überschreibe das clear.
Das funktioniert gut.

[Twitt]

Erst einmal ein Dankeschön an die Tipps und Antworten hier.
Den "clear" habe ich aufgelöst und den Bildern eine feste Breite gegeben. Mit Prozenten wie schon richtig bemerkt gibts keine Umbrüche und die Bilder werden dann zu klein.

Ausserdem versuche ich meist, die Templates möglichst nicht anzufassen, ist aber eine Überlegung wert für zukünftige Projekte.

Unter diesem Link sieht man im Moment das Ergebnis.

Da der Kunde selbst zukünftig hochladen will, habe ich dafür eine Bildgrösse mit der Einstellung "proportional" erstellt welche er dann immer fest anwählen kann. So bleiben die Logos proportional, werden aber nicht zu gross im Rahmen dargestellt. Der Rest passiert nun im CSS, ausser:

• die Bilder krieg ich vertikal noch nicht in die Mitte (habs mit vertical-align probiert aber es verzerrt mir die Logos)?
  Der Pseudowert mit margin-top ist momentan unschön :-(
  
• beim Umbruch der Logos wäre eleganter, wenn der Container eingemittet wäre (weiss aber nicht warum ich diesen nicht einmitten kann, wohl wegen den floats?)

Da musst du einfach die CSS-Anweisungen, die den Umbruch verursachen, überschreiben. Die Umbrüche werden ja erzeugt, indem die li's gefloatet werden und an der passenden Stelle dann eben das float gecleart wird, so dass das nächste Element in einer neuen Zeile anfängt.

.ce_gallery > ul li.col_first {
    clear: left;
}

.ce_gallery > ul li {
    float: left;
}

Das clear:left; bewirkt den Zeilenumbruch. Also müsstest du das entweder mit clear:none im eigenen CSS überschreiben, oder gleich im Template (gallery_default) die ganzen Klassen rausräumen, die ja dann sowieso nicht mehr stimmen und nur noch den Quelltext aufblähen und den Quelltext-Lesenden verwirren.

[Spooky]

Da du vertikal zentrieren willst, brauchst du sowieso eine fix vorgegebene Höhe. Daher ist also dein ursprüngliches Problem schon mal hinfällig.

Für das vertikale zentrieren gibt es verschiedene Ansätze. Eine Möglichkeit:

#main .marken5 ul li {
    position:relative;
}

#main .marken5 ul li img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    margin: auto;
} 

Für die horizontale Zentrierung der gesamten Gallery:

#main .marken5 ul {
    text-align:center;
}

#main .marken5 ul li {
    float:none;
    display:inline-block;
} 

Dadurch entstehen aber zusätzliche Abstände.

[Twitt]

Danke Spooky

Die Möglichkeit für vertikale Logozentrierung hat wunderbar gehofen und bei der vertikalen Zentrierung habe ich die Margins noch angepasst und jetzt siehts gut aus. Jedenfalls im FF, die anderen Browser test ich noch.
Super, besten Dank für deine Hilfe.

...
Für das vertikale zentrieren gibt es verschiedene Ansätze. Eine Möglichkeit:

Für die horizontale Zentrierung der gesamten Gallery:
Dadurch entstehen aber zusätzliche Abstände.