Images are a handy way of making your blog posts more interesting to look at. A few well placed photos, graphs, graphics or clipart can improve the readability of otherwise text heavy pages. The steps to inserting an image into a blog post in WordPress are:

  1. Place the cursor where you want the image to appear
  2. Click Add media
  3. Click Upload then Upload Files and upload the image from your computer
  4. Enter a title text with keywords
  5. Choose the size, alignment and link settings
  6. Click Insert

If the image is already in the media library then you can skip the upload part.

1. Place the cursor in the text where you want

If you are going to have the text above and below the image without wrapping around the sides of the image then create a blank paragraph by pressing enter below or between the paragraphs where you want to insert the image. otherwise, if you are inserting an image which will be aligned to the left or right and the text is going to flow around it then place the cursor at the start of the line where you want the top of the image to sit.

Click cursor

2. Add Media

The Add Media button can be used for inserting images, pdf and word documents into a page. If you use it to insert a pdf or word document then it will insert as a link on the page rather than an image.

Add media

3. Upload your image

Once you have clicked Add Media you will be on the Media Library screen. If the image you want is already uploaded to your website then you can select it from the library and skip the upload process. However if you want to upload a new image click on the upload tab and then the upload button in the centre of the screen.

Upload images

4. Image title

Make your image title a short text description of the image which includes your keyword for that page or post. If you have named your image files with descriptive names then you will find that the title has been set to the image name. It is helpful for your search engine optimisation if your images have well worded titles with keywords.

image title

5. Image size, alignment and link

Image sizes

WordPress has 4 standard image sizes, these can be changed to suit your website but are by default:

  • Thumbnail (square): 150×150 pixels
  • Medium: 300 pixels wide with the height scaled down accordingly
  • Large: 1024 pixels wide, though we often set this to be the full width of your website content column, eg 700px
  • Full: The maximum size of the image available

For most purposes in a blog you will be using medium for pictures which will be about half the width of the text area, or thumbnails for a square image to the side of the text, or a large image to fill the width of the blog page with text above and below. If you want to change the default image sizes it is in the WordPress dashboard under Settings > Media.

Alignment

There are four options available:

  • None: text is above and below the image, no wrapping of text around the image
  • Left: image is on the left of the blog post and text wraps around the right of the image
  • Right: image is on the right of the blog post and text wraps around the left of the image
  • Center: image floats in the center of the blog post

Link:

The default is usually to link to the media file, so that if someone clicks on the image they see the full sized version of that image. You can change the link so that it points to a certain page or external website link, pdf etc. The other option is the Attachment page and it is unlikely you will want that because there isn’t usually anything of interest on the attachment page so just ignore it.

Add New Post ‹ Jezweb — WordPress (4)

6. Insert the image

That’s it, you have successfully inserted an image into your blog post.

image inserted


About 

    Find more about me on:
  • facebook
  • googleplus
  • linkedin
  • pinterest
  • twitter
  • youtube

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>