Using WordPress – Part 2 – Adding images

Level: Beginner

Adding Pictures

To really make your blog posts stand out, you need to use images. You can use them to emphasize your points, give examples of things you are describing to the reader and to provide additional or alternate information.

WordPress makes adding pictorial content a piece of cake.

You aren’t restricted to still images either and can easily incorporate video.

How to add a picture

At it’s most basic, to add a picture is very simple. To start click on Upload/Insert just above the button bar.

Upload/Insert

This will take you to the Add Media dialogue box.

Add Media dialogue box

If the picture you want to add is on your computer (or a drive you have access to), it’s a simple matter of either dragging and dropping the file into the area indicated, or clicking on the Select Files button and going through the normal process for opening files that everyone should be familiar with.

Once you have dragged your file or clicked on Open, the image will start uploading. You’ll see a blue status bar as the image is uploaded and ‘crunched’. When it has reached 100%, a thumbnail (a small representation of the image) and several options will appear below. Scroll down to see all the options.

Add Media Dialogue - Image details

Here is a brief explanation of the different options:-

  • Title The title is populated with the file name to begin with, but that often makes for a very uninteresting title. You can change it to anything you want, but something appropriate to the subject matter is probably best! The title will display on screen when you hover the mouse over the image.
  • Alternate Text Alternate text won’t appear for most people. However, not everyone can see what is written on the screen and instead rely on a screen reader to read out the textual content of a site for them. Alternate text provides screen readers with additional information in place of the image itself. There are various regulations regarding creating accessible web content, so don’t overlook adding something into the Alternate Text field.
  • Caption It should be fairly obvious what the caption is for and it appears underneath your image.
  • Description You can specify what happens when you click on an image. For instance, you can elect for the image to be a link, which opens a new page with just the image, it’s caption and the description.
  • Link URL This is where you specify what to do when clicking on an image. There are three standard options.None Do nothing. The image is just an image and won’t link to anything.
    File URL This links to the file itself, which will open in the browser. Nothing fancy about this option.
    Attachment Post URL This is the one to pick if you want the image to be displayed inside its own post page, together with a description which forms the body text.
    There is a fourth option and that is to simply replace the URL listed with one you have chosen. It can link to anything you want. So for example, if it’s a picture of a famous person, you might want to link it to their IMDb page or something similar.
  • Alignment If you know anything about HTML and cascading style sheets, then you will know that alignment is a little more complicated than simply picking where the image appears. Text flows around the image. If you aren’t sure about something, you can always try it to see what it looks like and change it afterwards.
  • Size How large do you want the image to be? It doesn’t have to be the size of the original image. See what works for you.

Finally, when you are happy with the basic settings (yes, I said basic) click on Insert into Post.

Comments

Leave a Comment

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

Loading Disqus Comments ...