UC San Diego SearchMenu

CMS: Working with Images

Find out how to insert images on a CMS page.

Adding images to a page is a great way to supplement your content. Avoid the common pitfall of putting too much of your content into images, though. Content in images is hidden from search engines and screen readers.

Images must be accessible

  • Avoid text-heavy images - text should be text
  • Always use alternate text to describe your image

Images must be placed in the /_images folder

There are two ways to upload a new image:

  1. Use the WYSIWYG editor to upload the image directly onto a page.
  2. Upload images directly into an images folder for later use.

Note: In both cases, if you want to put the image in a new subfolder within /_images, you need to create the new subfolder first.

Use the WYSIWYG to insert an image

  1. Navigate to the page where you want the place the image
  2. Click Edit
  3. Place your cursor where you want the image to appear, then select the 'Insert/Edit Image' button: Insert Image button
  4. The Insert/Edit Image screen will open:

    Insert/ Edit image screen shot
  5. Check Internal
  6. Click Choose File
  7. To use an existing image:
    1. Browse to the image you want to use.
    2. Select the image
  8. To upload a new image (Note: if you want to put the image in a new subfolder in /_images, you need to create the new folder first.)
    1. Click Upload
    2. Drag a file to the indicated box or click the choose link to select one from your computer.
    3. Under Select a placement folder, choose an appropriate subfolder in /_images where the image file will go.
      Note: Since you are selecting a folder, you will need to click on the name of the folder to open it. Clicking the radio button will select the folder (without opening it). Learn more about using the file chooser to upload files.

      Upload image screen shot
  9. Click Choose
  10. In Image description type in alternate text describing the image for when the image does not load (Do not check Decorative unless it is 100% decorative, such as a colored block with no information in it).
  11. Align the image and provide spacing (optional): choose "Left" or "Right" from the Class drop-down menu to align the image to the surrounding text and provide some padding so the text doesn't bump up against the image. Choose this option for images that appear in-line with the text (images that span the width of a page can be on their own line.)
  12. Add a caption (optional). Click on the Advanced tab:

    Edit image advanced tab screen shot
    1. Check the box next to "Use figure and figcaption for this image"
      • The default caption will be the Image description. After you insert the image, you can click on the caption text and edit it.

        Edit caption screen shot
  13. Click Ok

Note: Some page templates will have dedicated fields to add an image. These fields will not have a WYSIWYG. Click on the field and use the file chooser to select your image.