How To Insert Photos Or Images Into Wordpress Posts And Pages

Most of us will have photos or images on our personal computer that we want to add somewhere in a Wordpress post that we have just written. The process for adding or inserting images is just the same for pages.

Inserting an Image or Photograph into a Post or Page

googlesmileThis is really easy to do, but can be be difficult to understand and confusing until you have been through the process a few times.

Unfortunately it is made more complicated because it is almost a two stage procedure and it is not particularly intuitive.

This is what must happen to get an image or photograph into Wordpress content:

[1] Get the image file from your computer into Wordpress on your website or blog.

[2] Insert the image from Wordpress into your page or post.

Before describing this process in more detail you need to understand what happens with images that are loaded into Wordpress from your computer…

Introducing the Wordpress Media Library

imagesmediaoptionThe Media Library in the Wordpress admin dashboard is unique to your website and it is where Wordpress stores all image files that you load into Wordpress for inserting into content.

Just find MEDIA in the dashboard menu options and click on it to display the contents of your Media Library.

This will list all the images you have loaded into Wordpress and the post or page that it has been used it (attached to).

If you try it now you and you have not uploaded any images yet you will find nothing listed.

imagesmedialibrary2

Adding Images To The Media Library

This is Step One and if you already have a bunch of photos or images which you know you will want to add to posts or pages in the future you can upload them to the Media Library beforehand.

Just click on ADD NEW in the Media menu options as shown above. This will then bring up this Upload New Media screen:

imagesupload

Click on SELECT FILES to open a BROWSE window so you can search for the image files you want to upload on your personal computer.

imagesselectfiles

Click on the image you want to select it and then click on open to start the upload. You will see the message ‘Crunching’ as the file is uploaded to Wordpress and when completed the following updated Upload New Media page will be displayed with details of the image file you just uploaded.

imagesuploaddone

You can change the Title, Caption and Description if you want to and then SAVE CHANGES, but the image is already in the Media Library.

As mentioned above you can see all upload images listed by clicking on MEDIA then LIBRARY in the menu options.

Inserting Images From The Media Library While Posting

imagesuploadinpostStep Two of the process is to add uploaded images or photographs into your posts or pages and you can do this as you write content to them.

Simply position the cursor at the point where you want the image inserted and click on the Upload/Insert Media Icon for Images situated in the top left corner of the Post/Page Visual Editor:

imagesuploadicon

Then you will see the ADD AN IMAGE window displayed and you can choose how or from where you wish to add an image file to your post or page. By default this displays the From Computer option tab first as this is the option most people will use:

imagesaddimage

The choice selection is by Tab and as you can see the options available are:

  1. From Your Computer
  2. From A Web Address URL
  3. From The Gallery for This Post or Page
  4. From Your Site’s Wordpress Media Library

Tto add the image that was previously loaded in to the Media Library above you need to click the MEDIA LIBRARY tab and the image files already uploaded will be displayed in a list:

imagesaddlibrary

Then just click on the SHOW link next to the image you want to insert into your post or page and another window showing the image details will be displayed:

imagesaddlibrarydone

You are able to change the Title, Caption and Description and if you want you can also add a web address (URL) to hyperlink the image to a  another web page or website.

If you select Left, Right or Center it will cause the image you are about to insert to be positioned accordingly and any text near the image will wrap around the  image.You can also change the size of the image using the size options displayed.

googlesmileFinally just click on the INSERT INTO POST button to add the image to your content and the visual editor will re-display the post or page with the image embedded.

This smiley face image has been inserted at it’s original size and aligned to the left.

Adding Images Directly From Your Computer When Posting

This is the most popular option for inserting images into posts and pages and involves Adding Images from Your Computer.

imagesuploadiconWhen in the Post or Page Editor click on the  add image icon to display the Add An Image window:

imagesaddimage

Click on the SELECT FILES button to open a browser window that will allow you to search for images on your computer.

This part of the process is exactly the same as that used above for adding images into the Media Library. However for the sake of completeness and clarity it is repeated here.

imagesselectfilesCLICK on an image to select it and then OPEN to upload it into Wordpress.

When the image has been uploaded, which could take a second or two, then the Add An Image screen will display the details of the uploaded image:

imagesaddimagedone

Once again you get the option to change the Title, Caption or Description. You can also add a URL to link the image to a different web page or website.

In addition you get options to line up your image to position it in the post or page. Left, Right and Center will cause the image to be position as chosen and allow text to wrap around the other edge of the image. Just try different alignments to see what effect they have.

You also get to choose the size of the image, so just click the relevant radio button to resize or select Full Size too leave as the original.

Finally click on INSERT INTO POST to insert the image into your content.

girlwithlaptop

The image will then appear in your content (in the Visual Editor) so you can see what you have done.

This image has been right aligned!

Please note that the visual editor will often NOT display the images and nearby text correctly as it will actually look in the post or page when it is displayed on your website or blog, so click on the PREVIEW button to see a correct rendering of the content and images.

It’s Done!

How To Change Image Settings

If you need to change anything about the Image you have inserted just CLICK on it and the image will be highlighted with a box around it and an EDIT and a DELETE icon in the top left corner of the image.

imagesedit

Just click on the left icon to edit the image settings…

The other icon on the right allows you to delete and remove the image from the post or page.

imageseditupdate

As before you can change whatever you want to change. Click on the ADVANCED SETTINGS tab to change additional settings for the image as shown below:

imageseditadvanced

Scroll down to the bottom of the window and click on the UPDATE button to save any changes.

And that’s it – you now know how to add photos and images to your Wordpress posts and pages and change their settings!

Related Articles

8 Responses to “How To Insert Photos Or Images Into Wordpress Posts And Pages”

  1. Fantastic.
    Easy to follow, lots of screenshots and in plain English… just what I needed.
    Thanks for putting it together.

  2. Hello!

    I wonder if it is possible to fine adjust the position of an image in the post or in page (some like corel style).

    Thank’s for helping an very-beginner.

  3. Wordpress itself doesn’t provide this facility yet – so unfortunately it can’t be done easily in posts or pages. But if you can code HTML tables or divs you could probably make it work!

  4. I am in need of one help please help me in the cleaner gallery plugin.
    In gallery setting i want the default visual editor for the image description.
    Can anyone help me is there any code to replace the textarea with this default visual editor

  5. Suggest you contact the plugin author for cleaner gallery – which seems to be Justin Tadlock…

    Cleaner WordPress Gallery Plugin

  6. Thanks, I spend 2 hrs googling trying to find this solution. Even though I am a wordpress newbie, I am very technical. I guess I should have RTFM, because the way they set it up wasn’t very intuitive at all.

  7. Is there a way to insert many pictures from the gallery into a post – not one at a time???

  8. Hi ,

    I was going extremely crazy to find out this information . This is such auseful Information . thanks a Lot

Leave a Reply

WORDPRESS HOSTING DEAL

Wordpress Training

Wordpress Crash Course

Wordpress Crash Course

Wordpress for BEGINNERS!

Digging Into Wordpress !



DOWNLOAD NOW - Features 400+ pages of practical WordPress wisdom!

ADVANCED Wordpress

Subscribe To Our Tutorials

 Subscribe in a Feed Reader

Subscribe by Email:

Backup Buddy WP Plugin

Backup Buddy

Backup or Clone a WordPress site!

Including widgets, themes and plugins

Best Wordpress Books!

-
VISIT OUR
WORDPRESS BOOKS STORE
Checkout the Best Sellers !

Spread the Word!


Social Bookmark This Site