August 15, 2011

Displaying Images in a Sidebar

01/08/2014: Typepad released a new module making it easier to upload, embed, caption, and link a sidebar image without the need to manipulate code. Learn more.

This article explains how you can take a custom image that you have saved to your computer and display it in your blog's sidebar as a link to a specific site URL.

Looking to update your Profile photo? Edit your Typepad Profile to upload a new image. (more info)

Upload the image to Typepad

Upload the image to your File Manager, accessible via the Library menu at the top of every 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 You will use this URL to write HTML code for displaying the image. We suggest keeping this browser window open so the image URL will be handy.

Add the linked image HTML

Next, use the Embed your own HTML module at Blogs > Design > Content to add the code to your blog's sidebar.

Click on Add This Module button to add your code. In the popup window, you can add an identifying label to the Label field if you wish. The label will not appear on your blog.

The HTML code should look like the following:

Edit the example code with the URL that you obtained previously for your image and the URL for the link.

Click Save and the module will appear in your sidebar list. You may then drag and drop it to the desired position on your sidebar. The image will now appear in your blog's sidebar as a link!

If you are using the Chroma Theme, go to Design > Custom Sidebar to add the code for the linked image.

Displaying an unlinked image

Upload the image in the same manner as described above and create your HTML code without the href portion:

<img src="" />

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 the steps above for uploading the image and creating code to display it. Again, the code should look something like this:

<img src="" />

Copy the part that points to the source of the image file, where it says src=, so you end up with something like this:


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 an Embed your own HTML module, then save the item and drag it into position.

The code will now display in your sidebar just as you've pasted it.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services