Adding Images to Your Sidebar

Ok.  This post is for all of you that may not know how to add images to your sidebar.  Up until a month or so ago, I had no idea how to do it myself (and really struggled to add the seahorse and flower of life images to the sidebar of my blog!).  There might be an easier way to do it in WordPress, but I am offering you my way of doing it.  If someone knows of an easier method, please let me know.

1.  First of all, make sure that the image is scaled down to the proper size for your sidebar.  Every blog design might have a slightly different width, so you might have to tweak the image’s size a bit.  For the sake of ease, the Lotus of Light avatar is made to fit sidebars that are roughly equivalent to the width of my sidebar (works out to 145 pixels wide), so you don’t have to adjust the size of the “sidebar graphic”.  A slightly larger version is present in my Awards and Embellishments page – and this one is too big….so don’t use it, or you’ll end up with a headache.  For those of you with other images, you can use a good photo-works program (like HP Photosmart Premiere) to re-size any photo of your choosing (choose “options”, then adjust the pixel width while keeping the aspect ratio the same…then rename the photo so you can call it up with ease in WordPress, and Voila!).  All you have to do to capture the avatar (as you know is “right click” and “save” to your computer).  You can capture the image in my last post.

2.  Go into your “Write” area, and load the Lotus of Light (jpeg, sidebar version) avatar as you would any other picture (choose “full-size” for the image size, then hit editor, as you would normally).  You need to “Save” this post, but not publish it.  I think mine is saved as a numbered post.  By Saving this post, you are permitting WordPress to access it as an upload so there is a URL reference to the photo (but, like I said, you don’t have to publish it).

3.  After saving the post, go to the “Manage” area.  Then, click on “Uploads”.  Under the Uploads area, you will see a few of your recently uploaded photos on the screen.  Click on the Lotus of Light avatar.  After clicking on the avatar, a new screen will pop up and you will be given a URL.  Your URL will be different from mine (depends on the date that you made the reference post in your own blog – done in Step 2).  Save this URL.  Copy it down, copy it by right-clicking…etc.

4.  Head over to the “Presentation” area and click on widgets.  This is a familiar spot where you add all of the fun sidebar do-hickies and things.  You will want to decide where you want the avatar to appear in your sidebar and add a blank text-widget there.  Inside of the text-widget, you need to place the following information:

<img

src=”http://poseidonsmuse.files.wordpress.com/2008/01/lotus-of-light-sidebar-resized-jpeg.jpg” alt=”lotus-of-light-sidebar-resized-jpeg.jpg” />

[there should be no space between the first line between <img and src, but my page is formatting it this way...and instead of using my URL, use the URL that you saved from Step 3 (that would be the red portion of the above garbledygook)...If anyone wants to try linking to my URL, you are more than welcome to, but I'm not sure that it will work!]. 

5.  Click Save Changes and you should be all set!

6.  If you have any troubles, let me know and I can give you a hand.  I have noticed that a few whiz-kids have already added them to their sidebars already.  If you continue having trouble and feel like giving up, don’t despair.  You can add a Page to your blog and place the avatar there if you like (or you might simply keep it for display on your computer, or not use it at all!).  The avatar was meant to beautify, not frustrate!  So, have fun with it!

-PM