Inserting images, pictures and photos into a post and page

Print Friendly

Effective use of images grab your readers attention and encourage them to read your posts.

Directly above your post/page editor is your Add Media icon which you use to insert images, pictures, photos, photo galleries, videos and audio files into your posts or pages.

You use the Add Media icon to add images to posts or pages by either:

A. Uploading an image from your computer
B. Linking to the location of an image on the Internet
C. Adding an image from your media library

Please note:

  1. You can’t just use any image you like in a post or page.
  2. Unless stated otherwise the law automatically grants full “copyright” over any creative work a person makes.
  3. Refer Fair use, copyright and introductions to using images to learn more about copyright, creative commons and using images from digital cameras

From Your Computer

Video

You insert an image from your hard drive into a post or page as follows:

1.  Go to Posts > Add New or Pages > Add New.

Add New Post

2.  Place your cursor where you want the image to appear and then click on the Add Media icon.

Click on Add Media

2. In the Add Media window click on the Upload files and then Select Files.

Click on Upload Media

3.  Locate the images on your hard drive

Use your Shift or Crtl key to select more than one image.

4.  Click Open to start uploading the images.

5. While your images are uploading you will see a progress bar.

Images uploading

6.  If you upload more than one image you click once on an image to edit its attachment details.

Below is a summary of the options you can change in the Attachment Details area:

Attachment details

  • Title:  The title displays on the image attachment page.  
  • Caption: Image caption displayed directly below the image.
  • Alt Text:  The text displayed when image is not available.
  • Description:  Displayed on the image attachment page.
  • Alignment:  The position of the image in  your post or page.   Options are: None; Left, Center or Right.
  • Link to:  The URL to which the image is linked to.  Choices are:
    • None – removes link completely.
    • Media File – links the image to its original full size version.
    • Attachment page – links image to its attachment page
    • Custom URL – allows you to link image to custom URL,  For example, handy if you want to link an image to another website.
  • Size:  The size of the image.   Choices are thumbnail, medium, large and full size.

7.  Click Insert into Post once you’ve edit the image attachment details.

Insert into post

8.  Your Add Media window will close and your image should appear in your post.

About Image Size

When you upload an image it automatically creates a thumbnail and medium size versions of this image. You can choose to insert Thumbnail, Medium, Large or Full Size images.

It is good practice to resize your image to the size you want to use in your post or page before uploading and then insert into your post or page as Full size image.

As a general rule:

  1. To make image use entire width of your blog post area: resize image to 450 pixels wide
  2. To wrap text next to image resize image to 150-200 pixels wide

TIP:

You are able to change the size of thumbnail and medium sized images under Settings > Miscellaneous.

From URL

Video

You insert an image from a location on the Internet into a post or page as follows:

1.  Go to Posts > Add New or Pages > Add New.

Add New Post

2.  Place your cursor where you want the image to appear and then click on the Add Media icon.

Click on Add Media

3.  Click on From URL

Click on Add Media

4.  Paste the image URL and choose your image display options then click Insert into Post.

Adding image from a URL

Below is a summary of the options you can adjust:

  • Caption: Image caption displayed directly below the image.
  • Alt Text:  The text displayed when image is not available.
  • Alignment:  The position of the image in  your post or page.   Options are: None; Left, Center or Right.
  • Link to:  The URL to which the image is linked to.  Choices are:
    • Image URL - links to the location of the image on the original website.
    • None - removes image link completely.
    • Custom URL - allows you to link image to custom URL,  For example, handy if you want to link an image to another website.

4.  Your Add Media window will close and your image should appear in your post.

From your media library

Video

You insert an image from your media library into a post or page as follows:

1.  Go to Posts > Add New or Pages > Add New.

Add New Post

2.  Place your cursor where you want the image to appear and then click on the Add Media icon.

Click on Add Media

3.  In the Add Media window make sure the Media Library tab is selected.

Media Library Tab

4.  Locate the image and then click once on the image you want to add.

The selected file is highlighted with a blue border and a blue checkmark in the top right corner.

Select the image

5.  Edit the image attachment details.

Below is a summary of the options you can change in the Attachment Details area:

Attachment page info

  • Title:  The title displays on the image attachment page.
  • Caption: Image caption displayed directly below the image.
  • Alt Text:  The text displayed when image is not available.
  • Description:  Displayed on the image attachment page.
  • Alignment:  The position of the image in  your post or page.   Options are: None; Left, Center or Right.
  • Link to:  The URL to which the image is linked to.  Choices are:
    • None - removes link completely.
    • Media File - links the image to its original full size version.
    • Attachment page - links image to its attachment page
    • Custom URL - allows you to link image to custom URL,  For example, handy if you want to link an image to another website.
  • Size:  The size of the image.   Choices are thumbnail, medium, large and full size.

6.  Click Insert into Post once you’ve edit the image attachment details.

Insert into post

7.  Your Add Media window will close and your image should appear in your post.

Editing an image

You can edit an image within your visual editor as follows:

1.  Click on the image and then click on the Edit Image icon that appears.

Click on Edit Image icon

2.  The Edit image window will appear.

Edit image window

You can edit the following settings in the Edit Image screen:

  • Size – Clicking on a percentage scales the image to that percentage.  The preview area displays the effect of your resizing.
  • Title - Image title to be displayed when the image attachment page is viewed or when the image is viewed as part of an image gallery.
  • Alternative text - displayed when images don’t load.
  • Caption - displayed when a caption is added.
  • Link URL  – You can link the image to it’s image URL,  link it to any URL (handy if you want to link an image to a website) or have no link URL (used if you don’t want readers to be redirected to another page when they click on an image).

On the top of the Edit image screen is an Advanced Settings tab which, when clicked, displays this:

Advanced Settings page

You can edit the following settings on the Advanced Image Settings screen:

  • Size - Clicking on a percentage scales the image to that percentage.  The preview area displays the effect of your resizing.
  • Source - Your image URL
  • Size (under Source) – Allows  you to have exact control over the width and height of an image and includes an option to reset to the original image dimensions.
  • CSS Class – The CSS classes that will be added to the image given the current settings. You can override this as appropriate.
  • Styles – Any CSS styles added to the image.
  • Image properties – You can use this to add borders (in pixels), vertical space (in pixels) or horizontal spaces (in pixels) to your image.
  • Title - Image title to be displayed when the image attachment page is viewed or when the image is viewed as part of an image gallery.
  • Link Relative -  The link’s rel attribute, for adding nofollow amongst other things.
  • CSS Class – CSS class applied to the link.
  • Styles – Styles applied to the link.
  • Target – Select whether the link should open in a new window or the same window.

Edublogs Support Manager @suewaters on Twitter

Tagged with: , , , ,
Posted in Help, Media