68 Host Template Images for Free on Picasa November 08, 2010 /

If you use a third party template or customize the design of your blog, chances are you'll need to find hosting for images used in the design.

Many Blogger designers use Photobucket, Flickr and other free image hosting solutions. It's also possible (albeit unnecessarily complicated) to upload images to Blogger or Google Sites.

But my personal favoured image hosting service is Picasa Web Albums. This free Google powered service offers unlimited bandwidth and a generous 1gb of storage - perfect for serving up any images you need for template visualisation.


If you already host a blog with Blogger, any images which you upload to your blog posts will already be hosted on Picasa Web Albums in folders according to your blog name, even if you haven't already activated your Picasa account.

Simply go to the Picasa Web Albums home page and log in using your Google account. Once logged in, you'll see all of your Picasa hosted albums, including any which are utilized for storing images uploaded to your blog posts:

From here you can upload your own images using the web interface, then copy the image URLs for use in your custom Blogger template.

How to upload your images to Picasa

Once you've logged in to Picasa Web Albums, click the "Upload" button near the top of the page, then choose which folder in which you would like your images to be contained:

For better organization, I generally use the folder of the same name as the blog I'm working on, though it really makes no difference if you'd prefer to use a different one.

When you have selected an album, you'll be presented with this page where you can upload up to 5 images at a time to your folder:

Upload your images, and if necessary, repeat until you have uploaded all of the images you need for your template. Once you've finished uploading, you'll be able to view thumbnails of your images on the page for your album:

How to link to images you've uploaded to Picasa

When using images within your Blogger template, you'll need the images' URLs.

To find the URL of your images, click on the image thumbnail in your album to be presented with the image's "page":

If your image is not large, you could right-click on the preview image and choose to copy the image's URL to your clipboard, ready to paste where required within your template.

However, if your image is of a large size (such as a full-page background image), you'll need to use a different method.

For images up to 800px wide or tall

On the right hand side of the image page, you'll see a column of options. Click on the "Link to this photo" link to see the following menu:

In order to retrieve the link to the original sized image, you'll need to change the following options:

• Select Size: Choose "Original Size" from the dropdown menu
• Check "Image Only (No Link)"

Finally, copy the link generated in the "Embed Image" text area which will be the accurate URL for your image at it's true size.

If your image is larger than 800px tall/wide

By default, the largest size presented for embedding is 800px tall or wide. Luckily Picasa does store the image with it's original dimensions, and it's simple enough to access the URL.

On the Image Preview page, click the magnifying glass icon which will display a full-sized preview of our image:

Now if you right click this image, you should be able to choose "Copy Image URL" or "View Image" from the right-click menu to acquire the URL for your full size hosted image.

How to use images in your template

The method used to display images in your template depends on how you would like to use them.

To display as an actual image

Images can be used as banners, buttons or simply displayed in the layout as an image gadget.

To display an image in your template's HTML code or within an HTML gadget in your layout, you would use the following syntax:

<img src="URL-OF-YOUR-IMAGE" alt="Alternative Text" width="WIDTH-IN-PIXELS" height="HEIGHT-IN-PIXELS" />

Specifying "alternative text" within your image tags ensures anyone using a screen reader or browsing with images turned off can still get an idea of what your image displays. Width and height specifications ensure an appropriate space is provided in your layout while loading, which is especially usedul for large images which may take some time to load in your page.

To link to background images

If you intend to use images for styling backgrounds in your template, you will need to add the appropriate CSS to your template.

When using Blogger's new Template Designer, you can add the required code to the "Add CSS" section on the Advanced Settings screen:

If you are using an older Layouts style template, you should add the code just before the closing <b:skin> tag instead.

The code to add depends on:

• Where you intend to use your background image
• The placement you require
• Whether or nor you would like the image to be repeated.

Here's an example of how I would specify a large image as the main body background:

body {
    background-image: url(http://lh3.ggpht.com/_haw3kJHnOsc/TLY50ZjPhCI/AAAAAAAAA2s/hI7WqLn8TNQ/tech-internet-undersea-world.jpg);
    background-position: top center;
    background-repeat: no-repeat;
}

You can learn more about using background images in your template in this explanatory post.

Is this useful for you?

I hope this post helps you use Picasa as a free, reliable host for images you use in your Blogger template designs. Please let me know your opinions by leaving your comments below.