Add image gallery with grid layout to page

Highlighted
Tourist
5 0 2

Hi all,

I want to add an image gallery to one of my pages. Currently when I try to add images to the page, it displays in a singular column. However, I would like it to display as a grid layout, similar to a photo album, with thumbnails that you can click and view. 

Does anyone know how I would go about doing this? 

Thanks,

Sandra

0 Likes
Highlighted
Shopify Partner
8 0 0

Hi Sandra,

There is a number of ways to do this. Some are easier than others. Also some are better than others. In the old days, I used to recommend that you use a table and put your images inside the individual cells. This is the easiest solution because it will allow you to view your images through the wysiwyg editor and will require no coding.

The second option is a little more advanced but is a cleaner solutions. I recommend creating a new page template called. page.gallery.liquid. Then on that page add a div.

ie: <div class="gallery-page">{{ page.content }}</div>

Then in your CSS style sheet, ( Typically styles.css ) add the following styles.

.gallery-page img {

float:left;
padding:1em, 1em, 0, 0;

};

If all your images are the same size the should snug up against each other and layout in a nice grid.

Hope this helps.

Jody

 

0 Likes
Highlighted
Tourist
5 0 2

Thank you, Jody. That was very helpful!

 

0 Likes
Highlighted
New Member
4 0 0

Hi there,

Thanks for this - it has worked for me. But how to I make sure that I get three columns in the grid rather than two?

Thanks very much

Tom

0 Likes