17th June 2007

How To: Add a Picture to your Blog Entry (Post)

I’m often asked “how do I add a picture to my blog post?”…….. well the answer depends upon what software you’re using to create your Blog, of course, but since many of the people who ask me are WordPress users, as am I, I’ve created this How To specifically to answer that question for us WP’ers. Without further ado, here ’tis…..

How To Add a Picture to your Blog Entry:

First and foremost, be cautious about using photos from the internet unless you get them from a [free or cheap] stock photography source – otherwise you may run into copyright issues. If a particular photo or graphic is only available from someone else’s website, and you are not promoting that site, they are not likely to be happy if you use their photo without permission, so I recommend that you ASK FIRST. If you are comfortable that this won’t be an issue, then follow these instructions;

  • If you don’t already have it, download and install IrfanView – this is a free image manipulation program for Windows that will let you crop, resize, alter (color etc), and optimize photos until it suits your purpose; http://www.irfanview.com/ Be sure to read the tutorial so you are familiar with how to use the program. There is a good tutorial for several common functions here – http://cit.information.unl.edu/tips/irfanview.htm%20;
  • Photos will lose clarity if you try to make them larger – making them look fuzzy – so be sure to start with a photo that is as large as, or larger, than what you want to use;
  • If you are using a stock photography site, simply download the photo and store it on your computer in a folder called something like “Pictures” or “Blog Photos” if you already have your personal pictures stored in a folder named Pictures;
  • If you are “obtaining” the photo from someone else’s website, you can generally copy it by right-clicking on it and choosing “Save As” [best] OR if Save As isn’t an option try choosing “Copy”. If you can use Save As then give it a name that is meaningful to you and save it to your folder designated for your blog photos. If you have to use Copy, then launch IrfanView and from a New file choose “Paste”;
  • If it is saved to your computer then from IrfanView use File=>Open and open the photo;
  • Modify as you like but be sure the size is appropriate (not too big) for your post and most importantly on the Resize dialog be sure the DPI is no higher than 72 because the web cannot display higher resolutions so anything above 72 just makes the file size larger and is wasted resolution;
  • Save the modified photo using a new name – OR better yet save it to a new folder within your Pictures folder called something like “Modified Pictures” using the same name so you don’t have to rename it;
  • Upload it to your “Uploads” folder in your blog directly from the page you are writing or editing your Post, down below – browse to the modified file, give your photo a name and title – something both descriptive and keyword-rich, then click upload;
  • For Show choose “Full Size” (unless for some reason you really only want to display a Thumbnail, for example if you want that Thumbnail to link to a larger version of the photo to show detail, whatever). For Link To choose where you want it to link to, which may be nowhere (“None”);
  • In your Post text, have your cursor at the point you want to insert the photo and click on “Send To Editor” – don’t worry if you inserted it at the wrong point – you can just highlight it, cut, and paste it where it should be – this is easier to do from the Code or HTML editor option;
  • You will need to be in the Code or HTML Editor option in order to use your Stylesheet to make the photo “float” to the left or right of your text, whichever you think will look best. Check your Stylesheet (.css file) to find the appropriate class for your image (depending upon your template, it is generally something simple like “.left” or “.alignleft” or right as the case may be). When you are editing in the Code/HTML editor, find the <img tag and before the closing of the tag (which looks like this “/>” without the quotes) ADD the words: class=”left” or class=”right” (or whatever is the actual class name from your stylesheet). There should be a space before and after what you add.

That’s all there is to it – you’ve now added a picture to your Blog entry!

Share with others:
Please Rate this Post:

Comments are closed.