A Thumbnail Photo Gallery Tutorial | Life and Linda -Blog Design, Decorating, Tablescapes, Gardening

A Thumbnail Photo Gallery Tutorial

If you noticed on certain pages I have thumbnail photo galleries. This tutorial is to show you how to create them. They will make your page categories all nice and neat. Example below:


Lets get started! Create a new page. Give it a name, whether it's Recipes, Tablescapes, Crafts, etc.

Make sure you label it in the Post settings...the same name.  I use labels for my page searches.

Click the HTML postion of the new page. Copy this code below and paste in the html side.

<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
</tr>
</tbody>
</table>

This table is shows (4) images across the page. 
To customize it for your blog, change the yellow section to your blog post image link. 
Change the Red section to your blog post url that goes with that post's image. If you want to change the picture sizes, change the green section. These sizes above line up nicely on most blogs.
Lastly, add the post title in  the purple highlighted section. 

It looks better if you keep your photos the same size.  They line up better.

Options

You can change how many images across  to 2, 3 or 4 images showing across your blog page. Just think of 100%...Divide it be how many images to show on your page.

25% - 4 images across
33% - 3 images across
50% - 2 images across

Examples:
___________________________

Four images side by side - 25% image size: "150"



Custom Domain

Create Social Media

Add Social Media

Back Up Your Blog

_____________________________________________________________________________

Three Images side by side - 33%  image size: "170"

____________________________________________

Two large images side by side - 50% image size: "200"



Custom Domain

Create Social Media
Also, if you choose to go with  2 or 3 images across, you can make the pictures a little larger, because you aren't  showing  4 across. . That means you change the green "140" The sizes are in twice in each line, so if you change them, make sure you change both of them.

If it all sounds too complicated, just keep it at 25% for  4 images side by side and the picture  sizes @ 140 and just add your image links, post link and titles or hire me to add it to your blog.




               

              http://instagram.com/lifeandlinda#        http://twitter.com/LifeandLinda  
Share on Google Plus

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.
    Your comments are welcome!

14 comments:

  1. Thanks for another great tutorial, Linda!! I've already pinned this, but I might need help from my hubby for this one. I'm not too good with HTML code. ;) Thanks for your visit to my Mitford post, and I hope you have a great week!!

    Blessings,

    Denise at Forest Manor

    ReplyDelete
  2. Hi ...this is all Greek to me..I wish you were my neighbor. LOL I absolutely love that last picture of yours. Linda, This is my first visit with you. I love you sassy profile shot. Blessings, xoxo,Susie

    ReplyDelete
  3. This is Greek to me too, I would have to have you HERE, beside me, walking me through all this:)

    ReplyDelete
  4. You always give great tutorials, Linda, but you know me....Ms Scaredy Cat!!!

    ReplyDelete
  5. I love that you give blogging tutorials and that your instructions are easy to follow.

    Thank you so much for the coding help and posting the code for Chico's Cancer Fund for me on my blog for me.

    ReplyDelete
    Replies
    1. Also, thank you for your extremely generous donation to my dog's GoFundMe. I've raised $200 so far, which should be more than enough to pay for his consultation.

      Delete
  6. Your tutorials are indeed great, Linda. But there is no way I'm touching the insides of my blog! LOL!
    xo
    Jemma

    ReplyDelete
  7. Linda, what a wonderful post and tutorial! Thank you so much for sharing, there are many who are not very technically inclined in computers, myself included!

    ReplyDelete
  8. And this is why I have YOU, Linda! Greek to me:)

    ReplyDelete
  9. Very clear tutorial Linda! Thanks :)

    ReplyDelete
  10. Such a clear, concise tutorial, Linda. I can't wait to share this next week on my blog! You have a real skill in making things easily accessible for others.
    And what would I have done yesterday without you?! I so appreciate your input on my new design and my new beautiful golden arrow! Thank you for doing the coding and making it so easy for my tired brain cells, lol. Laughing with you is just the best, Wonder Woman.
    You are a great teacher and a great friend. Lots of love to you. xoxo

    ReplyDelete
  11. Hi Linda, I am going to try your adding social media buttons this week-end, did not know that you did this kind of stuff until a month or so ago. Thanks

    ReplyDelete
  12. Excellent as always, Linda. You are amazing!

    ReplyDelete

I so appreciate your visits and sharing your thoughts at Life and Linda.

Need a New Look?