contao Bildergalerie responsive machen

[kubjo]

Hi Leute,
ich habe eine Frage an die php-Profis unter euch,
Ich würde gerne das template "gallery_default.html5" so verändern, daß es responsive wird.
Mir schwebt folgendes vor: wenn man bei einem 12er grid eine Galerie mit 6 Bildern einfügt, denen man im BE keine Pixelgröße mitgibt, sollen die bilder jeweils 2grid (120px) breit werden und wenn man den Browser zusammenschiebt sollten die Bilder 84px breit werden.
Ist das dadurch einfügen der nötigen css Klassen im Template möglich?


Grüße aus Ludwigsburg
Jochen Kubik

[bizon]

Hallo,

statt einer Tabelle braucht es dazu eine <ul>Liste.

Unter C3 ist das Listentemplate bereits vorhanden.
Für die Versionen bis 2.11 liefert die Suche bei Google nach "gallery ohne tabellen" gleich 5 Ergebnisse, die alle Contao betreffen.

Formatiert werden im CSS dann die <li>.

Hier ein Beispiel mit einer floatenden Galerie.

[kubjo]

Hallo Bizon,

vielleicht habe ich mich unklar ausgedrückt, dass das "gallery_default.html5" template ohne tabellen auskommt ist mir klar, ich würde es gerne "responsive" machen, mit den entsprechenden grid Definitionen!

Grüße
JK

[bizon]

Für die Galerie braucht es keine extra Gridklassen, wenn du die <li> entsprechend in den MediaQuerys anpasst.

Bildschirmbreite X
li {width: *px}

Bildschirmbreite y
li: {width: *px}

usw.

Schau dir doch die Beispielseite mit verschiedenen Bildschirmschrößen im Firebug an.

[bizon]

Ich denke, dass ich eben deine Galerie entdeckt habe.

Der #container hat ein min-width, das den float der <li> verhindert. Ich hoffe, das hilft dir.

[kubjo]

Hi bizon,
das kann nicht, sein, denn die Seite, um die es hier geht ist noch nicht öffentlich zugänglich.

Den Tipp mit "li {width: *px}" werde ich mal testen!
Danke!

Grüße aus Ludwigsburg
Jochen Kubik

[Kahmoon]

Darf ich mich hier mal einklinken. Ich bin selbst gerade auf das Problem der Coregalerie zusammen mit responsive gestossen. Hat jemand ein responsive gallery_default Template rumliegen und mag es mir vielleicht zur Verfügung stellen?

vg
Frank

Edit:
War doch leichter als gedacht

[Luminanz]

War doch leichter als gedacht

Würde mich für deine Lösung interessieren

Gruss, Luminanz

[Bas]

Hier mal ein Auszug aus meiner Lösung - dazu muss ich sagen, dass ich nicht mit den Contao-CSS etc. arbeite .. das Prinzip sollte aber trotzdem anzuwenden sein.

#main .inside .spalten3 ul li {
  width: 33.33333%;
  float: left;
  display: inline;
}
#main .inside .spalten3 ul li img {
  display: inline;
  float: left;
  width: 100%;
  height: auto;
}

Ich gebe meiner Galerie ne klasse mit .. in obigen Beispiel "spalten3" weil ich drei Spalten haben möchte. Der Rest sollte klar sein.
Das Ergebnis ist, das meine Galerie immer 3Spaltig ist ... egal wie breit der Container ist in dem die Galerie enthalten ist. die Größe der Bilder (und auch evt. Pixelgrößen im <img>) sind egal .. das einzige was nötig ist, ist es das Seitenverhältnis der Bilder anzugleichen, damit der Aufbau sauber ist.

Online findet ihr das Beispiel auf http://www.schönmussessein.de/blog-e...f_muffins.html .. siehe die Galerie im Content, wenn Ihr Euren Viewport auf unter 800 Pixel verkleinert seht ihr wie die galerie schrumpft (allerdings hängt dort auch noch ein Grid und einiges mehr dahinter .. das CSS oben habe ich auf das wesentliche reduziert)

[Kahmoon]

Würde mich für deine Lösung interessieren

Gruss, Luminanz

Sorry

[Luminanz]

Hallo zusammen

Herzlichen Dank für eure Ansätze!

In diesem Beitrag habe ich übrigens noch ein anderes responsives template gefunden!

Gruss, Luminanz

[xkoy]

Ich setz da mittlerweile nur noch auf Bootstrap, aussehen tut das so:

Klick mich hart

[Stranger]

Mich interessiert das Thema auch. Dieses Standard Responsive Krams ist ja einfach. Hab ich hier auch eingesetzt:
http://www.total-reality.de/fotos/tiere/

Das Problem ist aber, dass das nicht überall so geht. Die Fotos müssen alle gleich groß sein, sonst gibt es Probleme.
Bei den meisten Fotos ist das ok, wenn sie so beschnitten werden, aber hier sieht es echt bescheiden aus:
http://www.fast-end-media.de/produkte/event-manager/

Hier muss ich eigentlich eine proportionale Verkleinerung wählen, aber dann kriege ich die Elemente nicht so untereinander und nebeneinander, dass keine riesigen Lücken entstehen...

