Adding An Image

You can add images to your site in two ways: by uploading an image from your computer or by linking from another website.  Above the Visual Editor is the Add Media tool.

Note: Your image will need to be one of the commonly used file types including: JPEG (.jpg or .jpeg), GIF (.gif) or PNG (.png). PDFs are not considered images that can be embedded in a page or post.

Uploading an Image

  1. In your post, click where you want to insert an image.
  2. You can simply drag the image into the editor without using the Add Media tool. The editor will turn blue as the image is being uploaded.
  3. Or you can click the Add Media button above the writing toolbar.
    Add Media
  4. In the Insert Media screen, make sure you are on the Upload Files section and click Select Files, browse to your image, then click Upload. You may also drag and drop files into the “Drop files anywhere to upload” area.
    Insert Media
  5. Your image will be uploaded to the Media Library and the screen will expand to allow you to enter more information about your file.
    1. Title – Title of your image.
    2. Caption – Text that will appear below your image.
    3. Alt Text – Text that is used for ALT text. (Screen readers use this as a textual alternative to the image.)
    4. Description – Used in your Media Library to describe your image.
    5. Alignment – Aligns your image to the left, right or center and allow text to wrap around your image.
    6. Link To – Attachment Page, Media File, Custom URL or None.
    7. Size – For large images, you can insert a smaller version using Thumbnail, Medium, Large or Full Size. You can also resize an image by dragging the corner once inserted. See Resizing an Image below.
    8. Click Insert into Post.  Once an image has been uploaded it will be available from the Media Library if you want to use it again.
      Insert Into Post

Note: If you change your image in the Media Library or the source file on your computer, you will need to update it in your post by reloading the updated image otherwise your post will display the outdated image.

Adding an Image from a Website

In addition to uploading an image, you may also insert an image that already exists on a different Web site.

Note: There are a few things to consider before using an image from a website. If the image has a copyright, make sure you have permission to use the image. Also, each time a linked image is viewed on your site, it is using up bandwidth on the host site. If the image is moved or deleted it will cause your site to display a broken image graphic instead of the image.

  1. In your post, click where you want to insert an image.
  2. Click the Insert Media button.
  3. In the left column, select Insert from URL
    Insert from URL

    1. Type or paste in the URL where the image is hosted.
    2. If the URL is valid, the image will appear.
    3. Caption – Text will appear below your image
    4. Alt Text – Text used by screen readers. This is important for to make your site web accessible.
    5. Alignment – Aligns your image to the left, right or center and allow text to wrap around your image
    6. Link To – If blank, the image is not clickable on your site.  If Link to image is clicked, WordPress automatically fills in the website URL that the image is linked to and your visitor can click on the image to open it in a secondary screen.
    7. Click Insert into Post.
      Insert from URL

Editing or Deleting an Image

After you have inserted an image, you may need to make a change or remove it altogether.

  1. Edit the post or page with the image.
  2. Click on the image you want to edit or remove. A row of  buttons will be in the top middle of the image.
    Edit image icons
  3. Click on the Pencil icon to edit the image properties.
  4. Click on the X button to remove the image. The image will be removed from the post or page, but will still be available in your media library.
  5. Use the alignment buttons to align the image and have text wrap around it.
  6. Click Update to save the changes to your post or page.

Resizing an Image

  1. When you insert an image, you decide the size you want to insert.
  2. The sizes available will depend on the size of the image you uploaded, but generally you will see thumbnail, medium, large and full size.
  3. Select the size that is closest to the size you want displayed.
  4. You can also adjust the size by dragging the corner of the image to make it smaller. You can also make it larger, but this will often pixelate the image for a poor display.
    Resize image

Lightbox

We have a built in tool to use a “lightbox” technique to display your images as an overlay pop-up when clicked on. To use this all you have to do is link to the image file when adding to your page or post.

  1. Edit your page or post.
  2. Click Add Media to add in image.
  3. In the Link to option for your image, choose “Media File
    link to media file screenshot
  4. Click Insert Into Page
  5. Publish your post or page. When you click on the image, an overlay should appear. See the image below as an example.
  6. There are settings for this tool under “WP Lightbox 2” in the Dashboard admin area.
Boston Terrier Puppy

Click me to show the lightbox overlay.