Bilder platzsparend und übersichtlich anordnen

[dereo]

Liebe Community!

Ich kämpfe seit einiger Zeit mit dem Versuch, Bilder unterschiedlicher Abmessungen in eine eher erträgliche Formatierung zu bekommen. Mittlerweile habe ich ein paar Galerie-Erweiterungen und auch die Erweiterung dk_masonry versucht, aber ich komme nicht zu dem gewünschten Ergebnis. Bitte verzeit meine Zeichenkünste aber so ca. wie im Anhang sollte das Endergebnis aussehen. (vor allem zwei rechteckige Bilder horizontal übereinander machen mir echte Probleme).

anordnung_bilder.png

Vielen Dank für eventuelle Vorschläge!

[Spooky]

Dafür wäre Masonry eigentlich gemacht. Was genau passt dann nicht?

[dereo]

Danke für die Rückmeldung!
Nun ja, bei Masonry habe ich das Problem mit dem Rahmen um die Fotos herum (die Spalten zwischen den Bildern respektive Rahmen kriegt man leichter weg), der automatisch eingeblendet wird. Dadurch werden z.b. zwei horizontal übereinander liegende Bilder insgesamt größer und passen dadurch wieder nicht zu einem querformatigen Bild.. dadurch verschiebt sich bei mir wieder alles was in eine Reihe soll. Und dadurch sind auch die Abstände zwischen den Bildern ziemlich riesig.
Die Grundeinstellungen meiner Layouts (in einem Fall z.b. 90% Breite) sorgen für die nächste Problematik: zum linken und zum rechten Bildschirmrand ist ein teilweise sehr großer (zumindest etwas größerer) Abstand und die Bilder liegen nicht mit dem Header oder einem horizontalen Menü ungefähr auf einer senkrechten Linie.

edit (3.3. 8:00)

was ich bis jetzt zusammenbringe, ist das screen_masonry.jpg

[Spooky]

Das hört sich aber nach CSS Problemen an und nicht nach einem grundsätzlichen Problem mit Masonry. Gibt es einen Link zur Seite?

[dereo]

Schönen guten Morgen!

Bin gerade dabei, die alte Seite mit fixer Layoutbreite in eine sich am Bildschirm anpassende zu verwandeln - daher sieht alles noch etwas wackelig aus.

Link zur betreffenden Seite [link entfernt]

[Spooky]

Naja, du musst dir hier ein Grid System überlegen und den richtigen Bildern die richtige Grid Größe zuordnen. So wie ich das aus deinen Anforderungen herauslese brauchst du 1x1, 1x2 & 2x2. Ich habe das mal hier nachgebaut: http://www.inspiredminds.at/files/mi...s/masonry_test

Ich glaube am besten ist, du verwendest nicht die dk_masonry extension sondern:

• Du bindest masonry.js selbst ein
• Du verwendest einen eigenen Wrapper für dein masonry (entweder mit der semantic_html5 Extension oder über normale HTML Elemente)
• Du verwendest ein HTML element für das .grid-sizer Element
• Du verwendest reguläre Bild Content Elemente und gibst denen noch zusätzlich die grid Klasse
• Statt mit itemSelector: ".item" initialisierst du das Masonry dann mit itemSelector: ".ce_image" bspw.

Für den Stil den du verwenden willst brauchst du aber evt. noch zusätzliche Wrapper bei jedem Bild, sonst wird es mühsam.

[dereo]

Danke Danke Danke, das wäre genau das, was ich gesucht und mir vorgestellt habe.
Leider ist die Vorgehensweise für mich als Neuling zu 90% eine unbekannte Fremdsprache und ich bezweifle, dass ich das hinbekomme. Versuchen werde ich es jedoch auf jeden Fall!

Beste Grüße!