Total wirre Galerie-Thumbnails umsetzen?

[k-webdesign]

Hi,

bisher habe ich ja so ziemlich jedes abgefahrene Design mit Contao geschafft, mal mehr und mal weniger für den Kunden pflegbar. Aber das stellt mich echt vor ein großes Rätsel:
Bildschirmfoto-2013-05-07-um-19.48.jpg

Idealerweise sollte es das Media-Element "Galerie" sein, bei dem sich die Thumbnails prozentual verkleinern und irgendwie nebeneinander setzen. Das kann ja auch gerne durch manuelle Reihenfolge geschehen. Aber wie zur Hölle soll ich das machen? oO

[bizon]

Geht mit dem Elementtyp Galerie recht einfach, wenn das Galerie-Template eine Liste ist (seit Contao 3 ist das standardmäßig so).

Nur diese Einstellungen sind in der Galerie nötig:
Bildbreite: leer lassen - Bildhöhe: 150px - Proportional

Der kleine Rest ist CSS:

.ce_gallery li {
	float: left;
	height: 150px;   /* == Bildhöhe */
	width: auto;
	margin: 2px;
}

[k-webdesign]

ha, danke!

ich setze das jetzt gerade fluid um. Gibt's die Möglichkeit zu sagen, dass ich alle Bilder in einer Reihe haben will? Mir entsteht jetzt beim Zusammenschieben mit dem Wert "12" natürlich ständig ein Umbruch. Wie muss ich dazu das Template anpassen? Und vor allem welches Template? Weder in ce_gallery noch gallery_default kann ich irgendwas erkennen, das auf eine Elementzählung schließen lässt.

[bizon]

ich setze das jetzt gerade fluid um

Genau dafür ist der Tipp aus meinem letzten Post gedacht. Es wird die Zeile gefüllt, bis ein Umbruch wegen der Seitenbreite unumgänglich ist.

Aus deinem letzten Post entnehme ich, dass du ein tabellenbasiertes Template benutzt, das dafür nicht geignet ist. Wie schon erwähnt, brauchtst du ein listenbasiertes Template. Siehe hier.

EDIT - Achtung aufpassen! - Da sich das Tutorial noch auf eine ältere Contao Version bezieht, musst du das Template evtl. mit dem Suffix .html5 bzw. .xhtml speichern.

Das kleine CSS von oben genügt dafür schon.

[k-webdesign]

Hi,

nee, ich hab Contao 3.0.6 und nutze die .html5. Aber ich MUSS im Backend ja angeben, wie viele Bilder in einer Reihe angezeigt werden sollen. Den Wert "0" gibt es hier leider nicht. Daher wird mir automatisch ein Umbruch reingehauen. Wenn das nicht wäre, würde es ja automatisch richtig fluid umbrechen. Oder bin ich gerade blind und übersehe das im BE?

Ich kann dir gerne kurz nen Link per PN schicken, damit du es dir anschauen kannst.

Code: code.jpg
Breiter Bildschirm: wide.jpg
Schmaler Bildschirm: smaller.jpg
Noch schmaler: smaller.jpg

[bizon]

ich benutze ebenfalls Contao 3.0.6 und in der Galerie das Template: gallery_default.
Der Wert in Vorschaubilder pro Reihe wird in meiner Installation total ignoriert, egal was ich dort einstelle. Und das ist so auch richtig, denn diese Einstellung macht hier nur Sinn, falls jemand doch wieder ein Tabellenlayout einsetzen möchte.

siehe Beispiel. Teste es auch in einem schmalen Browserfenster.

[Mischa]

Hallo, hab ich erst vorletzte Woche in ähnlicher Weise umgesetzt. Schau es Dir mal an: http://style-and-brands.de/luisa_cerano.html

Es gibt noch weitere Beispiele dort.

Herzlich grüßt der Mischa

[derRenner]

Hallo,

hab das ein wenig aus Interesse verfolgt - ich versteh aber nicht ganz, wie die Gallerie wissen soll, wie breit die Bilder denn dann werden sollen. Die Höhe ist OK, aber wenn ich verschieden breite Bilder habe, dann füllt er wohl "eine Zeile" solange aus, bis ein Zeilenumbruch notwendig ist, aber die Gesamtbreite dieser "Bilderkette" ist dann doch in allen Zeilen verschieden breit, oder? Ich stelle mir das Konstrukt dann eher so vor, dass der rechte Rand dann nicht mehr bündig in allen Zeilen ist - und das sieht dann ja nicht mehr recht sauber aus. Oder "errechnet" die Gallerie dann auch die notwendige Breite, sodass alle Bilderzeilen immer gleich breit sind?

[bizon]

Stimmt, der rechte Rand wird "unsauber" wenn Bilder verschiedener Größen eingesetzt werden. Wenn du aber Fotos mit jeweils den gleichen Proportionen (z.B. Hochkant 3:4 und Querformat 4:3) benutzt und die Bilder geschickt positionierst, bleibt der rechte Rand bündig. Siehe das Foto aus Post #1 - nur in der letzten Zeile stimmen die Proportionen nicht und der rechte Rand bricht auf.

[derRenner]

Danke @bizon - ja, das klingt gut - verstehe

[Mischa]

Zuerst mal ist das Layout so wie es vorliegt ja nicht "wirr" denn die Anzahl und die Größe ist ja pro Reihe fix. Hat bestimmt ein Print-Grafiker entworfen, oder?

Man kann die Bilder skalierbar anlegen, damit sie sich der Layoutbreite anpassen. Für mobile Endgeräte wird es aber dann schwerer, gerade in Tabletgrösse weil dann eventuell 2 Bilder in der Reihe weg müssen damit man per Touch noch trifft. Dann stimmt aber die schöne Reihenfolge von großen und kleinen Thumbs nicht mehr und alles gerät durcheinander.

Mich interessiert, wie Du das löst! Halt uns bitte auf dem Laufenden.

[bizon]

Ich hab eine Testinstallation mit Contao 3.0.6 eingerichtet, die euch die (entfernt-Seite existiert nicht mehr) zeigt.

[k-webdesign]

Ich habe in der Galerie die 150er Höhe jetzt noch mal entfernt und wieder eingefügt, danach ging es. Die Höhe hatte ich rein gemacht, bevor es das CSS dazu gab. Vielleicht war da was im Cache? Der wurde aber mehrfach geleert. Egal, jetzt geht's jedenfalls

Die Bilder werden ja proportional klein gerechnet, d.h. statt 300x600px hat es dann 150x300px. Die Vorlage bricht auch nicht immer perfekt um (und ich vermute ebenfalls, dass es ein Printler gemacht hat). Ich hätte das viel klarer und strukturierter gemacht, zumal man zwar oben so mit den Bildern hin kommt, aber unten habe ich dann aus einer Serie nur horizontale Bilder, da KANN es nur scheiße aussehen. Jetzt ging es mir darum, diese Sch... zu filtern und was besseres daraus zu machen Problematisch ist ja auch, dass ich die Bilder-Sets nicht einfach wild durcheinander werfen sollte. Damit das aber schick aussieht und immer richtig umbricht, kam mir nur "fluid" in den Sinn.

Also: Wenn es bei euch nicht zuerst funktionieren sollte, haut entweder mal kurz das CSS oder die Galerie-Einstellungen weg. Vielleicht hat sich da noch was gecached oder es überschneidet sich irgendwo etwas.


Edit: Quark! Die Anzahl der Elemente in einer Reihe muss auf "1" stehen, dann funktioniert das.