Friday, September 29, 2006

How to put pictures in the sidebar

(Note: This post was prepared for the old classic Blogger template. See bottom of post for update on New Blogger templates)

Putting images in the sidebar can be dicey. You have to make sure the width of the image fits the width of the sidebar. If it is too wide, it will cause the sidebar to slid to the bottom of the page.

This is how I do it. First, I check the width of the sidebar of my blog. I do this by signing into Dashboard, selecting the blog, clicking the TEMPLATE tab to open the template editor, then I search for this block of codes (click on screenshot to enlarge it):
Blogger template: sidebar width
Note the code boxed in red. It says the sidebar is 220 pixels wide. I then have to make sure that whatever images I upload to the sidebar has width less than 220 pixels.

I use the free and very good Irfanview program. I open the image I want to upload with Irfanview. Then in the menu bar, I click Image > Resize/Resample and look for "width" (See screenshot below. Click screenshot to enlarge):
Irfanview, resize
Note that the width of the image is greater than 220 and if you upload this image as it is, it will cause problem with the sidebar. Change the width to something less than 220. For my example, I changed it to 200. Make sure the "Preserve aspect ratio" is checked, otherwise your image will be distorted. Save the image.

Upload the picture to the web. You can either use Blogger or an external photo host like photobucket. If you want to use Blogger, refer to this post: Tip - getting Blogger to host your images for the profile, etc..

Now get back to your template editor. For images to be in the sidebar, the HTML for the image have to be typed between


<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
and
</div></div>
<!-- End #sidebar -->


For a guide as to where to paste the HTML, refer to post Blogger template tutorial - adding content via the template

The image HTML that you have to add will be like this:

<img src="URL of photo" alt=""> (It will be good to add a description of your image in between "" in alt="" as if the photo cannot be displayed, the text will be displayed instead, and it will be good for your search engine ranking.) IMPORTANT NOTE: Make sure you are in the INSERT mode when you do this, as otherwise, part of the HTML will be overwritten. It may be a good idea to open Notetab and test if you are in the INSERT mode before you start adding text in the alt="" attribute.

If you want your image to be a link to another site on the web, your HTML will become:

<a href="URL of target site"><img src="URL of photo" alt=""></a>



If you want to see an example of an image added to the sidebar, surf over to Picture Store. The image is at the top of the sidebar and has been made a hyperlink. Try clicking on the image and see what happens.

images with a title


A reader asked in the comments section how to make an image with a title above it. So I am going to post here an image with a title, and the HTML used to display the image. I am using Blogger to host the photos. (See Getting Blogger to host your images. The original photo is 550x370 pixels in size. If uploaded in the manner described in this section, the photo will be too wide as the template says the width of the main column is only 410 pixels wide, and will cause the sidebar to slide down to the bottom of the page in Internet Explorer. Using Irfanview, I resize the photo to 400. I then uploaded the photo to a blog specially created to store images: Citrawarna or Colors of Malaysia. At the post, I click on the photos and that take me to a page with only the image. I copied the URL and then used the URL for the HTML for the image below:

Citrawarna or Colors of Malaysia


Citrawarna or Colors of Malaysia


The image above is displayed by this HTML:





<h3>Citrawarna or Colors of Malaysia</h3>
<img src="http://photos1.blogger.com/blogger/5611/753/1600/citrawarna%20400%20pixels.jpg" alt="Citrawarna or Colors of Malaysia">



Note that this is putting the picture in the post itself, but you will use the same method described above to put it into the sidebar.

Update 4 September 2007: This post is for old classic Blogger template. If you are using the New Blogger template, refer to Put picture in the sidebar and Easy way to add picture to sidebar for New Blogger


NEWER POST    OLDER POST

21 comments:

  1. Anonymous9/29/2006

    Good information.
    It helped me

    ReplyDelete
  2. Anonymous9/30/2006

    That's really neat Peter.
    Thanks.
    I noticed that you made your picture link lead to a new popup window. Is that by adding in the " target=_blank"> somewhere in there?
    We do have to have the Irfanview I guess to do this.
    ParisBreakfasts @ work

    ReplyDelete
  3. The way to make the link open to a new window is to have target="_blank" in the code.

    You need a program which can resize the image. Ifranview is one free program which can do this.

    ReplyDelete
  4. A program to resize the image..I wonder if Flickr could do this. It works for the profile picture just fine. But I don't think it gives the exact size info you're suggesting is best. I shall investigate. Thanks so Peter for being so interactive. It's a huge help.

    ReplyDelete
  5. PS I just spotted an example where the post has dropped to the bottom, unless it's my computer..probably because of the pictures' width in the sidebar I'll bet-
    http://decor8.blogspot.com/
    Interesting.

    ReplyDelete
  6. It would be great if you could post an example of the HTML you put between the sidebar(Blogger won't let me put in the HTML you used) etc for the car pic...just to get an idea of what if would look like...

    ReplyDelete
  7. Have you uploaded the image to the web or hosted it with a photo host? If so, why don't you give us the URL to the image.

    ReplyDelete
  8. The only way I know how to get a URL is to download it into Flickr Arrhhhhhhhhhhhhhh
    I could get a thumbnail that way..but would it be small enough to put in the side bar. It's down to 16 KB 302 x 221
    Worth a try

    ReplyDelete
  9. OK I got a Flickr thumbnail
    100 x 73 (too small ?)
    URL:
    http://static.flickr.com/96/259964898_847c83f8d1_t.jpg

    I wonder if I still need Infranvan..

    ReplyDelete
  10. 302 sounds a bit too wide, unless you are using a template like Sand Dollar.

    ReplyDelete
  11. Why don't you use Irfanview, like I described in the post. It is a very good photo editor.

    ReplyDelete
  12. Oh I guess I lost a comment. I got a Flickr thumbnail 100 x 73

    Probably too small, like cinderella's glass slipper
    .
    The thought of learning new software (Irfanview) is daunting as I struggle to get a Paypal button to function..
    Anyway here's that Flickr URL

    http://static.flickr.com/96/259964898_847c83f8d1_t.jpg

    Thanks Peter for your patience

    ReplyDelete
  13. That image looks OK to me.

    Anyway, Irfanview is a very easy program to use.

    ReplyDelete
  14. If the Flickr 102 x 73 is OK..now where would I put it between the HTML you gave us here..I can't copy it into this comment panel..if you don't mind.
    Thanks Peter

    ReplyDelete
  15. Just wondering how to put the title above a picture that you would put in the sidebar. I put the pick in at the beginning and right aligned it rather than putting it in the sidebar. now I want words above it and am unsure how to do that. Thanks for your help. You have some great info. Nice.

    ReplyDelete
  16. Tried to answer but comment wouldn't allow certain tags needed to explain. Will do it later. I need to sleep now. Remind me if I forgot.

    ReplyDelete
  17. The post is ready and you can read it here: How to put images in the sidebar">How to put images in the sidebar, at the bottom of the post. It is a work in progress at the moment, and if you check back later you may see some changes.

    ReplyDelete
  18. Thank you soooooo much for this code. Be blessed, Paula Neal Mooney

    ReplyDelete
  19. excellent tips.i will try this

    ReplyDelete
  20. this is a great tip.thanks

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics