 |  |
 |  |
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 that click here to find out how to do it.
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,
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:
My modified code looks like this now:
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:
<div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZtoNLhTI/AAAAAAAAB-Q/fZbsjoUfwIU/s1600/P1010353_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" height="150" src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZtoNLhTI/AAAAAAAAB-Q/fZbsjoUfwIU/s200/P1010353_edit.JPG" width="200" /> </a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZvUb3XeI/AAAAAAAAB-U/lAFlF5ESehs/s1600/P1010354_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" height="150" src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZvUb3XeI/AAAAAAAAB-U/lAFlF5ESehs/s200/P1010354_edit.JPG" width="200" /> </a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/_VZprIDHV4-Q/TNCZwnNCpGI/AAAAAAAAB-Y/mHXargRZh2Q/s1600/P1010363_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" height="150" src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TNCZwnNCpGI/AAAAAAAAB-Y/mHXargRZh2Q/s200/P1010363_edit.JPG" width="200" /> </a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/_VZprIDHV4-Q/TNCZybgeNeI/AAAAAAAAB-c/QlCqqlWsvqc/s1600/P1010364_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" height="150" src="http://3.bp.blogspot.com/_VZprIDHV4-Q/TNCZybgeNeI/AAAAAAAAB-c/QlCqqlWsvqc/s200/P1010364_edit.JPG" width="200" /> </a></div>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;"
My modified code looks like this now:
<div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZtoNLhTI/AAAAAAAAB-Q/fZbsjoUfwIU/s1600/P1010353_edit.JPG" imageanchor="1" style="margin-left: 3px;"> <img border="0" height="150" src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZtoNLhTI/AAAAAAAAB-Q/fZbsjoUfwIU/s200/P1010353_edit.JPG" width="200" /> </a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZvUb3XeI/AAAAAAAAB-U/lAFlF5ESehs/s1600/P1010354_edit.JPG" imageanchor="1" style="margin-left: 3px;"> <img border="0" height="150" src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZvUb3XeI/AAAAAAAAB-U/lAFlF5ESehs/s200/P1010354_edit.JPG" width="200" /> </a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/_VZprIDHV4-Q/TNCZwnNCpGI/AAAAAAAAB-Y/mHXargRZh2Q/s1600/P1010363_edit.JPG" imageanchor="1" style="margin-left: 3px;"> <img border="0" height="150" src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TNCZwnNCpGI/AAAAAAAAB-Y/mHXargRZh2Q/s200/P1010363_edit.JPG" width="200" /> </a></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/_VZprIDHV4-Q/TNCZybgeNeI/AAAAAAAAB-c/QlCqqlWsvqc/s1600/P1010364_edit.JPG" imageanchor="1" style="margin-left: 3px;"> <img border="0" height="150" src="http://3.bp.blogspot.com/_VZprIDHV4-Q/TNCZybgeNeI/AAAAAAAAB-c/QlCqqlWsvqc/s200/P1010364_edit.JPG" width="200" /> </a></div>
Step 3:
Now that we have prepared our image codes, it's time to create a skeleton for our table. Like I said before, we will be creating a 2x2 table. The following is the HTML to create a basic table.
Now that we have prepared our image codes, it's time to create a skeleton for our table. Like I said before, we will be creating a 2x2 table. The following is the HTML to create a basic table.
<table cellpadding="0" cellspacing="0" align="center"> <tr> <td>Image1</td><td>Image2</td> </tr> <tr> <td>Image 3</td><td>Image 4</td> </tr> </table>Just a quick example, the skeleton HTML for a 3x2 table would look like this:
<table cellpadding="0" cellspacing="0" align="center"> <tr> <td>Image1</td><td>Image2</td><td>Image3</td> </tr> <tr> <td>Image4</td><td>Image5</td><td>Image6</td> </tr> </table>
Step 4:
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:
And there you have it, your very own cute thumbnail galleries.
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:
<table cellpadding="0" cellspacing="0" align="center" > <tr> <td><div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZtoNLhTI/AAAAAAAAB-Q/fZbsjoUfwIU/s1600/P1010353_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZtoNLhTI/AAAAAAAAB-Q/fZbsjoUfwIU/s200/P1010353_edit.JPG" width="200" /></a></div></td><td><div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZvUb3XeI/AAAAAAAAB-U/lAFlF5ESehs/s1600/P1010354_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TNCZvUb3XeI/AAAAAAAAB-U/lAFlF5ESehs/s200/P1010354_edit.JPG" width="200" /></a></div></td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/_VZprIDHV4-Q/TNCZwnNCpGI/AAAAAAAAB-Y/mHXargRZh2Q/s1600/P1010363_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TNCZwnNCpGI/AAAAAAAAB-Y/mHXargRZh2Q/s200/P1010363_edit.JPG" width="200" /></a></div></td><td><div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/_VZprIDHV4-Q/TNCZybgeNeI/AAAAAAAAB-c/QlCqqlWsvqc/s1600/P1010364_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="http://3.bp.blogspot.com/_VZprIDHV4-Q/TNCZybgeNeI/AAAAAAAAB-c/QlCqqlWsvqc/s200/P1010364_edit.JPG" width="200" /></a></div></td> </tr> </table>Note: If there seems to be extra spacing between your images, make sure you did not include any line breaks in your image's HTML (pressing enter between tags will introduce a line break).
And there you have it, your very own cute thumbnail galleries.
Again the "Affiliates". (I previously commented on the manual resizing tutorial.)
ReplyDeleteQ: 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?
Thanks Yoboy. You really are the Blog Saint. ~ Raina
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.
ReplyDeleteAlternatively, 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:
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td>Image1</td><td>Image2</td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
I have 2x2 table up there, so there are 4 cells. But the bottom two cells will not take any space because there is no elements in that row. Consider the same structure below:
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td>Image1</td><td>Image2</td>
</tr>
<tr>
<td>Image 3</td><td></td>
</tr>
</table>
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.
For some reason, I had to redo two pages of codes with the 'jump'. Mozilla was saying it couldn't open that URL. So I was afraid to try out any part of a tutorial.
ReplyDeleteThanks again, Yoboy. Oh, I like that you put the tutorials on the left column =)
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!
ReplyDelete@Mike + Desi: I was expecting for a 'but' somewhere in your comment. Glad you didn't leave any. You'll have more fun once you get the hang of it, trust me. Cheers and God bless.
ReplyDeleteGreat tutorial! What if I want to remove the individual borders around the pictures and instead have all the pictures in one large border?
ReplyDeleteThanks this was a lot of help! Is there a way to do this with adding captions for each pic?
ReplyDeleteThanks!!
~ M
@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:
ReplyDelete<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-IxiWPNd_oY4/TP-xMU_1LWI/AAAAAAAACT4/5gJ3SHMRr8U/s1600/banner.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/-IxiWPNd_oY4/TP-xMU_1LWI/AAAAAAAACT4/5gJ3SHMRr8U/s1600/banner.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cheers</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-IxiWPNd_oY4/TP-xMU_1LWI/AAAAAAAACT4/5gJ3SHMRr8U/s1600/banner.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/-IxiWPNd_oY4/TP-xMU_1LWI/AAAAAAAACT4/5gJ3SHMRr8U/s1600/banner.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cheers</td></tr>
</tbody></table>
Cheers.
@Kristine: The border is not part of the tweak, it comes with the template. Use the contact form and get in touch with me, and I'll assist you in removing the border from your template. Cheers.
ReplyDeleteYou have just MADE my day. Been trying to do this for such a long time. Now it works. Thank you so so much.
ReplyDeletehttp://clairebutlerphoto.blogspot.com
@Claire: Visited your blog, nice work :) Good job.
ReplyDeleteThank you! This helped me a lot.
ReplyDelete@Melissa: Happy to help, as always.
ReplyDeletemaksih atas infonya
ReplyDelete@Lutfie: You're welcome.
ReplyDeleteHelp! I can't get past step #2. This is the code I have. I don't see the same code that you have for the search/replace.
ReplyDeleteI have this:
style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"
Do I replace that?
@Jenny: Looks like your image has been left-aligned. And yes, replace that line.
ReplyDeleteThanks so much! It worked perfectly. I have one more question. There's a line around each picture that I do not want to have. Do you know how to remove it or am I stuck with it?
ReplyDeleteI made pictures with rounded boxes which is why I don't want the square box around the rounded box.
http://handmadebyjt.blogspot.com/p/my-shop.html
@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:
ReplyDelete1) You can remove the 'shadowing' completely off your blog. See the tutorial below:
Remove Blogger Picture Shadow and Border
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> -
<b:if cond='data:blog.url == "http://handmadebyjt.blogspot.com/p/my-shop.html"'>
<style>
.post-body img, .post-body .tr-caption-container{
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
</style>
</b:if>
This was very helpful. I have a new problem though. Sometimes my pictures are not aligned in my 1 x 2 box. See this post: http://handmadebyjt.blogspot.com/2011/10/my-city-ontario-science-centre.html
ReplyDeleteDo you know what causes this?
@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.
ReplyDeleteThank you so much! I went back to fiddle with it and I think I fixed it because I don't see it any more. Many thanks!!!!
ReplyDelete@Jenny: Glad you got them fixed. Cheers.
ReplyDeleteHi YoboY, just curious... why do we need to change the style to style="margin-left: 3px;" By accident, I forgot to do that step but it still turned out great. Thanks, J
ReplyDelete@Jenny: Removing the margin will bring the pictures closer with each other = more space to make your images larger.
ReplyDeleteHIIIII YOBOY...
ReplyDeleteHow can i create more photo gallaries in my blog.
I want to create photo gallary for different diffrent evernts.
for example : marriage photo, family photos, office events photo etc.
I want to create photo gallery where i can store separate photos as per the events.......
Thanks & Regards,
AMOL
HHIIIIII YOBOY.........
ReplyDeleteI have to create photo gallery in my blog....
In that gallery i have to make different different albums.....
like marrieage album...
office event album...
family album...
so how can i create this different album in the gallery pls tell me
@amol: You can create separate pages for your albums. You can create up to 20 pages. To create a page, go to Dashboard - Pages. To create the gallery, just refer to the tweak in this page :)
ReplyDeleteCheers.
you so very nice you are my inspiration Keep Blogging this is my blog http://arnoldfcerdena.blogspot.com/
ReplyDelete@Hunnyu: Glad my posts inspired you :) Happy blogging..
ReplyDeleteHi 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....
ReplyDeleteThanks in advance!
Jenny
Hi YoboY, re: your response on 10/1/2011 to my question, how do I add another blogger page to the code you gave me? I want to remove the lines around the pictures for a couple more pages.
ReplyDeleteThanks in advance!
Jenny
Hi YoboY, re: your response on 10/1/2011 to my question, how do I add another blogger page to the code you gave me? I want to remove the lines around the pictures for a couple more pages.
ReplyDeleteThanks in advance!
Jenny
@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.
ReplyDeleteBut 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.
Removing border/shadow from any single image
ok I'm slow and new to this. Where do I post the knew table code?
ReplyDeleteWhen you are composing your post, you can switch between two different editor modes: Compose mode and HTML mode. All the HTML should go in HTML mode :)
DeleteHi Yoboy, wondering if you can help. Could you please take a look at this link: http://handmadebyjt.blogspot.com/p/recipes.html
ReplyDeleteI 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 Jenny. All 5 of your images (under 'Sweet Stuffs') seem to have a bottom margin associated to them. You gotta remove these margins. Edit this 3x2 table, find and delete the following tags:
Deletemargin-bottom: 1em;
You'll find 5 of them, one for each image. Delete all 5. Here's how it suppose to look like (feel free to use this if you want):
Jenny's table code
Thank you so much YoboY! I don't know I ended up with a margin underneath but that solved my problem. Once again, you saved the day!!! Thanks again so much!
ReplyDeleteNo problem at all. Enjoy your weekend :)
DeleteHi 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
ReplyDeleteThat 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.
DeleteHi YoBoy, thanks for taking a look at it. Here is the link from pastebin: http://pastebin.com/npMbs8xV
DeleteSorry it's a bit of a mess.
Thanks again!
Jenny,
DeleteHere's what you can do. Change the following line:
<table align="left" cellpadding="0" cellspacing="0">
Into this:
<table align="left" cellpadding="0" cellspacing="0" style="margin-bottom: 50px;">
You have two have them, change both. Change the value 50px in the new line to adjust the spacing between the tables.
Thank you, thank you, thank you,thank you, thank you,thank you, thank you,thank you, thank you,thank you, thank you,thank you, thank you,thank you, thank you,thank you, thank you!
ReplyDeleteI have been looking for something like this and no one could help me. Thank you soooo much!
That is one of a kind :) +1 to you~
DeleteI wanted to say Thank you for providing this tutorial. I have keep coming back to it everytime I need to add a new table to my blog. Feel free to check it out and let me know what you think
ReplyDeletethanks
http://motivatedmommyoftwo.blogspot.com/
Hi Shirley,
DeleteAdorable!
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
Cheers!
Yoga..
Thank you so much for the tip, definitively going to use it. I tend to come back to this post for reference.
DeleteYou're most welcome :)
Delete