Contao Galerie Vorschaubilder

[Thomas55]

Hallo,

in der Galerie kann man die Anzahl der Vorschaubilder pro Reihe vorwählen - aber man kann diese Funktion nicht abstellen.
Das ist irgendwie unpraktisch, denn je nach Einstellung und Größe des Browserfensters gibt es einen nicht wirklich gelungenen Umbruch der Thumbs.

Kann man das irgendwie abstellen, d.h. das sich die Bildchen automatisch nach Browserfenstergröße umbrechen und den ganzen vorgesehenen Raum füllen?

Dank und gruss
Thomas

[tab]

Im Endeffekt ist es doch nur eine Liste, die da ausgegeben wird. Die kann man ja mit CSS formatieren wie immer man will. Und wenn die zugewiesenen Klassen - die man ja nicht benutzen MUSS - stören, dann gibt man die Galerie halt mit einem entsprechend angepassten Template aus.

[Thomas55]

in der layout.css finde ich nur dies:

.ce_gallery > ul {
	margin:0;
	padding:0;
	overflow:hidden;
	list-style:none;
}
.ce_gallery > ul li {
	float:left;
}
.ce_gallery > ul li.col_first {
	clear:left;
}

wo wird die Anzahl der Bilder festgeschrieben, das müßte man doch nur ändern.

in der gallery_default finde ich auch nichts, was man ändern könnte. Es ist doch nur eine Zahl oder "true" "false" was geändert werden müßte, oder sehe ich das falsch?

wenn ich die max Zahl 12 eingebe, zeigt mir das den Weg - leider geht nicht mehr, wenn man dort, wo diese "12" hinterlegt wird meinetwegen z.B. 100 eingibt, dann wird immer automatisch umbrochen, also so eine Art z-index für die Bilder. Bei Bildanzahl von weniger 12 ist das schon ok so, bei mehr als 100 müßte man dann nur diese "indexzahl 100" erhöhen. Aber wo ???

[tab]

Du kannst im Inhaltselement Galerie tatsächlich nur Werte zwischen 1 und 12 eingeben für die Bilder pro Reihe. Je nachdem, was du da eingibst, werden die <li> reihenweise ausgegeben und das erste und letzte(?) davon bekommt noch eine entsprechende Klasse mit ausgegeben, das erste einer Reihe eben das "col_first". Das zugehörige CSS, das dann die Umbrüche realisiert, hast du ja schon gefunden. Mehr ist da per Default nicht. Wenn du das z.B. überschreibst im eigenen CSS

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

dann sollten die Reihen schon Geschichte sein und alle <li> einfach nur noch gefloatet sein und somit erst umbrechen, wenn rechts kein weiteres mehr daneben passt. Willst du dann zusätzlich noch dynamisch per media query die Anzahl der Bilder pro Reihe sebst festlegen, dann kannst du das z.B. über einen zusätzlichen Selektor mit nth-child realisieren

.ce_gallery > ul li:nth-child(15n) {
	clear:left;
}

Damit sollte dann die Zahl der Bilder pro Reihe 15 sein. Natürlich stehen jetzt immer noch diese jetzt total überflüssigen Klassen im Quelltext. Wenn man die weg haben will, muss man eben ans Template ran. Habe ich mal gemacht, finde es aber auf die Schnelle nicht mehr, wahrscheinlich gibt es das auch in irgendeinem Thread schon als Beitrag von mir. Wahrscheinlich muss da nur die Ausgabe von "$col->class" rausgelöscht werden, bin ich mir jetzt aber nicht ganz sicher. Versuch macht kluch .

[Thomas55]

ja, erst mal Danke!

Habe das in der layout.css mal auf clear:none geändert. Leider ohne Erfolg. Es wird genau die Anzahl umbrochen, wie in der Eingabemaske ausgewählt.

Muß da morgen noch mal gucken, wenn ich z.B. dort die Zahl 6 auswähle, irgendwo muß die doch abgespeichert werden? Jedenfalls nicht im css.

gruss
Thomas

[mlweb]

