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. Important: 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. Optional: Align the image and provide spacing. Choose from the Class drop-down menu:
    1. None: Default setting, Image placed on the left margin with text starting at the bottom right of the image. You can use a single carriage return (enter) to move the text below the image.
    2. Left: Image placed on the left margin with text starting at the top right of the image.
      Do not use the enter or spacebar keys to move the text below the image. Use Class: None instead.
    3. Right: Image placed on the right margin with text starting on the left margin as normal.
  12. Optional: Add a caption. 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.