Adding Images to Your Articles (Posts and Pages): Printable Tutorial

Your new Sitebuilder Tool will automatically create thumbnails, mid-size, large size and original size images for you during the upload process so when you prepare your images for your website you only need to make the largest view you would want someone to see (we recommend no larger than 600 pixels wide or 800 pixels high).

Learn more about a fun and easy way to prepare your images for your website by downloading this document: How to prepare your images for the web before adding images in your Sitebuilder Tool.

NOTE:  This tutorial assumes you are in the ‘Editing’ section of your page or post.

First, insert your cursor where you want the picture to go:

Then you will want to go and get the image.  To do this click on the “Upload/Insert” image icon:

A ‘pop up” window will appear.  You will have several choices where you can go “grab” your image:

  • Computer
  • URL
  • Gallery
  • Media Library
  • NexGEN Gallery
  • Server

You can either select an existing picture (if you have used it on another article it would already be in your Media Library) or add a new one from your computer. We will assume you need to add a new one from your computer (this is called uploading it from your computer).

To do this you make sure you are on the “From Computer” tab then click the “Select Files” button:

This will take you onto your own computer where you can browse for the image or images you want to upload.

  • To select a single image left click on it.
  • To select multiple images hold down your Ctrl key and left click all of the images you want to upload.

Once you have selected your image(s) click the “open” button.

  • If you upload only one image, your image editing box (see below) will open for that image.
  • If you upload multiple images, you will see a list of your images.

To manage set parameters for each image, such as title, alternate text and captions, click the “Show” link:

This opens an “Editing” box for that particular image. We will explain each field below in more detail based on the numbers show in the image below:

1. Title – This is the image title that will show if you mouse over the image on a webpage. (This should be keyword rich.)

2. Alternate Text – This can be the same as the image title. It should be keyword rich, but also include a description of the image so that a blind person’s computer can “read” the description to them.

3. Caption – This field is optional. If you use it, a caption will be visible under the image showing on the webpage.

4. Description – This is used by the search engines to describe the image in search results.

5. Link URL – You can link your image in a variety of ways.

  • ‘None’ removes the link altogether.  (The result is, when someone clicks on the image on the website, nothing will happen.)
  • ‘File’ links to the original size of this image.  (The result is, when someone clicks on the image on the website, a ‘pop up’ of the image will appear in a separate tab.)
  • ‘Post’ links to an article.  (The result is, when someone clicks on the image on the website, they will be taken to an article either in the same tab or a different tab.

6. Alignment – You can position your image in a variety of ways.

  • ‘None’ will position the image above the text where your cursor is sitting.
  • ‘Left’ will have your text wrap around the image positioning the image on the left of the text.
  • ‘Right’ will have your text wrap around the image positioning your image on the right.
  • ‘Center’ will center the image above your text.

7. Insert – Click this to insert the image into your article.

To learn more about adding multiple images to a post in a “Gallery” layout read the “Adding a Gallery” tutorial.

You may also wish to view some of our image related Video Tutorials.