Add an image in a WordPress post or page

Before you begin...

You may find it helpful to read the article about resizing images so that they are optimised for your website. You can find that article by clicking here.

If you are in need of stock images, you can try at our partner site here: http://www.fotolia.com


To add an image

1.To add an image: first, click to the place in your post or page where you would like the image to be inserted. Next, click on the Add Media button – this is located above the formatting options box. An option box pops up and at the top you will see there are three tabs: From Computer | From URL | Media Library.

2.As you can see, you can choose to upload a new image from your computer, or link to an existing image already available on the internet somewhere [Caution: 3 issues with this, 1) copyright issues 2) people don’t appreciate you linking to their images unless specifically agreeing because each time your website loads their image, it is essentially using up their bandwidth. 3) If the images is deleted off their server, the image won’t display on your site either!].The last option enables you to use an image you’ve already uploaded into the Media library.

3.Let’s assume you’re uploading a new image: choose From Computer if it’s not already highlighted. Next, click on Select File (or Browse if not using the flash uploader).

4.A folder box pops up that will allow you to select the image from your local computer hard drive (you can select multiple files to upload – or if not using the flash uploader, one only).Once you’ve uploaded it, you’ll be presented with some option fields to fill in. The most important of these – which you should complete are:

Title: this may be displayed when someone clicks or hover over the image.

Alternative Text: this is what search engines read

Caption: this is what is displayed underneath the image.

Link URL: do you want the image to be “clickable” – if not, leave it blank – otherwise, you can select;FILE URL - the image is displayed at full resolution in the visitors browser screen, regardless of what size you choose below – or if you want the image to link to a specific website page address (e.g. offsite, or to another page entirely) you’ll need to manually copy/paste that URL in here.

Size: If you wish to display a small thumbnail, then it’s best to select that – you can always re-edit the image size later – but it’s best to get it right first off.If you choose a thumbnail or small sized image, but you have selected the File URL for clicking purposes, the image will be shown as full size when a visitor clicks on it.

 

5.If you have uploaded just the one image (skip to below for multiple images) – you can now click on Insert Into Post and you’ll see your image has been inserted.You can now use the left centre or right align buttons on the formatting bar, to further position the image.You can also drag it around the post to try it in different locations.

6.I suggest you now press the Save Draft button (top right of page) – this will prompt you with a “Post draft updated. Preview post” message – click on preview so that you can see what it looks like on your site.

You can always have a play around and experiment a little.Note: description is not important, so just leave that blank.

7.If you have uploaded multiple images, make sure you’ve completed the field information for each one – then click Save All Changes button at the bottom.You are then presented with a summary screen of your multiple images.You can click on “Show” or "Show All" on the right to amend anything.When you’re happy, at the bottom you can click on “Insert Gallery” to add your multiple images.

If you just prefer to add them one at a time in different locations within your post – that’s fine.You’ll have to select “show” then insert into post, for each one.  In terms of how the will appear, you will need to experiment with the view preview before committing the changes to the live site.

8.To edit the image once you have inserted it, click once on the image and you will see two icons – the first opens the editor, the second circle with line through enables you to delete it.In the editor, you can see that you have a variety of options to reduce the image size, change the field texts, modify alignment – the link and so on.


--

  • 59 Users Found This Useful
Was this answer helpful?

Related Articles

Add a Post in WordPress + Video Tutorial

You might also think of a "Post" as a news item or blog article.  Although the Post editor screen...

Add a link in a WordPress post or page

In this help article, we explore how to add a web link or email link to content in your WordPress...

Resizing Images + Video Tutorial

IntroductionYour website will feature images and since you'll be managing some of the images...

Add a Page in WordPress + Video Tutorial

A page is different from a post (see other help article "adding or editing a Post")Please note:...

Edit a WordPress Page or Post

Please note that you may need admin rights to edit pages or posts Editing an existing post /...