How to add an image to your web page with a widget

When writing a post, whether it’s for the blog or a page, most people are familiar with how you insert images (media) into your content. There is also the option to insert a featured image instead of directly into the post itself. However, what about adding an image to a text widget, or just simply adding an image to a sidebar?

You really only have two options to do such a task, the first is to use a plugin that gives you an actual image widget. There are several you can choose and each offers their own set of options; some are good and some are not so good. Aside from this method, the other option is to use basic HTML.

Using the Plugin Method

I’m one that prefers to use HTML in a text widget, but this can make someone who is new to HTML very nervous and could result in a decision to find an alternate theme that doesn’t require any coding by the user…I can understand the hesitation.

Using a plugin to upload and insert an image (or images) can be very enticing because you don’t have to look at a single piece of code. I’m sure that most of you reading this will agree. So let’s take a look at a couple of plugin options…

  • Image Widget – Perhaps the most popular, especially when you see the ratings. I tried this recently with my Longevity Pro theme for the front banner image, and it worked very well.
  • Simple Image Widget – Probably the second most popular one at 70,000+ downloads, I tried this one out, but I think this is best suited for sidebars, but not for banner usage.

Beware the Paragraph!

The one thing I have noticed with several plugins, particularly with the image ones, is that they wrap the image in a paragraph tag. Why is a paragraph a problem? Let’s say you are using a theme that includes a banner sidebar position at the top of the page, much like my themes have. Paragraphs are often styled with a margin, whether it’s a top, bottom, or both. This adds a space around your image, and this is why it causes a problem. For example, the Simple Image Widget adds a <p> tag around your image, so if I use this on the Longevity theme, this is what happens…the paragraph tags create a space at the top and bottom:

image paragraph tags

However, if I used the Image Widget plugin, this is what happens:

image no paragraph tags

Which one would I use for the banner headers? I would definitely opt in for the Image Widget, and then use the Simple Image Widget for standard sidebars where I can include a text link and actual text content below the image.

Each image plugin has its own set of options, features, and layout, so it depends on what you want to use it for. There are other plugin options that you can choose, so check them out before you make your decision.

One thing to keep in mind is that some themes include CSS styling that cancels out margins/paddings from banner areas. If you use a plugin that adds the paragraph tag, then you don’t have to worry about that, but it’s often hard to determine if that type of styling is part of your theme.

The best thing about these plugins is that you do not have to touch code!

Now for the Adventurous Users

For myself, I have been coding for a long time so using HTML is easy for me. For anyone who is familiar and comfortable with HTML will be able to handle this method of inserting an image into a text widget…or even a page.

I will probably scare some of you away when you see how many steps are involved with the text widget and HTML method, but this is why I started this article with image plugins so that you have the choice. What I will do is break this down into steps:

Step 1 – Upload your Image

You have probably done this before so I won’t get into a lot of detail, with the exception of what you need to do here. When you upload your image, click on the “EDIT” link. When you do this, you will get a new window with a File URL field in the upper right corner of this window. Inside the field is the File URL (link to the image) that you need to “Copy” the Ctrl + C on your keyboard, or for MAC users, Command + C keys.

Step 2 – Create Your Widget and Add HTML

Now we go to Appearance >> Widgets and drag a text widget into the sidebar position we want to show this image in. For example, let’s say it’s the Banner position. Now we need to add some HTML code for our image by using this method:

<a href=”your File URL” alt=”a short description” />

With that copied File URL we saved, we need to paste that into that line by replacing your File URL by pasting the copied File URL we have. After you’re done, our example should look something like this:

<a href=”http://www.yoursite.com/uploads/image.jpg“alt=”Image of a Beach” />

All we need to do next is to create a small image description for our ALT tag. Always have an ALT tag with a description for your image.

A Couple Other Things to Consider

First, you can congratulate yourself for adding an image to a text widget…unless you used an image plugin, I guess you can still do that because you made it easier. However, there’s a couple things to consider when you use a widget:

  • Do you want the widget title to show on the front-end?
  • Do you want the widget to be published on select pages or all pages?

Let’s tackle the first oneDo you want the widget title to show on the front-end?

By default, any widget that has a title field filled out will show up on the front of your website; WordPress has no method to disable this so we need a plugin (yes, more plugins). The one I recommend is called “Remove Widget Titles” by Stephen Cronin. An awesome plugin because it allows you to have a title for your widget on the back-end (admin) but hidden from the front-end by adding an exclamation mark ! just before the title begins.

So if the goal here is to add an image to your page, such as a banner header, we don’t want the widget title showing.

Now the second questionDo you want the widget to be published on select pages or all pages?

I’ve already written an article called How to display widgets on select pages only which talks about this very subject. But to reiterate the concept, a plugin called Display Widgets will help you select what pages to show a widget on. If you use Jetpack, you are in luck because it has its own version called Widget Visibility that does the same thing.

Each one adds a set of options at the bottom of every widget for you to select where you want a widget to show (or not show). For a banner image to just show on the front-page, this works very well.

 

Leave a Reply

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