5 ms·

I just implemented pretty much the same thing from scratch for my wedding gallery¹. For each row, it tries 3-10 images, sums their aspect ratios, divides the t

I just implemented pretty much the same thing from scratch for my wedding gallery¹. For each row, it tries 3-10 images, sums their aspect ratios, divides the total row width by the sum to get a candidate height, then picks the height that's closest to the average of the existing rows. To make things look a bit nicer, it rejects candidate rows with the same number of images as the last row. I might release the code on Github if I can make it modular enough. Currently it depends on jQuery but that's really only for element creation. ¹ http://mattandsophiegetmarried.com http://mattandsophiegetmarried.com, I'm the guy with the waistcoat, purple cravat and massive grin.

jtreitz 13y ago
That looks pretty nice too! Congrats on the wedding!
pubby 13y ago
I'm not seeing any images on Chromium. Just a blank white screen with "Matt & Sophie's wedding photos" at the top. Congrats on the wedding though.
- sdoering 13y ago
  Maybe Chromium is blocking the redirection to cloudfront, where the images are hosted? I had to tell Firefox's RequestPolicy, to let these requests pass...
FreeFull 13y ago
I end up with some of the photos ending up behind other photos. Firefox 23 here.
- nl 13y ago
  Me too, Chrome 28.0.15
- aestra 13y ago
  Same in Firefox 22. Scrolling seems broken, and removing the "find on page" part of Firefox clears all the images.
- PavlovsCat 13y ago
  Same for me in FF25 (Aurora), and Opera Next 16.
hobbsy 13y ago
For me it displayed white rectangles initially - but disabling Adblock extension on Chrome worked (looks great). However if you then resize the window it seems to make all the images disappear (?)
- quarterto 13y ago
  It's lazy-loading the images (otherwise, BAM 30MB download). The blank screen thing is the resize handler breaking. I'm looking into it.
wicknicks 13y ago
Congrats! The photos didn't appear correctly aligned though -- some 70-100px "whitespace" at the right edge of the screen. And resizing the screen removed all content. edit: I'm using Firefox v22 on Xubuntu.

jtreitz 13y ago

That looks pretty nice too! Congrats on the wedding!

pubby 13y ago

I'm not seeing any images on Chromium. Just a blank white screen with "Matt & Sophie's wedding photos" at the top. Congrats on the wedding though.

sdoering 13y ago
Maybe Chromium is blocking the redirection to cloudfront, where the images are hosted? I had to tell Firefox's RequestPolicy, to let these requests pass...

FreeFull 13y ago

I end up with some of the photos ending up behind other photos. Firefox 23 here.

nl 13y ago
Me too, Chrome 28.0.15
aestra 13y ago
Same in Firefox 22. Scrolling seems broken, and removing the "find on page" part of Firefox clears all the images.
PavlovsCat 13y ago
Same for me in FF25 (Aurora), and Opera Next 16.

hobbsy 13y ago

For me it displayed white rectangles initially - but disabling Adblock extension on Chrome worked (looks great). However if you then resize the window it seems to make all the images disappear (?)

quarterto 13y ago
It's lazy-loading the images (otherwise, BAM 30MB download). The blank screen thing is the resize handler breaking. I'm looking into it.

wicknicks 13y ago

Congrats! The photos didn't appear correctly aligned though -- some 70-100px "whitespace" at the right edge of the screen. And resizing the screen removed all content. edit: I'm using Firefox v22 on Xubuntu.