Irgendwie verstehe ich Dein Problem nicht. Ich habe mich um die Anzahl der Bilder pro Reihe noch nie gekümmert. Was da steht ist für mich völlig egal. Für Kunden die Ihre Seite selbst pflegen würde ich das Feld wahrscheinlich ausblenden um Verwirrungen zu vermeiden.
Wenn Du die dadurch entstehenden Klassen (col_1, col_2 ... row_1, row_2 und col_last, col_first ...) im css nicht ansprichst, dann haben diese auch keine Bedeutung. Dann wird alles über die Breite der Elemente bestimmt. Früher habe ich dort mit Float gearbeitet, heute mache ich das meist mit Flexboxen. Die Mühe mit Templateänderung wie von @tab angedeutet erzeugt zwar saubreren Code, aber ich habe sie mir bisher noch nie gemacht.
Zeig doch mal einen Link zu Seite, dann wird vielleicht klarer woran es hapert.

[Spooky]

ja, erst mal Danke!

Habe das in der layout.css mal auf clear:none geändert. Leider ohne Erfolg. Es wird genau die Anzahl umbrochen, wie in der Eingabemaske ausgewählt.

Muß da morgen noch mal gucken, wenn ich z.B. dort die Zahl 6 auswähle, irgendwo muß die doch abgespeichert werden? Jedenfalls nicht im css.

gruss
Thomas

Diese Zahl wird im Template ausgegeben. Per CSS kannst du dann die Galerie beliebig stylen.

[tab]

Welche "layout.css" ist das? Die von Contao mitgelieferte (assets/contao/css/layout.css) oder eine eigene? Im ersteren Fall ist das keine so gute Idee, weil nicht updatesicher. Wenn es keine Änderung ergibt, wurde entweder die zusammengefasste CSS-Datei noch nicht neu erstellt oder dein Browser hat die alte Version noch im Cache, das wären jedenfalls meine ersten Vermutungen.

[Thomas55]

...Früher habe ich dort mit Float gearbeitet, heute mache ich das meist mit Flexboxen. ...
Zeig doch mal einen Link zu Seite, dann wird vielleicht klarer woran es hapert.

Ok, danke, site ist nicht online, muß mich noch mal sortieren. Aber Flexboxen?? Wird das denn soweit schon gut unterstützt? Wird ce_gallery komplett aus der layout.css nicht benutzt, also überschrieben mit eigenem css?

Sorry für die doofen Fragen, stehe augenblicklich etwas auf der Leitung.

gruss
Thomas

[tab]

Zunächst mal kommt die layout.css nach meinem Verständnis zusammen mit dem Layoutbuilder. Hake ich den nicht an im Seitenlayout, dann wird sie gar nicht eingebunden. Da kann man also zwei Wege gehen.

1. Entweder man nimmt den Layoutbuilder und überschreibt dann mit eigenem CSS das, was einen stört -> Hier eben die Styles für die Galerie-Vorschaubilder.
2. Oder man lässt den Layoutbuilder weg, dann muss man sich halt selbst mehr mit eigenem CSS um manche Dinge bezüglich Layout kümmern und das, was man in der layout.css gut findet, eben selbst ins eigene CSS reinschreiben. Findet man das clear:left hier aus dem Thread nicht so gut, dann lässt man das eben im eigenen CSS von vornherein weg und muss es folglich auch nicht mehr überschreiben.

Mit der zweiten Methode dürfte sich also die Gesamtgröße des CSS eher reduzieren, man muss aber eben selbst an manche Dinge denken, die vielleicht nicht für jeden offensichtlich sind. Wie z.B. die Positionierung der Bilder im ce_text, weil die dazu benutzten Klassen wie float_left eben auch aus der layout.css "bedient" werden. Vergisst man das, dann wird man sich schnell wundern, dass die Bilder eben nicht so positioniert sind, wie man es im Inhaltselement eigentlich ausgewählt hat.

