One thing I've noticed when working with Expression Engine, is that when image galleries are created, with images being loaded dynamically from a channel, the images tend to be the same size dimension and so the end result is an equal grid.

Equal thumbnail grid example

There's absolutely nothing wrong with this, but having used this method/layout for so long site after site, I thought I would venture out a bit and see if anyone out there with a bit more know-how could explain 1. If it's possible and 2. how I could go about creating a dynamic gallery with a similar layout to the following example;

Multi-sized thumbnail example

I'm unsure how possible it would be to replicate this effect from say, an Assets field full of multiple images. I suppose multiple images being pulled through this way would have a uniformed formatting, such as height and width etc, therefore creating an equal grid layout

I'm aware of plugins such as isotope and masonry which achieve this kind of desired effect. But are those sorts of plugins the only way around?, besides hard coding the images with set widths and heights (which could impact a responsive site).

My gut tells me that it would be tricky to pull through multiple images dynamically from a channel and arrange them in this way. But hey, maybe I'm missing something obvious. That's why I'm asking I guess.

Any advice, as always, is much appreciated.

  • 2
    This question appears to be off-topic because it is about front-end development, not ExpressionEngine.
    – kmgdev
    Commented Apr 24, 2014 at 23:50
  • @kgrote Apologies, but I tried to focus the question around getting this kind of layout of different sized images using data from a channel field.
    – Adam
    Commented Apr 25, 2014 at 14:28
  • You can configure image manipulations in any size you want for file upload directories. The placement of the images though is unrelated to EE. Commented Apr 25, 2014 at 16:37

1 Answer 1


I've had great experience with masonry very simple to implement and is responsive as well.

If you are wanting categorized photos i would set up a single channel for each image. That way you could categorize the images and display different ones depending on the filter that is activated on the site. I wouldn't put a set hight and width to the images with css set the img property to width:100%; and it will fit the to the parent element horizontally. Then with masonry it will fit the parent elements into a mortar style layout like you have above.

I have done a few times and it works great not only with photo galleries but blogs as well.

  • This is good. I'd add that using Channel Images from DevDemon can help organize and categorize your images from different channel entries. Commented Apr 24, 2014 at 11:34
  • Thank you for the feedback guys. I'm aware of both your suggestions. I will look further into both and see if I can make progress. Cheers
    – Adam
    Commented Apr 25, 2014 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.