Gallery - how to make responsive?

[jospanner]

Please can anyone give me some pointers as to how to make the Gallery responsive so the thumbnails and enlarged images adapt according to the screen size?

All works fine on a desktop and it won't take notice of any media queries like other page templates.

Advice most appreciated.

[velden]

What would you expect 'the' Gallery itself to do?

How do you solve it with those 'other page templates'.

Gallery module actually does some initial resizing for you. It does not have the possibility to serve more than one thumbnail size plus the original uploaded image (which max size you can define globally).

CGSmartImage modules has some intelligence regarding serving smaller sized images for responsive pages. Maybe it can do the magic for you.

[jospanner]

Thanks Velden.

I was hoping there was somewhere you can overwrite the default image sizes but maybe CGSmart Image is the answer. I shall look into that further. Thanks for the tip.

Now to work out how to get the Gallery and Smart Image to connect!

[velden]

Just curious: how do you get those other image sizes in your normal templates?

[jospanner]

I don't put sizes - I use the WYSIWIG and remove the image sizes and then it adapts accordingly.

[velden]

Well, you can control that in the Gallery template of course.

[jospanner]

Yes but it needs to be an adaptive size not a fixed size.

[velden]

I am not aware of the methods used to make image smaller server sized based on media queries.

Of course, images can displayed every size you like, but they are then resized by the browser. CGSmartImage can do a real, server resize (actually it does that by default). Have a look at that module's help and options. I never used it myself.

[CapereSpiritum]

Hi Guys

If of any use, just use CSS to resize #divName img either by percentage or in stepped sizes for each @media.

Although lots to do, here's a site where the top image needed to resize according to page width.

My CSS for size by percentage of width

Code: Select all

#HeadBG {width: 100%; height: auto}
#HeadBG img {width: 100%; height: auto}