how to place images inside widgets in the sidebars in wordpress

How to place an image inside a widget on your sidebar

http://fairyblogmother.co.uk

Go to ‘Appearance’ in the left sidebar of the Dashboard and from the menu extension select ‘Widgets’.

Alternatively, click on your blog’s name at the top left of the black bar at the top of the page, and select ‘Widgets’ from the drop down menu.

Select the widget called ‘Image’.

And drag it into the position you want it to be in you sidebar.

Once placed into the sidebar, the widget will automatically open up.

The first field is for the widget’s title. This will show above the widget when it is placed in the sidebar.

The second field requires the URL of the image the sidebar will display.

Once an image has been uploaded into the Media Library, it is allocated a URL or web address for its own page on the blog.

See how to find the image’s URL on the next slide.

An image’s URL is located by going to the Media Library, finding the correct image, and mousing over the title to bring up the ‘Edit’ link.

On the next page look over to the Save menu on the top right to find the URL.

The third field contains the alternative text, which is a description of the image for the search engines (who cannot read images) and also for partially sighted web users (who require their computers to read for them).

The fourth field contains the image’s title, which shows up as the little yellow tag when the image is moused over. It should also be descriptive.

The fifth field contains the caption, which is the description that goes underneath the image.

A point to note is that the caption is the second thing most likely to be read after the post’s headline.

Alignment determines the position of the image within the widget.

You can change the pixel width and height of your image here.

And if you want your image to be a link to another destination, write its URL or web address here.

And don’t forget to save.

And here’s your picture widget!

The alternative widget would be the text one, but then you will need to write in some code to make your images show up, like these social media icons here:

Here is some simple code that allows the images to show in the widget in the sidebar and also directs that image to a web address destination.

I will explain it in the next slide.

The first thing I want you to notice is the image’s URL.

It is placed between quotation marks.

Now it has <img src= in front of it, and /> after it.

This simple code tells the widget here is an image that needs to be shown, and where it is kept.

Here it is complete: <img src=“http://alicedesigns.wordpress.com/2009/11/sidebar-twitter.jpg” />

Show this image

This is the blog where it’s kept

The date it was uploaded

The name of the jpeg

Finish image

Open location

Close location

This code will simply show the image in the text widget aligned on the left.

But if you want your image to be a link to somewhere else, you need more code before and after it.

Type in the destination URL the image is directed to in front of the image code.

It should also be inside quotation marks.

Now put in <a href= before it immediately in front of the quotation mark.

And a > before the <img which you will recognise as the beginning of the image code.

You are enclosing the destination URL in between the < >

But you need to cancel the instructions to redirect the image to another location at the end of the code, so don’t forget to add </a> at the end of all the code.

The <a href= and </a> is the code for the link, and the image code is placed inside it.

Also note / cancels out an instruction.

Now this Twitter image is linked to my Twitter profile.

Now do the same for the other images and their destinations, and they will sit side by side inside the text widget.

NB: It is advantageous to make your images the correct size before uploading and inserting them into your widgets.

Sophisticated stuff:

If you want your images to be on separate lines, add a <p> in between each of their complete codes.

If you want the image to open up on a separate browser page, add this code before the > for the link: target=“_blank”.