ImageGrid erstellen - interdisziplinär

[chmee]

Nun denn, ich habe im Netz auf einer recht bekannten -aber inhaltlich problematischen- Picdump-Seite ein schickes Imagegrid gesehen. Das Ziel wäre die Erstellung eines Haufens von Bildern ohne Restflächen dazwischen. Wie haben die das geklärt, wie würdet Ihr das machen, gibt es dazu schon Ansätze ?

Sucht bitte in nach
upload your this site is powered by Otherwise we will report your data to the police
Der Name hat was mit ZahlGeschlechtsreifheit zu tun.

Auf Anhieb sehe ich dort eine Aufteilung in mehrere Grundeinheiten. Nur wie sind zB größere und kleinere Bilder bzw. Formate da sauber zu vereinen ?

Also, die Lösung zu dem Problem möchte ich letztendlich für eine Webseite benutzen, aber das Problem an sich ist allgemein, da es um einen Algorithmus geht.


mfg chmee

 

[Hektik]

Ich denke nicht, dass die Bilder nach ihren Dimensionen und einer bestimmten Vorgabe her zusammengesetzt werden.

Viel eher halte ich es für realistisch (und ein paar Mausklicks auf der Seite bestätigen meine Theorie), dass die Thumbs einfach mit einem festen Seitenverhältnis gecropt sind und so dann zusammen passen. Du kannst unschwer erkennen, dass die größeren Seitenlängen immer ein Vielfaches der kleinsten Seitenlänge ist. Ist also mehr dahinter vermutet, als wirklich ist

 

[chmee]

Hmm, ich hab mal was ausprobiert (der tut-Server musste meine ständigen Anfragen in der letzten halben Stunde einfach mal hinnehmen). Im Grunde genommen einfach nur die drei ersten Seiten des Showrooms nach Bildern abgegrast und die in 3 Divs übereinandergelegt. Diese 3 Divs waren in ein Hauptdiv gepackt, welches ich mit overflow:hidden; begrenzt habe.



Ist ein erster Versuch, könnte aber als weitere Landingpage für tutorials ganz witzig sein. Sind noch keine Links drauf und auch die gefundenen Bilder müssten nochmals geshuffelt werden.

p.s.: @Hektik : Ja, ich hätte einfach mal 2-3 Minuten länger drauf schauen müssen.

mfg chmee

 

[Dr Dau]

Hallo!

Ein gewisses Muster steckt schon da hinter.
Z.B. gibt es ein "Grundmass" von 64*96px, aus diesen ergeben sich die anderen Grössen.....
128*96 (2-fache Breite/1-fache Höhe)
128*192 (2-fache Breite/2-fache Höhe)
192*288 (3-fache Breite/3-fache Höhe)
Kann sein dass da noch Grössen fehlen..... auf jedenfall aber wurden für diese Grössen separate Verzeichnise angelegt, in denen die Thumbnails liegen.
Wenn nun z.B. ein Thumbnail aus dem Verzeichnis 192x288 in ein DIV mit der Grösse 64*96 px gepackt wird, wird es beschnitten (ist dank dem verwendeten background-image:url() kein Problem).

Die Thumbnails wechseln allerdings ihre Position.
Es sieht so aus als wenn die Thumbnails mit jedem neu hochgeladenen Bild eine Position weiter wandern würden.
Ich bin mir nicht sicher, aber es sieht so aus als wenn die DIV-Elemente ihre Position beibehalten würden (die sind also nach einem bestimmten Schema fest angelegt).

Die Pfade setzen sich auch nach einem festen Schema zusammen:

Thumbnail: http://thumbs.domain.tld/Thumbnailgrösse/1/2/3/4/5/12345blablub.jpg
Original: http://domain.tld/Verzeichnisname/1/2/3/4/5/12345blablub.jpg

"Thumnailgrösse" steht für die oben genannten Grössen.
"Verzeichnisname" steht für ein sich nicht ändernden Verzeichnisnamen.
Die Zahlen stehen für die ersten 5 Zeichen vom Dateinamen, sind also variabel.
Hier wird also ganz offensichtlich mit mod_rewrite gearbeitet (ich glaube jedenfalls nicht dass für jedes einzelne Bild eine komplette Verzeichnisstruktur fest angelegt wird).

Prinzipiell dürfte es also nicht schwer sein zumindest etwas ähnliches nachzubauen.

Allerdings bleibt eine Frage offen: nach welchen Kriterien werden die Thumbnails erstellt?
Hochformat/Querformat dürfte selbstredend sein.
Aber wann wird ein kleines Bild stark und wann nur wenig verkleinert?
Und wann wir ein grosses Bild stark und wann nur wenig verkleinert?
Nach dem Zufallsprinzip?

Gruss Dr Dau

 

[mahe]

Was mich auch etwas fasziniert ist, dass sich die Seite anpasst wenn man das Browserfenster verkleinert/vergrößert und der rechte Rand immer sauber bleibt.

 

[chmee]

Hier Offtopic, und über ein eigenes Div ganz einfach zu lösen.

mfg chmee