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"

_____________________________________________________________________________

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

Scroll Box

Scroll Back to Top

Drop Down Menu

____________________________________________

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.

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.

14 comments:

DeniseOctober 14, 2015
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
SusieOctober 14, 2015
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
Pinky at Designs by PinkyOctober 14, 2015
This is Greek to me too, I would have to have you HERE, beside me, walking me through all this:)
kitty@ Kitty's Kozy KitchenOctober 14, 2015
You always give great tutorials, Linda, but you know me....Ms Scaredy Cat!!!
sprinklesOctober 14, 2015
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.
Jemma@athomewithjemmaOctober 14, 2015
Your tutorials are indeed great, Linda. But there is no way I'm touching the insides of my blog! LOL!
xo
Jemma
LindaOctober 14, 2015
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!
RonOctober 14, 2015
And this is why I have YOU, Linda! Greek to me:)
Hilda RodgersOctober 14, 2015
Very clear tutorial Linda! Thanks :)
RobynOctober 15, 2015
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
Cheri Savory SpoonOctober 15, 2015
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
candlelightsupperOctober 15, 2015
Love, love, love your photos.
SarahOctober 15, 2015
Excellent as always, Linda. You are amazing!

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