How to Create an Image Gallery Page in Blogger


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.

Summary


  1. Resize all of your desired images to the exact same size - crop when necessary.
  2. Upload your images to an image hosting site
  3. 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.
  4. 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.
  5. Copy and paste in your image URLs, post URLs, and post descriptions.
  6. Save, and add another row whenever you have more projects to add.


13 comments :

  1. Looks great! I am thinking about doing this for my new blog, so this post was very timely for me! Thanks!

    What image hosting site did you use?

    ReplyDelete
    Replies
    1. No problem! I hope it works out well for you :) I use Photobucket to host the images.

      Delete
  2. It's so nice to learn something new again, and this is definitely one to store on my blog file, thank you! I've not managed to keep up reading your blog for a while as it's been so hectic, but I do love it! Best wishes, Trinske

    ReplyDelete
  3. Any idea how to do this in Wordpress? I am struggling to make it look as clean as you have going here!

    It looks lovely :)

    ReplyDelete
    Replies
    1. Hey Rachel! I wish I could help you on this one, but I have very little Wordpress experience. There is an alternative - this option isn't editable like my version, but you can control its layout and appearance: http://www.somethingswanky.com/using-image-maps-to-link-multiple-urls/

      You can create an image collage with PicMonkey.com, and then make each image clickable. As you add more images you want included in your gallery, you'd have to keep creating additional galleries.

      Good luck!

      Delete
  4. Thanks so much for linking back to my site! I am glad my tutorial was helpful for you and you were able to tweak it to fit your needs. I just switched to Wordpress and was thankfully able to copy and paste the codes on my new pages and they look the same. :)

    ReplyDelete
  5. Thank you very much, I have been looking for a way to show off my pictures of my travels while coaching football on my site.

    ReplyDelete
  6. But what if i dont wanna crop my pic, but still get it in a uniform way

    ReplyDelete
    Replies
    1. You can resize photos without cropping them so that they are all the same size; however, if some photos have different original dimensions, they may appear slightly stretched or squished when you resize them without cropping them.

      If you like the original size of your photos and do not need to resize or crop them, then it would help to make it look more uniform if they were all horizontally or all vertically oriented.

      If that doesn't answer your question, please let me know, or email me at hello@AshleyPahl.com with more details so I can understand your issue better.

      Thanks!

      Delete
  7. thanks for this!! I am in the midst of STEP ONE!! :) funny thing is I get steps 2-6 no problem. BUT how and where did you crop them to be all perfect little squares? when I did a preview, my photos were all huge and different sizes. Tried playing around on iphoto and I almost through my computer at the xmas tree. :) I appreciate any advice! Thanks!

    ReplyDelete
    Replies
    1. Hi Cecilia! I used PicMonkey.com to do my re-sizing and cropping. First I re-sized the width to my desired size (170 px), and then I cropped the picture's height if necessary. Sometimes if a photo had weird original dimensions, I would crop them first (knowing that I eventually wanted them to be 170 x 135) and then re-size on PicMonkey. I hope that helps!

      Thanks for reading, and good luck :)

      Delete
  8. thanks Ashley!! I would try that! googled around and no joke your blog tutorial was the best one that explained it! Thanks. I will keep you posted how it goes.

    ReplyDelete
  9. Ashley I found your site about a month ago, completely by accident. I was looking for an html photo gallery and found this page but even better I found inspiration in your site! I am also on Blogger and I often run into limitations in coding so it was nice to find a lovely blog. I have started a massive revision of my blog so thank you very much for showing me what is possible!

    ReplyDelete

Thank you so much for your comments! I read them all and will respond as quickly as possible!

Related Posts Plugin for WordPress, Blogger...