Flexboxen sind mittlerweile ein guter Ersatz für vieles, was man traditionell mit floats gemacht hat und bietet darüber hinaus viele neue Möglichkeiten. Die Unterstützung ist mittlerweile sehr gut. Wenn man natürlich sehr alte Browser unterstützen will oder muss, dann hat man eventuell mit der traditionellen Float-Lösung weniger Arbeit, weil das eben auch im IE6, IE7 und ähnlichen Museumsexponaten funktioniert.

[Thomas55]

Ok, danke, gut erklärt - hat mich wieder ein Stück in den Contao Dschungel geführt - man vergisst und wundert sich, das etwas so und nicht anders funktioniert, weil die Dinge unter der Haube ja immer mitwerkeln - ok ist woanders auch so, aber als relativer Contao Frischling brauch man die layout.css schon noch.

Trotzdem - noch mal zu der mit ce_gallery und mit der gallery_default.html5 vordefinierten Galerie: natürlich gibt es ein angehängtes css in dem ich Schatten, Linien etc definiert habe, nur eben mit "ce_gallery .xyz". Will man so arbeiten, darf man nicht mehr als 12 Vorschaubilder nehmen, sonst wird der Umbruch etwas seltsam (2 Reihen immer die Summe 12) wenn der browser kleiner wird. Das könnte man von Entwicklerseite verbessern, die 12 ist doch eher willkürlich und zu wenig. Ansonsten ist diese galerie ja genial gut und einfach.

gruss
Thomas

[Andreas]

Evtl. hast du das noch nicht ganz verstanden. Hier mal ne Galerie mit 8 Bildern, 4 pro Reihe.

<ul class="cols_4">
  <li class="row_0 row_first even col_0 col_first">
  <li class="row_0 row_first even col_1">
  <li class="row_0 row_first even col_2">
  <li class="row_0 row_first even col_3 col_last">
  <li class="row_1 row_last odd col_0 col_first">
  <li class="row_1 row_last odd col_1">
  <li class="row_1 row_last odd col_2">
  <li class="row_1 row_last odd col_3 col_last">
</ul>

Und hier eine mit 8 Bildern, 12 pro Reihe.

<ul class="cols_12">
  <li class="row_0 row_first row_last even col_0 col_first">
  <li class="row_0 row_first row_last even col_1">
  <li class="row_0 row_first row_last even col_2">
  <li class="row_0 row_first row_last even col_3">
  <li class="row_0 row_first row_last even col_4">
  <li class="row_0 row_first row_last even col_5">
  <li class="row_0 row_first row_last even col_6">
  <li class="row_0 row_first row_last even col_7">
</ul>

Du siehst, dass sich nur die Klassen ändern. Wenn du aber kein CSS hast, welches diese Klassen anspricht, dann ist es völlig egal, wieviele Reihen du einstellst.
Das einzige CSS aus dem Core, welches hier greift ist

/**
 * Format the Contao image galleries (now rendered as unordered lists)
 */
.ce_gallery > ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.ce_gallery > ul li {
  float: left;
}
.ce_gallery > ul li.col_first {
  clear: left;
} 

Die letzte Regel sorgt dafür, dass dass float:left gecleart wird. Also bei .col_first fängt jede Reihe links von vorne an. Wenn du das nicht möchtest kannst du das überschreiben, wie oben bereits erklärt.

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

Das ist alles.

Wenn du mit Flexboxen arbeiten möchtest, kannst du das float:left auch überschreiben.

.ce_gallery > ul li {
  float: none;
}
.ce_gallery > ul li.col_first {
  clear: none;
}
.ce_gallery ul {
  display: flex;
} 

Schau dir im FE immer mit den Entwickler-Tools des Browsers den DOM an, nicht nur wie die Seite aussieht, damit du verstehst, was Contao bei welcher Einstellung ins FE bringt.

[Thomas55]

ja vielen Dank - die Galerie ist gerettet

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

einfach in die eigene css hineingepackt und clear: left wird überschrieben.

so im Nachhinein hätte man auch selber drauf kommen können

die nächste Galerie werde ich einmal mit den flex Boxen testen....