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 PicasaOnce 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 PicasaWhen 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":
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 tallOn 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)"
If your image is larger than 800px tall/wideBy 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 templateThe method used to display images in your template depends on how you would like to use them.
To display as an actual imageImages 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 imagesIf 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.
background-position: top center;
You can learn more about using background images in your template in this explanatory post.