I've been wanting to update my food and craft galleries for a long time. The main problem was that I couldn't find a fast and simple solution for what I wanted - I knew it was going to involve a lot of photo resizing and some HTML work.
Then in January one of my favorite blogs, 17 Apart, shared how they had the same issue as I had: their craft directory was just a list of links, and not a visual gallery like they wanted it to be. They shared the tutorial they used to transform their directory into gallery with links.
The tutorial they used was by Laura's Crafty Life. Laura provided an HTML code that allows the user to customize how many rows in a table they want in their gallery, as well as how many images per row. The default number of images per row is four, but I wanted three.
The tutorial is wonderful, but the format of the images wasn't exactly what I wanted. The original method of coding the images caused the images to be many different sizes - some vertical, some horizontal. I wanted all of my images to be the exact same size.
This was the most time-consuming part of the process. I decided to resize all of the craft and food images I wanted in my gallery so they were uniform - that meant cropping some vertical pictures to fit in with the horizontal pictures.
I then uploaded the smaller pictures to an image hosting site, and plugged them into the code. Because I was only using 3 images per row, I had to adjust the cell width from 25% to 33%.
So here is the before:
and here is the after:
So much better, right? It's exactly what I've been wanting for a very long time. I still want to create a gallery for all of my coffee and drink recipes, home decor posts, and work-at-home / breakthrough boot camp posts. If you're on Blogger and have been wanting an image gallery page, this is the perfect tutorial for you.
- Resize all of your desired images to the exact same size - crop when necessary.
- Upload your images to an image hosting site
- Paste Laura's HTML code to the page on Blogger your gallery will appear on. Make sure to paste in HTML mode, note Compose mode, or else it won't work correctly.
- The code's default is set at 4 images per row. Follow Laura's instructions for adjusting images per row, as well as total number of rows.
- Copy and paste in your image URLs, post URLs, and post descriptions.
- Save, and add another row whenever you have more projects to add.