Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

Ian Mackenzie
Ian Mackenzie
11,062 Points

Arrange images in a folder into a responsive Photogallery grid

I have a bunch of images in a folder that I want arranged into a grid. What is the best way to do this. Simple CSS in a table or floats or Javascript?

Colin Marshall
Colin Marshall
32,861 Points

Does your website already have a responsive grid? I would stay away from tables.

Ian Mackenzie
Ian Mackenzie
11,062 Points

There are two parts to the website. The standard pages have been done in Adobe Muse which uses a 960 grid. The section I'm referring to in my question has images uploaded by Lightroom but the galleries are not responsive or fluid.

I thought I would add my own CSS or JavaScript to these pages to make them fluid. Each gallery has it's own folder, So the short answer is, no there is no grid on these pages but I can add one as I've had that training however, as the images are not data base driven I'm wondering how I will arrange the images so that when they are uploaded to the folder, the images are then fetched for that page and arranged into a fluid grid.

3 Answers

Colin Marshall
Colin Marshall
32,861 Points

Here's a Stack Overflow Question that might help you out. You will definitely need to use javascript and probably should go with jQuery too.

Ian Mackenzie
Ian Mackenzie
11,062 Points

Ok thanks Colin, I'll check it out.

Use CSS for styling the gallery, and JavaScript for making it interactive. Are you looking for something like this, only with images instead of text?

Colin Marshall is right; stay away from HTML tables in this case.

Ian Mackenzie
Ian Mackenzie
11,062 Points

Thanks Ryan and yes that makes sense. I guess my question really pertains to how I will fetch the images for the page so that when they are uploaded to the folder they are fetched and arranged into a fluid grid. The images are not output by a database, they are just sitting in a folder.

Ian Mackenzie
Ian Mackenzie
11,062 Points

I think this may be a better question for me to ask:

Automatically Generate a Photo Gallery from a Directory of Images without using a database.