Displaying Images In Your Sidebar

How do I display images in my sidebar?

Answer

This articles explains how you can take a custom image that you have saved to your computer and display it in your weblog sidebar with a link to another site. Clicking the image will open the site you specify. This method can be used for displaying an image such as a Powered by TypePad button.
This article also explains how to display an unlinked image and how to display a custom image for a webring.
Note: You may want to take a look at our Widget Gallery. A widget is piece of code that you can add to your weblog automatically without having to create the code yourself. For example, there are widgets to add a link to your FeedBurner feed and even a FeedBlitz subscription form.
Step 1: Upload the image to your account
Use the file manager to upload the image. The file manager is located on the Control Panel > Files page. Browse for the image on your hard drive and then upload it.
After uploading the image, click on the image filename to view it in your browser. Your browser's address bar will show the URL for the image, such as http://example.typepad.com/image.jpg. You will use this URL to write HTML code for displaying the image.
Your code should look like the following:

Replace http://example.typepad.com/image.jpg with the URL that you obtained previously for your image.
Step 2: Add the code to your template
Next, use a Link TypeList to add the code to your weblog's sidebar. If you haven't already, create a Link TypeList and add it to your template. See Creating a New TypeList for tips on how to create the list and add it to your page.
Click on Add Item to add to the list. On the next page, take the image code that you created in step 1 and paste it into the Link title area of the item.
In the Link URL area, enter the URL that you would like to open when the image is clicked, such as:
You can also enter text into the Notes area of the item and set the configuration of the list to display notes "as tooltip." Then the note will display when you hover your mouse over the image.
Save the item and the image now appears in your weblog sidebar as a link!
Displaying an unlinked image
The above method should be used only if you wish to display a linked image. If you don't want your image to be linked to anything, follow the instructions in this section instead.
Upload the image in the same manner as described above and create your HTML code:

Now create a new Notes TypeList and add a new item to this TypeList. Place the code in the Notes field of the TypeList item and save.
Bonus Tip: Displaying a custom image for a webring
If you join a webring that requires you to store their image on your own server, or if you wish to use a custom image for the webring instead of the one they provide, follow step one above for uploading the image and creating code to display it. Again, the code should look something like this:

Copy the part that points to the source of the image file, where it says src=, so you end up with something like this:
src="http://example.typepad.com/image.jpg"
Look in the existing code snippet you would like to add, for example if it is webring code it often says src="IMAGE URL HERE" in the code, and that is what you would replace with the src= from your uploaded image.
When you have your extra code snippet prepared, paste it all into a Notes TypeList item, in the Notes field, then save the item.
The code will now display in your sidebar just as you've pasted it.