Southern Listeners

Wednesday, November 3, 2010

Blogger Thumbnail Gallery

I have been wanting to post a tutorial on this for quite some time now. In this tutorial, you will learn how to arrange images in a thumbnail-gallery-like-format. That means, your images will be close to each other, making a 2x2 or any other dimension that you define. Here's an example of what you will achieve:

I will be using the above four images in this simple tutorial.

Step 1:

First, you gotta upload the pictures that you want to use using Compose Mode. Use Blogger's updated editor if you want to follow this tutorial, although the idea works just fine with any editor. Next, click on the image once, and click the left most option to make your image small. Refer to the image below:

Doing this will make your image small. Smaller image allows more images to be added in a row. Say you want 4x2 gallery, your individual image size must be really small. You gotta do the maths and decrease your image's width accordingly. You can make your image even smaller by adjusting its width in Edit HTML mode, but that's tangential to this tutorial so I'll cover that on another tutorial if I care enough about thatclick here to find out how to do it.

Step 2:

We will be styling our images in this step. Once you have completed the previous step, locate the HTML portion of the images by clicking on Edit HTML. Here's my HTML portion for the above four images:

Nothing special above, it's just some normal unedited HTML codes for some uploaded images. So to prep it for our gallery, we want to make one minor adjustment. See the highlighted lines above, 2, 7, 12 and 17. Replace the part that says style="margin-left: 1em; margin-right: 1em;" with style="margin-left: 3px;"

What is there left to do? Take the resultant codes from Step 2 and insert them into the table skeleton of Step 3. We have four HTML portions for each image. Copy the first one, and replace the text 'Image1'. Do this for the other three as well. My final code looks like this:

88 comments:

Again the "Affiliates". (I previously commented on the manual resizing tutorial.)

Q: If I need/want to add more thumbnails, do I have to edit/add to the skeleton html again? Or can I just make the skeleton entirely and then add the images as they come? Will it disrupt the look of the page if I do it before hand?

RaindropSoup: HTML is very flexible. If you decide to add a new row to your existing table you can edit it whenever you want. Just use <tr></tr> to add a new row, and <td></td> to add a new column. You might want to check 'colspan' and 'rowspan' attributes if you want to merge two or more cells. There are hundreds (if not thousands) of tutorials out there when it comes to HTML.

Alternatively, you can create a skeleton first. You're not 'obligated' to insert an element into it. The spot will be left blank and will not take any space as long as the whole row is empty. Try this for yourself. Copy the HTML that I have in my last step, paste it in Edit HTML mode, and delete the HTML portion in between any one of the <td></td> tags. Personally, I prefer this method because it is more tidy and you'll be able to see the skeleton of your table clearly before adding an element into it.

Whether or not it will take space, it depends. Consider the following case for example:

In this case, the second row has one element in it. The [2,1] cell will take some space, but the last cell [2,2] will not. Nevertheless, a new line has been spanned. The bottomline is, if your row has no elements in it, it will be as good as nothing even if you have defined it in the table skeleton.

I'm using this on my blog and I think it looks great, definitely tons better than how it looked before. Thank you for your tutorial! I know zip about this stuff but was able to make a pretty page just with this information you've provided. Thank you!

@1000 + Books to Read: Good question. And yes you can. The only difference will be the code in step 2. First, add your captions, and then proceed with this tutorial as usual. Your code in step 2 will look something like this instead:

@Jenny: We call it the 'shadow'. I find it annoying. Nothing is wrong with your image. Your template applies shadows to images automatically. That is why you're seeing the shadow there. You have two options now:

1) You can remove the 'shadowing' completely off your blog. See the tutorial below:

2)You can keep the 'shadow' feature, and just remove the shadows from these 6 images. It is more tedious. Go to Dashboard - Design - Edit HTML - Download Full Template (for backup purposes) - Find for </b:skin> - Paste the following directly below </b:skin> -

@Jenny: Make sure you have no line breaks in your HTML code. A line break doesn't have to be an empty line. It could be a simple 'new line'. Just go back to the code, and make sure the codes act like one continuous line, instead of few separate lines. If it doesn't solve the problem, use the 'Ask A Question' page to create a new question, and post your HTML in there. I'll try to see what's wrong.

Hi Yoboy... Just one more question re: my post from October 2011. If I want to remove the shadow pic from more than one page, how do I enter more than 1 URL to the code you gave me? The code was a conditional i.e. if cond = my page, then....

@Jenny: Sorry for my late reply. If you have more than 1 pages, simply copy and paste the same code again, but change the address in the code.

But I've just thought of another way, which is much easier. Before you place your images into the table, make a slight change to it. You need to change the word 'separator' to an ID that I'm about to give. See the link below. Skip Step 2, and follow all other steps. Doing this right will get rid of borders/shadows from any single image. Do this for all the images that you want to be borderless and shadowless.

