Create Thumbnail Albums in Blogger with WLW.

To create thumbnail albums in Blogger posts we create tables and insert images in each table cell.  The process of coding a table in HTML is cumbersome and prone to errors.

In Windows Live Writer (WLW) this can be done with a few mouse clicks......

 

Start WLW. From the top menu click 'Insert'------>'Table'.  Choose how many rows and columns the table should have and it's width. Remember to keep the table width smaller than the post column width or this may break the template. Also you can choose whether to show table borders and/or the padding between cells.  Here I have inserted a two column-three row table.

Next click in each cell and choose 'Insert'----->'Picture'.

All Photos by law_keven

Select the file from your disk and click Open.  You can even select pictures from the web.

To add more pictures right click the last cell and choose 'Insert Row Below' to insert a new row in the table.

 

After inserting the pictures select each picture by clicking on it. In the right sidebar the Image Properties dialogue box opens. Here you can :

1. Resize pictures.
2. Rotate pictures.
3. Adjust picture contrast.
4. Frame pictures.
5. Add drop shadow to pictures.
6. Link each picture to any webpage or source picture.
7. Add watermark to pictures to deter copiers.
8. Add special effects like sepia, emboss, sharpen or blur pictures.
9. Add ALT text to the picture code. (This text appears if picture fails to load)
10. Adjust picture temperature.

 

If you are creating a photoblog you can create such a thumbnail gallery on the Main Page of the blog. Then link each picture to a post containing more pictures of the same kind.

 

For example first create a post containing a gallery of images like the one above.  This will be your animal gallery post.  Change the date of the post to a backdate so that the post does not appear on the Main Page. 

 

Then in your Main Gallery insert a small picture of an animal and link that picture to the post above containing many animal images.

 

Repeat the above two steps to create a whole photoblog containing picture-posts on various subjects all linked to the Main Gallery.

 

Enjoy!

Thumbnail Albums for Blogger.

Thumbnail albums can be created in Blogger using software or by hardcoding them in the Edit Html tab of the post Editor. It is preferable to do the latter as it gives you better control besides saving on the cost of third party software.....

The first step is to upload your image to a freehost like Googlepages. Do not upload to Blogger as it resizes your image to arbitrary sizes. After uploading image as described in Upload Files to Blogger copy down the link to the image. Then login to Dashboard of Blogger and click on +New Post link. The Post Editor opens and click on Edit Html tab ofPost Editor. Use the following code to paste the image in it :

<A HREF="URL OF IMAGE" target="_blank" title="Click to view" >
<IMG HEIGHT=50 WIDTH=50 SRC="URL OF IMAGE" alt="image name" /></A>

Adjust the numbers 50 by clicking on the Preview link in top frame of Post Editor. This uses HTML to resize your image. Because of this the image loads faster. As an example I have used this function to load a wallpaper of Andrea Rincon below.




The actual size of this image is 1024 by 768 pixels. Click on the image to see actual size.

THUMBNAIL ALBUM

To make a thumbnail album make a table and insert the above code in each cell. For example if you want a table with four images use this code for a one row by four columns table :

<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE>

Insert the code for the picture between each <TD> and </TD> tags. Type out the full code in one line in Notepad without pressing Enter and then paste it in your post. See Below :


For a two by two table use this code :

<TABLE> <TR> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE>

See example below :


To add table spacing and borders add this line instead of the first <TABLE>

<TABLE cellspacing=0 cellpadding=3 width="80%" border=1 bordercolor="#0000ff">

For example a three row by two column table will be :


To add a caption add this line after the first <TABLE> tags :

<caption>Picture Gallery</caption>

This will show as follows in a two by three gallery:

Picture Gallery

To add titles for each picture below it add two more rows by pasting this code :

<TR>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 1</b></font></TD>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 2</b></font></TD>

<TD align=middle valign=top><font size="2" face="verdana" color="#0000ff"><b>WALLPAPER 3</b></font></TD></TR>

See the effect below :

Picture Gallery

WALLPAPER 1	WALLPAPER 2	WALLPAPER 3
WALLPAPER 1	WALLPAPER 2	WALLPAPER 3

Technorati Tags:photo, photo album, picture, thumbnails, Thumbnail Albums, tables