Ich wünsche mir eine Möglichkeit Fotos so darzustellen wie in Google Picasa Online oder wie hier:
http://sw.severinwendeler.de/dominik-mentzos/

Ich bezweifle, dass das mit reinem CSS umzusetzen ist.

[MacKP]

Hallo Stranger,
sowas macht man nicht nur mit CSS. Das wird mit JavaScript gemacht. z.B. -> http://isotope.metafizzy.co/

Viele Grüße

[kubjo]

Hi MacKP,
das ist ja geil, gibt's das auch für contao ohne isotope?

Grüße aus Ludwigsburg
Jochen Kubik

[planepix]

Moin Jochen,

Isotope ist nicht gleich Isotope

Es geht Masonry und der fleissige Dirk hat dafür eine Contao-Erweiterung erstellt:

-> https://contao.org/de/extension-list...010009.de.html

LG

PS: am 9.5. ist Stammtisch.

[kubjo]

Hi Thomas,
leider ist die Erweiterung leider nicht das, was ich suche. Die Bilder darin müssen immer gleich groß sein und in einem festen Raster :-(

LG

P.S. Ich guck mal ob ich kann!!!

[Bas]

Hi Thomas,
Die Bilder darin müssen immer gleich groß sein und in einem festen Raster

Sofern Du mit gleichgross ein gleichbleibendes Seitenverhältnis meinst geht das mit Isotope und diesem Tutorial hier: http://www.i-do-this.com/blog/using-...uid-layouts/57
Du musst in dem Script nur dafür sorgen, dass die Spaltenanzahl nicht geändert wird.

Und wenn Du wirklich gleich gross meinst, geht das auch mit Isotop ... Du weist dem Container einfach ne feste Breite zu.

[kubjo]

Hi Leute,
jetzt habe ich wenigstens verstanden, was Thomas meint, wenn er schreibt "isotope isz nicht gleich isotope" ;-)

Was ich aber noch nicht verstanden habe, wenn ich so eine coole Galerie haben will in der sich unterschiedlich große Bilder und Bilder mit verschiedenen Seitenverhältnissen haben will, ist:

