How to Add an Image to Your Sidebar

I get this question a lot, so I thought it would be helpful to write up a little primer on HTML and some quick instructions on how to add an image to your sidebar.

A Quick HTML Primer

HTML stands for “Hypertext Markup Language,” and is the code for most webpages that tells your web browser what to display. HTML uses “markup tags” to tell the browser what to do.  Tags are indicated by angle brackets. Most tags are “wrappers,” which means there’s an opening tag and a closing tag, with something in between that they’re modifying or acting upon (they can also be called “start” and “end” tags, if you prefer).

For example, if you want to make something bold, you can use the <b> tag. That tells the browser to make the text after that tag bold. You then use the </b> tag to tell it to stop bolding. (The forward slash is the part that indicates it’s a closing tag).

Some tags, like <b> are very simple and have no options (it’s either bold or not).  Other tags allow you to set various attributes for them, such as the location of a file or height of an image. When you set an attribute, it’s indicated within the opening tag.  The structure for an attribute is simply:  attribute=”details”.  You use a specific attribute code, an equals sign, and then enclose the details of the parameter within quotation marks.

The Image Tag

The image <img> tag doesn’t require a closing tag. It starts with “img”, and then you simply specify the location using the “src” (source) of the image to be displayed, which is the web address of the location of the image file.

The Anchor Tag

In many cases, you’re probably going to want to make the image link to something else. To do this, we use the anchor tag (also called a “link” tag). It’s indicated simply by an <a>, and the “href” parameter tells the browser where the link goes.

Combining the Anchor and Image Tags

The anchor tag can wrap around more than just text; you can wrap it around an image.  When you do that, the image becomes the clickable link.  Important to note that some browsers will add an ugly blue border around the entire image when it’s clickable, so you’ll want to tell the browser explicitly not to display the border (unless that’s what you’re into, of course).

In this example I’ve put each tag on a separate line, which is fine because HTML doesn’t care about line-breaks.

A Few Other Attributes

Strictly speaking, the code above will work just fine, but there are a few other attributes that are helpful to know about before we continue.

It’s always a good idea to specify the height and width of an image.  That tells the browser, before it even loads the image, what size image it should expect.  This helps speed up page load times, and keeps the page from shifting around as everything loads into place. Although you can use the height and width attributes to get the image to display at a size other than it’s actual size, this is not a good idea.  When the browser resizes an image, it’s not going to do as good a job as your image editing program (like Photoshop), so it may look a little fuzzy. And if you tell it to display larger than the actual size, then it’s definitely going to look fuzzy. Equally important, if you’re having your readers download large images and then using the browser to scale them down, it takes extra time to download all that unnecessary data.

If you’d like to center the image within the sidebar, you can use a little bit of style code to make that happen. The best practice for doing this is to use a “div” tag and then apply some styling to it: <div style=”text-align:center”> will do the trick.

It’s also a good idea to use an “alt” tag, which specifies alternate text, should the image not be displayed — and it also lets search engines know what that image is about. (It’s not a huge factor in search engine optimization, but it helps.)

Finally, if you’d like the link to open a new browser window, you can specify target=”_blank” (note the underscore, that’s not a typo). Most browsers will respect that, and open a new window when the link is clicked.  Note that you should use target=”_blank” sparingly — you don’t want most links on your site to open new windows!

Upload Your Image

So you’ve got an image file you’d like to display.  Before you can set up the code, you’ll need to know the location of the image file.  If the image is on someone else’s server, you should have permission before linking to it directly (“hotlinking”) — otherwise you’re stealing their bandwidth.  (Additionally, if they ever move the image you’ll be stuck with a broken link!).

A better practice is to take the image and upload it to somewhere else you control.  That can be your blog itself, or a free image hosting service, like Flickr.

If you use Flickr, once you’ve uploaded the file to that service and are viewing it, you can right-click on it and then open the image in a new window.  From there, you’ll see the URL (at the top) of the image location.  (Your browser may also let you “Copy Image URL,” which copies the location it to the clipboard, saving you a step.

 

If you want host the image on your own site:

For WordPress, go to your dashboard and then select Media –> Add New. Once you upload the file (just as you would when adding an image to a post), WordPress should show you the file location.

On Blogger, there is no image upload tool unless you’re writing a post. So the quick way to do it is to create a draft of a post, upload an image, and then preview the post (you don’t have to publish it). That will get the image onto Google’s servers.

Putting it All Together

Depending on which blogging software you use, the way to get the code onto the page varies a little bit, but the basic idea is the same: Create a “widget” or “gadget” for your sidebar and plunk the code into it.

For WordPress, go to your dashboard and then select Appearance –>Widgets.  Drag a “Text” widget into the sidebar area on the right, and then put the code into the larger field.

For blogger, go to Layout, then click “Add a Gadget,” and choose the “HTML/JavaScript” gadget, then put the code into the larger “Content” field.

A Few Final Tips

  • The order of the attributes within a given tag does not matter, as long as you start with the specific tag code (a, img, div, etc.).
  • If it’s not working, make sure you’re using straight double-quotes, not the little curly ones that some word processing programs use (it’s the regular double-quotes — this will usually only be a problem if you’re typing in Word).
  • Be sure there’s a space before each attribute.
  • If you want to have several images in your sidebar, you can put them all in one text box — you don’t need multiple widgets/gadgets. If you use a separate <div style=”text-align:center”> tag around each image, it will stack them nicely centered, one on top of the other.  If you want a bit more vertical space between them, you can put a linebreak between each block of code, and check the “Automatically add paragraphs” option at the bottom… Or change your opening div tags to <div style=”text-align:center;margin-bottom:20px”>

And that should do it!  Any questions?

 

Filed Under:

Tagged With:

Related Posts

Comments

    1. Hi Anelia – Yes, this should work similarly for video. I usually recommend uploading a video to Youtube or Vimeo, and then embedding it on your site with one of their embed codes. 🙂

  1. Thank you for the info. But still have something to ask please! Can I use this same method to unable image uploader file true mobile profiles pictures? I mean uploading images true mobile profile pictures to my Blogspot? Help please!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.