Add A Picture To Your WordPress Blog
As the Tagline states: WordPress Guides For The Geek Impaired, I at times forget what it is like to be a newbie blogger with little or no basic HTML knowledge. So here is a simple WordPress Guide to add a picture to a WordPress Blogs sidebar.
The first step is to upload a picture to your hosting account either with an FTP client or from your hosting accounts file manager. Next is to get the actual URL of your picture or image. To test if you have the correct URL of the image, type or paste the URL into your browser address bar and see if the image appears.
To add the picture to the WordPress sidebar form the WordPress dashboard: click Presentation then Widgets. Open or add a text widget and use the code shown below substituting the URL with yours and add a brief description of the image after the alt tag:
<img border="0" src="http://www.yoursite.com/imagefolder/pic.JPG" alt="a Brief Description" />
Close the text widget and click Save Changes.
If you are placing the image within a text widget that has other items in it you may want to add some space between the two items by placing a break or two before and or after them like this:
<br/> <img border="0" src="http://www.yoursite.com/imagefolder/pic.JPG" alt="a Brief Description" /> <br/>
You can also center the image by adding the next bit of code but be sure to take note of the closing tag added here! If you don’t close the div tag it will center everything shown below the image and could make your blog look terrible!
<br/> <div text-align="center">
<img src="http://www.yoursite.com/imagefolder/pic.JPG"
alt="a Brief Description" /> </div> <br/>
You can also specify the size of the image by adding the next bit of code and experiment with changing the size:
<p text-align="center"> <img src="http://www.yoursite.com/imagefolder/pic.JPG"
alt="a Brief Description" height="84" width="113"
></p>
There are more HTML and XHTML elements that can add a border or padding around the image. Remember any type of HTML or scripts can be added to a WordPress text widget, that is what makes them so flexible.
Learn more about text widgets here: Working With WordPress Text Widgets
WordPress Guide
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Tagged with WordPress Guide
Related Posts
9 Responses to “Add A Picture To Your WordPress Blog”
Discussion Area - Leave a Comment
If you have a question about your blog please leave a link to it. Please don't ask questions like "Why don't my blog work right?" and expect an answer.Two links or less are welcome, any more and your comment will be spammed! Nofollow has been disabled, all comments are moderated and will not appear until approved. Please submit only once.
XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Or just copy the example below and change your details.
Example - <a href="http://www.YourSite.com">Title Of Site</a>
Nice idea, but you might want to tidy up the HTML a bit:
First eg should be closed with a />
Second eg should have the whole thing ie <img src….. /> between the <br>s
Third eg should be text-align=”center” (not just align).
Also, I know this is aimed at beginners, but it’s probably better to use XHTML to prevent validation errors (ie an alt attribute in the img tag, <br /> instead of <br>)
Thanks Stephen, I cleaned up the code and edited the post based on your recommendations.
Jeff
This is a great blog, and I plan to come back often.
FWIW, though, the dancing Santa is mega-annoying!
Also, it really distracts from the Web 2.0 Wealth ad.
Thanks for the great WP info and ideas!
Kathleen, Thanks… Ummm I think.
Merry Christmas to you and remember Santa only comes once a year!
thx, i’m a html novice and this help me!
I have been the last 3 hours trying to do just this. i can see the photos when I type the URL into the browser so the only thing i can think of is that the theme template is somehow messing up my text widget. All I see is the first word of the alternate text. Do you think this is the problem?
Paul
Paul, either type the code in manually or replace the quotes, ” in the text. the code shown here is not raw HTML and the ” are in a MS Word format and not regular text.
It does matter.
How do you add a photo within a post? Every time I download a photo and put it with a post, I get a lot of white space next to the photo and the text does not start until the photo ends. Also, how do you add a caption? You can see how it appears on my blog
www.broadwayundercover.com. Thanks, Caroline
Caroline, you would need to add some code the the picture to wrap it around the post. But since I am not all the “geek” I cheat with a plugin. It adds many more options and features to the Visual WordPress editor. And after you upload the picture file you click on the phote editor to format and position it within the post:
Grab the plugin here:
http://www.laptoptips.ca/projects/tinymce-advanced/