1.) Muß ich die Erweiterung von Dirk und das "JS isotope" einsetzen, oder
2.) Reicht nur das JS "isotope"?
3.) Da ich mich mit JS nicht wirklich auskenne schäzue ich jetzt mal ins Blaue:
- Ich lade das JS in die Dateiverwaltung hoch,
- Ich verlinke von Layout darauf,
- ich muß irgendwie das JS initialisieren (keine Ahnung wie :-(
- Ich muß den einzelnen Bilder ein paar CSS Klassen mitgeben
- Ich muß den CSS Klassen ein paar Breiten oder höhen mitgeben

Alles klar soweit??? Oder liege ich falsch?

Grüße aus Ludwigsburg
Jochen Kubik

[Bas]

Ich persönliche nutze nur Isotope und binde es lieber selber ein, besonders in Verbindung mit MetaModels geht das problemlos, da man sich die Ausgabetemplates sowieso selber bastelt (siehe z.B. http://www.wdi.ag/de/kontakt.html - allerdings haben die Bilder dort alle dieselbe Größe). Das angesprochene Modul hab ich mir noch nicht angeschaut.

Bzgl. Initialisierung: http://isotope.metafizzy.co/#getting-started

Ansonsten empfehle ich Joe's "Javascript up my Contao" bzgl. JS Einbindung.

[Stranger]

Wenn ich das richtig sehe, kostet dieses Isotope was?

Um es mal aufs einfachste herunter zu brechen: Im Prinzip wäre es also ausreichend...

1. Das Galerie-Template zu ändern und den <li> zusätzlich die Klasse "ítem" mitzugeben?
2. Anschließend noch das jQuery-Isotope-Template ins Layout einbinden, welches sich wiederum auf eine JS-Datei auf dem Server bezieht.

Ich würde daraus gerne ne Erweiterung basteln, wenn mir jemand sagen könnte wo ich die isotope.pkgd.min.js finden kann.


Wenn die Bilder allerdings alle gleich groß sein müssen, ist das immer noch nicht das Nonplus-Ultra. Das bleibt dann wohl weiterhin Google:
https://plus.google.com/photos/10302...CLG9kI7imo_6Fg


Edit: Bei diesem masonry ist es anscheinend doch möglich unterschiedliche Bildgrößen zu verwenden?!
http://iam.beyonce.com/tagged/my_work Da gibts auch Bilder im Hochformat, die perfekt eingebunden werden.

[Bas]

Auch bei Isotope.js kann man Motive in unterschiedlichen Größen haben - siehe http://isotope.metafizzy.co/layout-modes.html

Download isotope.pkgd.min.js -> http://isotope.metafizzy.co/isotope.pkgd.min.js

Und ja .. kostet was für kommerziellen Einsatz.

[Dirch]

Hallo hallo,

Isotope und Masonry stammen vom gleichen Autor. Masonry ist im Gegensatz zu Isotope unter MIT-Lizenz frei zu benutzen - auch kommerziell. Der Unterschied zwischen beiden ist, daß Isotope ein paar Layout-Arten (die man idR nicht braucht) und vor allem Sortierfuktionalität zusätzlich bietet (man kann Elemente ein-/ausblenden usw.). Von den eigentlichen Layout-Einstellungen unterschieden sie sich kaum.

Ich hab eine Isotope-Erweiterung rumliegen, aber dann doch lieber nur Masonry verwendet wegen der Lizenz und weil's 95% der Fälle abdeckt. Vor allem aber auch, weil wenn man's richtig machen will die Abbildung der Sortierungen unverhältnismäßig aufwendig wäre. Für umsonst hatte ich da keine Lust gehabt so extrem viel Zeit zu investieren. =)

[kubjo]

Hi Dirk,
gut daß Du Dich hier zu Wort meldest und Licht ins Dunkel bringst, was die Unterschiede der verschiedenen Versionen angeht.
Ich habe jetzt Deine Erweiterung nochmal ausprobiert, aber ich habe da ein Verständnisproblem:

Wenn ich mir die Beispielseiten von isotope und dann meine Beispielseite anschaue, bemerke ich einen Unterschied: Bei mir bleiben die Bilder alle in der gleichen Breite wie im BE in den Galerieeinstellungen bei "Bildbreite und Bildhöhe" , weil ich bei Bildbreite 250px eingegeben habe. So passen die Bilder schön untereinander, leider zu schön, denn den Charme den die isotope Galerie versprüht kommt m.E. daher daß die Bilder machmal gar nicht so richtig passen ;-) Ich weiß nicht, wo ich welche Breiten einstellen kann / muß, damit die Bilder in unterschiedlichen Breiten dargestellt werden. Die CSS Klassen, die ich im BE vergeben habe, scheinen nicht zu greifen, die Bilder werden immer mit 2px schmäler dargestellt als bei Bildbreite angegeben, was dem Zwischenraum entspricht.

Ebenfalls erschließt sich mit nicht, wie ich statt dem hellen Theme ein eigenes verwenden kann, und wo ich die entsprechendes CSS Datei speichern soll, damit ich sie im BE auswählen kann.

Grüße aus Ludwigsburg
Jochen

[kubjo]

Hi Leute,
nach dem ich gestern auf einen sehr interessaten Artikel über die neue CSS3 Eigenschaft "flexbox" gestossen bin, würde ich gerne mal auf diesem Weg versuchen eine schöne Galerie zu basteln. Leider stehen mir meine mangelhaften php Kenntnisse im Wege. Könnte sich jemand dazu bereit erklären mir da unter die Arme zu greifen? Mein Vorschlag wär,e das Template "responsive Galerie" soweit auszudünnen, daß die ganze Sache mit den Reihen weg fällt, da das hier über ddas CSS geregelt wird. Dazu müßte man den einzelnen Bilder noch eine Klasse mitgeben können und schon müßte es eigentlich funktionieren, vielleicht ;-)

Grüße aus Ludwigsburg
Jochen Kubik

[pumukel]

Hier mal ein Auszug aus meiner Lösung - dazu muss ich sagen, dass ich nicht mit den Contao-CSS etc. arbeite .. das Prinzip sollte aber trotzdem anzuwenden sein.

#main .inside .spalten3 ul li {
  width: 33.33333%;
  float: left;
  display: inline;
}
#main .inside .spalten3 ul li img {
  display: inline;
  float: left;
  width: 100%;
  height: auto;
}

Ich gebe meiner Galerie ne klasse mit .. in obigen Beispiel "spalten3" weil ich drei Spalten haben möchte. Der Rest sollte klar sein.
Das Ergebnis ist, das meine Galerie immer 3Spaltig ist ... egal wie breit der Container ist in dem die Galerie enthalten ist. die Größe der Bilder (und auch evt. Pixelgrößen im <img>) sind egal .. das einzige was nötig ist, ist es das Seitenverhältnis der Bilder anzugleichen, damit der Aufbau sauber ist.

Online findet ihr das Beispiel auf http://www.schönmussessein.de/blog-e...f_muffins.html .. siehe die Galerie im Content, wenn Ihr Euren Viewport auf unter 800 Pixel verkleinert seht ihr wie die galerie schrumpft (allerdings hängt dort auch noch ein Grid und einiges mehr dahinter .. das CSS oben habe ich auf das wesentliche reduziert)

Hallo Bas

Danke für diesen wunderbaren Hint. Funktioniert super! Da hab ich wieder einmal etwas dazu gelernt, siehe http://gkammermann.ch/contao_333_002...aerz-2014.html

Gruss aus Basel
pumukel

[iimagine]

Ich habe ein problem ich habe eine gallery mit vier fotos, 1 foto ist ein grosses und die anderen sind die kleinen, möchte gerne 2 fotos auf die reihe stellen, dass es automatisch eine neue zeile gibt mit wieder 2 fotos, jetzt geht alles auf eine zeile... ich kann die kleine bilder es heisst überall ime image_container jedes einzelne Bild.