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 yourblog’s name at the top left ofthe black bar at the top ofthe page, and select‘Widgets’ from the dropdown menu.
And drag it into theposition you want itto be in you sidebar.
Once placed into the sidebar, thewidget will automatically open up.The first field is for the widget’stitle. This will show above thewidget when it is placed in thesidebar.
The second field requires the URLof the image the sidebar willdisplay.Once an image has been uploadedinto the Media Library, it isallocated a URL or web addressfor its own page on the blog.See how to find the image’s URLon the next slide.
An image’s URL is located by goingto the Media Library, finding thecorrect image, and mousing overthe title to bring up the ‘Edit’ link.On the next page look over to theSave menu on the top right to findthe URL.
The third field contains thealternative text, which is adescription of the image for thesearch engines (who cannot readimages) and also for partiallysighted web users (who requiretheir computers to read for them).
The fourth field contains theimage’s title, which shows up asthe little yellow tag when theimage is moused over. It shouldalso be descriptive.
The fifth field contains thecaption, which is the descriptionthat goes underneath the image.A point to note is that the captionis the second thing most likely tobe read after the post’s headline.
Alignment determines theposition of the image within thewidget.
You can change the pixel widthand height of your image here.
And if you want your image to bea link to another destination,write its URL or web address here.
The alternative widget wouldbe the text one, but then youwill need to write in some codeto make your images show up,like these social media iconshere:
Here is some simple code thatallows the images to show in thewidget in the sidebar and alsodirects that image to a web addressdestination.I will explain it in the next slide.
The first thing I want you tonotice is the image’s URL.It is placed between quotationmarks.
Now it has <img src= in front ofit, and /> after it.This simple code tells the widgethere is an image that needs tobe shown, and where it is kept.
This code will simply show the image in the text widget aligned on the left.Here it is complete: <img src=“http://alicedesigns.wordpress.com/2009/11/sidebar-twitter.jpg”/>Show this Open This is the blog The date it The name of Close Finishimage location where it’s kept was uploaded the jpeg location imag e
But if you want your image to be alink to somewhere else, you needmore code before and after it.Type in the destination URL theimage is directed to in front of theimage code.It should also be inside quotationmarks.
Now put in <a href= beforeit immediately in front ofthe quotation mark.And a > before the <imgwhich you will recognise asthe beginning of the imagecode.You are enclosing thedestination URL in betweenthe <>
But you need to cancel theinstructions to redirect theimage to another location atthe end of the code, so don’tforget to add </a> at the endof all the code.The <a href= and </a> is thecode for the link, and theimage code is placed inside it.Also note / cancels out aninstruction.Now this Twitter image islinked to my Twitter profile.
Now do the same for the other imagesand their destinations, and they will sitside by side inside the text widget.NB: It is advantageous to make yourimages the correct size before uploadingand inserting them into your widgets.Sophisticated stuff:If you want your images to be on separatelines, add a <p> in between each of theircomplete codes.If you want the image to open up on aseparate browser page, add this codebefore the > for the link: target=“_blank”.