Playing with image layouts
Do you remember Indexhibit? I’m very fond of it. It’s a wonderfully simple CMS for presenting visual work.
Indexhibit shines the light on the work itself, because visually it’s not trying to be interesting. It doesn’t look “designed”, and it doesn’t try to communicate much beyond the idea that it’s the work that matters.
I love its simplicity. The generic template that Indexhibit popularised made portfolio sites easy to use, but eventually fell out of favour. Time passes, trends change.
I wanted to compile a list of all layouts used by Indexhibit, but finding examples in the wild is tricky. The CMS cannot be downloaded any more, so instead I began researching portfolios which present the work in a simple, but slightly more unusual way. I was interested in image layouts that don’t necessarily have a hierarchical structure (something that one of the Indexhibit’s grid layouts did very well).
I found a few examples that used random (or seemingly random) image placement to simulate lack of hierarchy.
I was curious about automating a layout like that. How would it work if it were a part of a CMS, where you could never know how many images were going to be shown, and what their dimensions and orientations would be? How could you make it responsive?
Moodboard resizes the images depending on the available space and the number of images to show. By its nature it’s already responsive, no additional tweaking necessary.
It has a reasonable CSS only fallback for situations when JS can’t be executed, and it’s only 7KB before minifying and gzipping. Download Moodboard here.