0

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 Apr 24 '14 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 Apr 25 '14 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. – Jeremy Gimbel Apr 25 '14 at 16:37
3

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.

| improve this answer | |
  • This is good. I'd add that using Channel Images from DevDemon can help organize and categorize your images from different channel entries. – Stephen Callender Apr 24 '14 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 Apr 25 '14 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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