9 ms·
The algorithm for a perfectly balanced photo gallery
- fsckin 13y agoThe 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. [0] http://www.chromatic.io/FQrLQsb http://www.chromatic.io/FQrLQsb
- 44Aman 13y agoI really like this, made a quick one with snaps from Angkor Wat in Cambodia: http://www.chromatic.io/lTOfsdP http://www.chromatic.io/lTOfsdP
- martin-adams 13y agoWhat'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!
- wingerlang 13y agoI agree, that looks very nice. I might be wrong here but I think the background is just the picture, although scaled and has got many filters on it.
- wtracy 13y agoThat'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. Very nicely done.
- ethanbond 13y agoRdio's app (rdio.com) also nails this.
- tericho 13y agoRdio does some fantastic design work. Just a shame their engineering is so bad that I can't even use the app.
- ethanbond 13y agoTheir 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.
- jtreitz 13y agoActually, 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.
- risratorn 13y agoNice catch ... it so subtle i didn't notice but none the less a very nice feature. Love the execution of their idea!
- sigkill 13y agoIt's almost but not quite entirely like the philips ambilight concept. I like it.
- jtreitz 13y agoHere's a follow up on that topic: http://www.crispymtn.com/stories/extrapolating-photos-for-immersive-zoom-views http://www.crispymtn.com/stories/extrapolating-photos-for-im...
- chanux 13y agoFor some reason I was expecting (perfectly) balanced files of a photo gallery on disk. What I actually got was equally interesting though.
- quarterto 13y agoI 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 agoThat looks pretty nice too! Congrats on the wedding!
- pubby 13y agoI'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 agoMaybe 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 agoI end up with some of the photos ending up behind other photos. Firefox 23 here.
- emilw 13y agoMaybe 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?
- emilw 13y agoGranted, maybe pinterest is a bad example in regards to optimum page filling.
- moron4hire 13y agohe 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.
- kaffeinecoma 13y agoYou'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?
- brianbreslin 13y agoI would love to see chromatic as a service I can pay for, maybe sell me a wordpress plugin?
- anonymoushn 13y agoIs it supposed to reload previously viewed images when the user scrolls up or down?
- jtreitz 13y agoYes, 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.
- tech-no-logical 13y agothat looks very good, but navigating with the 'back' button breaks the app. tested on FF24 / opera 15.
- hijinks 13y agoback button also breaks it in chrome 28 on a mac
- kenster07 13y ago"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.
- jwarren 13y agoGreat post with gorgeous results. The service is really very nice too! Fantastic work. Question: will you ever implement profiles or permanent galleries?
- colinm 13y agobtw this breaks zoom.
- user24 13y agoYour comment is almost useless. On which browser? Which operating system? What do you expect to happen? What actually happens? http://www.chiark.greenend.org.uk/~sgtatham/bugs.html http://www.chiark.greenend.org.uk/~sgtatham/bugs.html
- PavlovsCat 13y agoBug 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.
- ionelm 13y agoNot only that it breaks zoom, at certain window ratios (eg: 480x800) is completely fails - I get this error: TypeError: solution[(n - 1)] is undefined @ http://www.chromatic.io/application.a3c7ec1cbcca0f5a77fbc1dc0cb590c7.js:735 http://www.chromatic.io/application.a3c7ec1cbcca0f5a77fbc1dc... I've done stuff like this in the past, if you want something that works: https://github.com/ionelmc/jquery-gp-gallery https://github.com/ionelmc/jquery-gp-gallery
- jongleberry 13y agoi 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 https://github.com/jonathanong/linear-partition
- andrewingram 13y agoIt 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?
- solarexplorer 13y agoIf you prefer portaits: use columns instead of rows and scroll horizontally instead of vertically. If you want to avoid the bias you have to try something else: e.g. reorder the images, overlap them, convert to square format…
- eru 13y agoYou can also use free placement, i.e. not restricted to either rows or columns.
- phoboslab 13y agoMaybe 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 :) [1] http://phoboslab.org/files/grid-solver/demo/ http://phoboslab.org/files/grid-solver/demo/
- robotmay 13y agoI actually have the opposite problem on https://www.photographer.io/en/photographs/explore 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.
- maio 13y agoWe tried to give portrait photos more space by using column layout @ http://www.thephotoduel.com/top-photos http://www.thephotoduel.com/top-photos
- grumps 13y agoOnly the title loads on Chrome in Android 4.2.2
- kmfrk 13y agoCounting down to when Marissa Meyer pulls the acquisition trigger ... :)
- 8ig8 13y agoWordPress recently added 'Tiled' galleries via their JetPack plugin. It seems like a similar approach. You can see an example gallery here: http://ma.tt/2013/07/jay-z-picasso/ http://ma.tt/2013/07/jay-z-picasso/ Additional info: http://jetpack.me/support/tiled-galleries/ http://jetpack.me/support/tiled-galleries/ Code: https://github.com/crowdfavorite-mirrors/wp-jetpack/tree/master/modules/tiled-gallery https://github.com/crowdfavorite-mirrors/wp-jetpack/tree/mas...
- medell 13y agoThis completely missed my radar back in May. Much appreciated.
- salberts 13y agoThe gallery layout can be seen in G+ for a while now. But the ambient effect in full-screen mode is awesome!
- baerbradford 13y agoI 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. http://wwwstu.tcu.edu/baerbradford/tiles.html http://wwwstu.tcu.edu/baerbradford/tiles.html
- nkuttler 13y agoCan 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..)
- hadem 13y agoPerhaps 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.
- zodiac 13y agoI think it's so that they can use css media queries. Here's a list of pros and cons for div background vs img tags: http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image http://stackoverflow.com/questions/492809/when-to-use-img-vs...
- myfonj 13y agoIt is hard not to mention series of articles [0] on the same topic by Christopher 'vjeux' Chedeau [1] in this context. [1] http://blog.vjeux.com/?s=%22Image+Layout+Algorithm%22 http://blog.vjeux.com/?s=%22Image+Layout+Algorithm%22 [0] https://news.ycombinator.com/user?id=vjeux https://news.ycombinator.com/user?id=vjeux
- sergiotapia 13y agoWhy not use Masonry or Isotope? http://masonry.desandro.com/ http://masonry.desandro.com/ http://isotope.metafizzy.co/ http://isotope.metafizzy.co/
- CaveTech 13y agoBecause those don't horizontally balance.
- fangel 13y agoI 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/ http://fangel.github.io/packing-images-in-a-grid/
- blt 13y agoGiven 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...
- gbog 13y agoSince 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.
- uptown 13y agoBy "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.
- Mgccl 13y agoSince I'm a CS theory person, I can offer some theoretical improvements on the running time and make the problem even more general... Instead of minimize the linear difference of partition, we might want to minimize the standard deviation, or basically any convex function, and still do it in the same time bound. One can reduce this problem to find a k-edge path of minimum weight on a complete DAG. The naive algorithm will run in O(kn^2), but we can improve the running time to O(kn) by realize the weight on this DAG has the Monge property. This is very practical to implement. I posed it as a problem on daily haskell exercise http://dailyhaskellexercise.tumblr.com/post/58060450750/the-minimum-weight-path-of-length-k-in-a-dag-with http://dailyhaskellexercise.tumblr.com/post/58060450750/the-.... In this application, k is very large. n is just a constant multiple of k. We can use a theoretically better algorithm that takes n2^O(sqrt(log n loglog n)) time. (this is almost O(n^(3/2))). I doubt it will ever be implemented with speed comparible to the O(kn) solution. See http://www.cs.ust.hk/mjg_lib/bibs/DPSu/DPSu.Files/sdarticle_204.pdf http://www.cs.ust.hk/mjg_lib/bibs/DPSu/DPSu.Files/sdarticle_... I shall post a solution tomorrow since I'm currently touring NYC with my gf...
- celwell 13y agosounded legit until that last word. sure...
- anonymoushn 13y agoWhat is a complete DAG? Can I create one by just taking a complete graph, choosing an arbitrary ordering of the vertices, and assigning each edge a direction according to that ordering? Edit: after reading the problem statement, yes, I can.
- jongleberry 13y agoa solution would be awesome, especially in javascript. i actually found a case where their linear algorithm, https://github.com/crispymtn/linear-partition https://github.com/crispymtn/linear-partition, failed.
- Mgccl 13y agoSee the updated content in the link and the code in here http://www.chaoxuprime.com/posts/2013-08-16-more-algorithms-on-perfectly-balanced-photo-gallery.html http://www.chaoxuprime.com/posts/2013-08-16-more-algorithms-... Both in Haskell. you can see how to implement it from scratch...
- shaaaaawn 13y agoVery nice! Thanks.
- bane 13y agoSide-topic. Shooting Holi [1] without putting your camera in an airtight sealed enclosure is a good way to ruin your equipment. http://en.wikipedia.org/wiki/Holi http://en.wikipedia.org/wiki/Holi http://www.lensrentals.com/blog/2013/05/how-to-ruin-your-gear-in-5-minutes-without-water http://www.lensrentals.com/blog/2013/05/how-to-ruin-your-gea...
- coldtea 13y agoYou must be fun at coloured powder throwing parties...
- ynniv 13y agoRuining your camera isn't especially fun either.
- PavlovsCat 13y agoEven just seeing the images of those lenses hurt a little. I'm glad for the heads up, really.
- bane 13y agoIn most cases, the lenses are the expensive part of the camera kit as well.
- gknoy 13y agoGiven that that article says that the supposedly-sealed lenses were also vulnerable, do you have advice on how one would successfully enclose a lens to protect it from the dust?
- PavlovsCat 13y agoThere is waterproof casing (I mean for diving, not spray water), - I would hope that's enough? I don't know for sure though, so please don't take my word for it.
- ChuckMcM 13y ago
- EGreg 13y agoThis is why I always preferred vertical masonry. Sites such as VKontakte, Google Image Search, and the recent Flickr app tile things horizontally, but this sometimes means you have to crop the images to fit into your masonry. Not so with vertical masonry, which you can just resize to have constant width.
- jmathai 13y agoVertical masonry doesn't work well to communicate an ordered list of items. Photos are often just that...a story of an experience that happened chronologically. The inability to read left to right on columnar data makes this really hard.
- EGreg 13y agoIf something really happened chronologically, then perhaps it's acceptable to have a horizontal scrollbar, or not right-justify the right edge. This particular algorithm seems to mix up the order of the photos in order to best fit them on a line, so it can hardly be said to show chronological order.
- mcgwiz 13y agoIt looks nice (much like Google Image results) but IMO it's not "equally distributed". For example, an image that has dimensions 800x531 gets ~2.3x the space as one with dimensions 531x800. That arbitrarily incentivizes/rewards landscape photos w.r.t. portraits. "Equally-distributed" would probably require an algorithm that works mosaically (without row constraints) and couldn't achieve "taking up all the space available [in a rectangular region]". Still, looks nice.
- joebo 13y agoThis works well when the photos are not time sequential. I find it harder to follow the story when the photos are ordered by the partition fit instead of the time taken. It would be neat to optionally incorporate time into the algorithm.
- ionforce 13y agoWell it would have to be some sort of flexible time constraint. Otherwise the photos are already ordered.
- jtreitz 13y agoWe do not change the order of the photos, we just try to find a good set of breaking points inside that order. Actually, Chromatic tries to read the EXIF "DateTimeOriginal" information to sort the photos and falls back to the "LastModifiedDate" if the former doesn't work.
- glogla 13y agoIs there some kind of static gallery generation software that can do something like this?
- alariccole 13y agoI've studied this a great deal, and developed a custom masonry type layout to mitigate the row/column bias. I believe it is a much more balanced layout than the article shows. Using it in Imagist, a paid app. Open to a few beta testers for iOS 7 as well, if you want to judge for yourself.
- lsinger 13y agoYes, please?
- alariccole 13y agoTestflight for iOS 7: http://tflig.ht/WwNYgp http://tflig.ht/WwNYgp
- bradleyjoyce 13y agofor iOS only or also web?
- alariccole 13y agoIt was for iOS.
- dgreensp 13y agoThis looks like a pretty slick, mobile-compatible photo gallery, but without the code it isn't very useful. They talk about Chromatic like a real product, but "free web service" basically means "demo".
- bestham 13y agoI would love for the code to be released, something similar and selfhosted with a simple static backend (or my favorite: Kirby) would live on any low end box. Please consider selling the design and assets on Themeforest.
- normalocity 13y agoAnyone else in this thread think that this blog post covers a painfully trivial calculation problem? What's next - someone's going to write a full blog post to explain to me how to perfectly toast my toast using these visual sensor things that seem to be built into my head (eyes)?
- adventured 13y agoInterestingly when I load up their demo gallery at: http://www.chromatic.io/FQrLQsb http://www.chromatic.io/FQrLQsb and click on one of the images to enlarge it, then click again to drop back into the gallery view, the gallery breaks horribly (about 1/3 of the images vanish). FF 22 on Windows 8
- jongleberry 13y agoi made a library for this: https://github.com/jonathanong/horizontal-grid-packing https://github.com/jonathanong/horizontal-grid-packing