The demo [0] is pretty impressive. Photo sites like Instagram and 500px give a fixed ratio, while flikr does nothing quite appealing as this. Nice work.
What's just as impressive is the full size view of the image. The background brings the ambient colour of the photo to make it more immersive. Very nice!
That's an idea I've actually seen done but executed poorly many times.
What they got right this time is adding the shadow around the image making it easy to distinguish from the background, and blurring it so heavily that none of the detail is distracting.
Their design is just fantastic - especially with the latest update which added better Stations support. When it was first released it was wicked snappy and kind of slowed way down for a while and got annoying - agreed.
In the past month or two, though, it's gotten damn responsive (for me at least). Give it another shot if you haven't used it recently.
Actually, you're right! It's the same picture, scaled down to around 500x500 and with a heavy gaussian blur applied to it. The trick is to have a subtle grain effect over it to eliminate gradient artifacts.
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.
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...
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.
Maybe I'm missing the point but why is this an achievement? I've seen Google images do this for years (from the backend, sends the users viewport dimensions and then automatically calculates the optimum filling). For years (Warning NSFW!) vusker.com has been doing this client-side in their thumbnail and gallery view. Plus look at the vertically stacked posts from Pinterest.
It seems more a marketing ploy to get attention to the great service chromatic.io is providing?
he writes an excellent example of why "all that computer sciency stuff" is usefull in day to day programming, yet still wants to take pride in his ignorance, like this is some strange sort of fluke.
You're being a little harsh here. I think he was actually trying to impart the idea that it's worthwhile to have a foundation in CS, even if you don't necessarily work on deep algorithmic code every day. He drew on some (perhaps foggily remembered) CS background to successfully solve a problem, so why knock him?
Yes, we figured the page scrolls slow if there are too many photos in the DOM at the same time so the lazy-load-function also removes them when out of scope.
"Remember the days in college when you learned all about the big Oh!'s and re-implemented all these sort-algorithms for the hundredth time? If you are a web developer like me, chances are you never had to touch a single one of these algorithms ever again." +1
It's a good start, but when the window is shrunk, the result isn't as impressive.
Bug reports can only be as useful as the people who receive them. Try zooming with any browser; you'd expect it to, hum, zoom, but what actually happens is that after zooming, the pictures get resized again, so no matter how you zoom, it always looks the same.
i think i found the problem with the algorithm. sometimes it returns an empty row. the javascript version throws while the python version doesn't. i fixed it in my fork by just reducing the number of rows until it doesn't throw: https://github.com/jonathanong/linear-partition
It like how it looks, but much like Flickr I dislike how it's biased towards landscape pictures. Some of my best photos are portrait, but they get overshadowed by the landscape ones.
I imagine the algorithm to cater to both is much harder, because you wouldn't be able to treat each row in isolation, can it actually be solved to a good standard?
Maybe something like my grid solver[1] would do. Thumb sizes must be chosen beforehand, but you could specify just 2 classes: one for portrait, one for landscape.
I haven't touched this code in almost 6 years now, so don't expect too much :)
I actually have the opposite problem on https://www.photographer.io/en/photographs/explore. I liken it to the idea of rows vs. columns; Flickr and this are organised in rows, and Photographer.io/Pinterest etc are in columns. I've had people put their votes in for both, so I'm not sure which is the best option really. And I certainly don't think I've got it right as it is at the moment.
I made something similar a while back to generate backgrounds on a music website. I took a different approach, and it's not as clean. If anyone is interested to see a different attempt, take a look at the JS.
Can sombody tell me why this uses the photos as background images for divs? It seems to me like this gallery could also use img tags (which is semantic, crawlable, yadda..)
Perhaps to avoid easily right clicking the image and saving it to your machine? I know it is still easily downloadable, but not so much for a lot of users.
I too made something similar recently. I decided to use dynamic programming. This way it's easy to ensure that you don't end up with a half row at the end. It also doesn't require changes to the ordering of the images.
http://fangel.github.io/packing-images-in-a-grid/
Given that clear textbook explanation and he decided to port a Python implementation instead of writing it from scratch? What a waste of an opportunity for a fun day at work...
Since when it is ok to suppose visitors know to click the escape key to go back. And where is the link to go up to the gallery. I had to mess with the url or I was gone for a long back button session. Morevoer it is very slow.
Just to add some negativeness to the generaly positive comments here.
By "go back" i'm assuming you're referring to closing a full-size image. I've found three ways they can do this. They can press ESC. Click the image itself. Or click in the negative space surrounding the image excluding the "Previous" and "Next" regions.
Doesn't really seem like a huge issue since there are multiple ways to accomplish the objective, though I suppose a small "X" could be added if you wanted a visual cue.
103 comments
[ 2.8 ms ] story [ 166 ms ] thread[0] http://www.chromatic.io/FQrLQsb
I might be wrong here but I think the background is just the picture, although scaled and has got many filters on it.
What they got right this time is adding the shadow around the image making it easy to distinguish from the background, and blurring it so heavily that none of the detail is distracting.
Very nicely done.
In the past month or two, though, it's gotten damn responsive (for me at least). Give it another shot if you haven't used it recently.
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, I'm the guy with the waistcoat, purple cravat and massive grin.
Congrats on the wedding though.
However if you then resize the window it seems to make all the images disappear (?)
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.
It seems more a marketing ploy to get attention to the great service chromatic.io is providing?
It's a good start, but when the window is shrunk, the result isn't as impressive.
Question: will you ever implement profiles or permanent galleries?
http://www.chiark.greenend.org.uk/~sgtatham/bugs.html
I've done stuff like this in the past, if you want something that works: https://github.com/ionelmc/jquery-gp-gallery
I imagine the algorithm to cater to both is much harder, because you wouldn't be able to treat each row in isolation, can it actually be solved to a good standard?
If you want to avoid the bias you have to try something else: e.g. reorder the images, overlap them, convert to square format…
I haven't touched this code in almost 6 years now, so don't expect too much :)
[1] http://phoboslab.org/files/grid-solver/demo/
http://ma.tt/2013/07/jay-z-picasso/
Additional info: http://jetpack.me/support/tiled-galleries/
Code: https://github.com/crowdfavorite-mirrors/wp-jetpack/tree/mas...
http://wwwstu.tcu.edu/baerbradford/tiles.html
[1] http://blog.vjeux.com/?s=%22Image+Layout+Algorithm%22 [0] https://news.ycombinator.com/user?id=vjeux
http://masonry.desandro.com/
http://isotope.metafizzy.co/
Just to add some negativeness to the generaly positive comments here.
Doesn't really seem like a huge issue since there are multiple ways to accomplish the objective, though I suppose a small "X" could be added if you wanted a visual cue.