Hi Yoboy, wondering if you can help. Could you please take a look at this link: http://handmadebyjt.blogspot.com/p/recipes.html

I did a 3 x 2 table but the spacing between the first line and 2nd line under the title "Sweet Stuff" seems to be extra large. Do you know how to fix it? I can't seem to see what is causing the gap. Thank you so much!

Hi YoBoy, I hope you had a good weekend too! One more thing I wanted to ask you about... I noticed that no matter how many times I press "enter", I never get a space line between the "Sweet Stuff" pics and the words "Frozen Treats". Do you mind taking one more peek at the page? http://handmadebyjt.blogspot.com/p/recipes.html

That is weird. When I analyse your raw code, I do see line breaks in there, but it doesn't show up in the actual page. If you don't mind, can I take a look at your table code? Edit this post - switch to HTML mode - copy your post code (everything in there) - paste it in www.pastebin.com, and get back to me with the link. I'll try to replicate the issue.

And here's a handy trick. If you're a frequent user of HTML tables, you can place the code in your post's template so that the code will be there each time you compose a new post. I have one in my template, and when I don't need it, I'd just delete the code and publish the post without it. If you want to place the code in your post template, go to Dashboard - Settings - Posts and Comments - Post Template - Add - paste the code for tables there. Convenient things are fun :P

Thank you so much for this great tutorial! I found it looking thru your tutorial list while I am waiting to work out posting and getting answers to my other newbie questions. I just tried out this tutorial on my practice blog, and your tip about the spaces was very helpful also because my thumbnails were not evenly spaced. But I was able to figure out what the HTML code for the line breaks is and I found two - deleted them and my array is perfect! Now I will know what to do when I am ready with photos to post this way on my "real" blog!

I'm pretty sure that this post added years back onto my life! Thank you!the other day I forgot to do this: "Replace the part that says style="margin-left: 1em; margin-right: 1em;" with style="margin-left: 3px;"" and from what I could tell, nothing was different, so what does this step do?Thanks!

It's supposed to remove some extra padding between the images to make your gallery look a little bit more neat. But if you're not seeing any difference, you probably already have an overriding code somewhere in your template that's doing a similar negating job :)

Hello hello! Thank you SO much for this post. I think it saved my life. I relaized the other day that I forgot to replace "style="margin-left: 1em; margin-right: 1em;" with style="margin-left: 3px;"" but I didn't notice any problems with forgetting to do that. So what exactly does that step do?Thanks again!

It's supposed to remove some extra padding between the images to make your gallery look a little bit more neat. But if you're not seeing any difference, you probably already have an overriding code somewhere in your template that's doing a similar negating job :)

I'm trying to follow your instructions but I cannot find the part I have to replace in step 2After uploading the photos, I added captions to each photo (as I read your answer to one the above comments), and also added a link to each photo.I also adapted to size of the photos

What I get is this (example for 1 photo):http://winniedummyblog.blogspot.co.il/2013/01/question.html

It'll be much easier if you do the styling (Step 2) before captioning, as captioning will wrap your whole code in a table (which means you're gonna have to deal with more unnecessary codes).. In the code that you already have, all you have to do is remove this part:

Your site is great. I have used a lot of info from here to customize my site.

I have some questions:

How do you change the header on the other pages to look like the header on my homepage? My header links only show up only when I hover on them. That is not how it is on the homepage. The links show up on the home page all fine. When I hover on the header and click on the links , it opens up in a new window.

My Blog is http://bitesncrumbs.blogspot.com/

I have customized the pagesto have a snapshot view. The homepage has sidebar view.

Example: When I click on the Desserts page, I see all the desserts arranged with the Flipcard view. However on this page, you will see the header font slightly different and header links all gone. The Home link is gone. If you hover on the header links and try to click it, it opens the page in another window. I would like it to open in the same window. Can you please help?

2. I'm afraid there isn't anything we can do to prevent the pages from opening a new tab.

3. As for the missing home links, I reckon you can get this fixed by first going to Dashboard - Layout - Pages - Edit, and uncheck 'Home' so that it won't show in your Header bar. Next, go to Dashboard - Pages - New Page - Web Address, and add your homepage and title it Home.

I'm sorry that didn't work. Have you tried creating a dummy blog using the same account, preferably with one of the default templates, and see if the lightbox works there? If it does, we'd at least know there's something wrong with your current template.

Hey there! Just wanted to let you know that I can't see where things go wrong. I am currently just uploading images and putting them next to eachother by deletingthe div class seperator line between two images. This seems to work for now. Thanks again for looking into it.

HI!!! I am hoping you still answer questions! I got the code and everything was going great but when I switched to compose the photos on each row are touching. How do I add a little space between each photo???