Follow

Add image to Article

Overview

The instructions here explain how to add an image within the body of an article as well as how to add a credit and caption to the embedded image and align the image to the left or right. (By default, the article's teaser image is displayed at the top of the article. Teaser images are not discussed in these instructions. For an explanation of teaser images, please see (insert link to Create a new article documentation).  

Steps

 1) Optimize your image for online use

Image specifications are as follows:

Specification
Detail
File formats allowed

JPG, GIF, or PNG 

Dimensions 1000 pixels wide or less
Maximum file size

32MB***

Note: This is the technical maximum. Exceeding this limit will cause performance issues on your site. Recommended maximum file size is approximately 300K

 

Additional notes on images for articles:

  • If you want the image to span the full width of the article, the image will have to be at least 750 pixels wide

  • On responsive sites, the width of the article container depends on the device being used to view your site. What looks good on a desktop may not work as well on the mobile view of your site. You will have to experiment with your image size and placement to determine what will work best for you.

2) Choose where you want to place the image

In the Body Content section of the article, place your cursor where you would like the image to appear within the article.

If you will be aligning the image to the left or right, place your cursor near where you would like it to be. Your article text will wrap around the image. You can adjust the specific location of the image in subsequent steps.

If you would like the image to span the full width of the article, place your cursor in a new line. Images that span the full width of an article must be 750 pixels wide.

3) Create a table

Choose the Table button (Figure 1: A) from the editor toolbar.

Figure 1: Table Properties settings

 

Change the Table Properties (Figure 1: B) to the following:

  • Rows: 1
  • Columns: 1
  • Border Size: 0
  • Alignment: Choose left or right, depending on where you want the image to appear, or leave as <not set> if you want the image to span the full width of the site (Note: Remember that your image will need to be
  • Width: Leave this field blank
  • All other fields can remain as default.

Choose OK. (Figure 1: C)

4) Put the "Image with Credit & Caption" template in the table

Select the Templates button in the editor toolbar and choose the Image with Credit & Caption template.

5) Replace the placeholder image

  1. Double-click the placeholder image labeled “NO IMAGE.”
  2. Specify the image you want to use by either choosing an image that has already been uploaded to your site’s file structure using the Browse Server button (A) or uploading a new image on the Upload tab (B).

[gr: image properties box with browse server button labeled as A and Upload tab labeled as B]

A) Choosing an image from your server

  1. Choose Browse Server
  2. Navigate to the image in your site’s folder structure
  3. Double-click an image to select it

  4. Put a description of the image in the Alternative Text field.
    Note: Alternative text does not appear on the site itself, but it is available in the source code for search engines. Including Alternative Text on your images is very important for SEO as users often find their way to your site via an image search.

  5. Leave all other fields as default

  6. Click OK

B) Upload a new image

  1. Select the Upload tab.

  2. Click Choose File.

  3. Find the image file on your computer and double-click it.

  4. Choose Send it to the Server.

  5. Put a description of the image in the Alternative Text field.

  6. Leave all other fields as default.

  7. Choose OK.

6) Edit or remove placeholder credit and caption

7) Save your changes

 

For more information on how to use the CKEditor, please see here 

Have more questions? Submit a request

Comments

Powered by Zendesk