If you want to add a specific type of image, find instructions and sizing requirements in the following locations:

Adding images

    1. In any WYSIWYG content area, click the photograph icon to insert an image
    2. On the pop-up, select Internal or External for image source
    3. For internal image sources, use the Choose File button to browse "_images" folder or to upload from computer. When uploading new images, see image sizing chart or image sizing visual
    4. Click Choose
    5. Do not check the Decorative image box; instead, add an image description
    6. If needed, use the Class drop-down to format the image with styles
    7. Click Ok

NOTE: Images in Content Blocks

By default, images that appear in content blocks will scale to the full width of the container. For example, if an image is placed in a ⅓ wide grid cell, it will always fill the ⅓ width container.

If you choose "literal-width-image" class, the image will not expand to the full width of its container. In this case, the image needs to be small (but not too small) to look right in mobile view. We recommend these images be 310px wide.

This is not the same for images in "EZ Page" WYSIWYG content areas; see NOTE: Images in Page Default Content Field.


Creating image captions

These instructions are for full-width images. To learn about adding captions to smaller images with wrapping text, see Images with captions and wrapping text.

  1. Add an image with a width of at least 820px
  2. Apply full-width-image class
  3. Click the “Advanced” tab and check “Use figure and figcaption for this image”

  4. Save changes and return to the WYSIWYG editor view
  5. Click to type caption in area below image


Wrapping text around images

Images can be aligned left or right, so that text wraps around it. This can only occur with images that are 310px wide; if the image is any larger, it won’t respond properly on all devices.

  1. Add an image of the correct size
  2. Apply either float-left-image or float-right-image class

  3. Save changes and return to page view to display text wrapping (you will not be able to see the changes in the WYSIWYG editor)

  4. IMPORTANT: If image is in a content block, you must also apply the "literal-width-image" class using the Formats > Custom dropdown to allow text wrapping.


Images with captions and wrapping text 

Captions with text wrapping can only be applied to images that are 310px wide; if the image has the incorrect width dimension, this will not work.

  1. Add an image of the correct size
  2. Apply either image-caption-310-left or image-caption-310-right class

  3. Click the “Advanced” tab and check “Use figure and figcaption for this image”

  4. Save changes and return to the WYSIWYG editor view
  5. Click to type caption in area below image

    NOTE: Don’t worry about the text not wrapping the image in the WYSIWYG editor view. When you save the page, you’ll see the text wrapping around it in the page view.

Hover images

On the JMU homepage, there are three buttons that use the hover image feature to display different images when they are hovered over.


If you want an image to change when hovered over:

  1. Prepare two images, the original and the hover image, with the exact same file name except with "-hover" before the extension of the hover image.
    For example:
    • _images/ucm/button.png (this will appear when a cursor is not hovering over the image)
    • _images/ucm/button-hover.png (this will appear when a cursor is hovering over the image)
  2. Use the "Add Content" button to select Responsive > Images > User
  3. Upload the hover version of the image

    1. Maintain the file name with "-hover" before the extension
    2. Place the image in an image folder within your department folder
    3. Sumbit and Publish the image
  4. In the WYSIWYG space you want the hover image to display:
    1. Upload the original image
    2. Apply class hover-image

When published, the image should change when hovered over


Spot Images


Spots are images with links that are supposed to be noticed, much like advertisements. This means they should be used sparingly; there should never be a page full of them, or none of them will get noticed. Mix up Spots with Action Links and Link Lists and other content so that people notice the Spots more.

Many Spots have already been created such as "Give Now" and "Giving Day" located in _images/_spots. If you need a custom Spot, please contact marketingemail@jmu.edu.

In a WYSIWYG content field:

  1. Add an image; either an existing Spot, or your custom Spot
  2. Select the Spot in the content field and add a link
SPOT width height
quarter 360 493
third 480 480
half 488 312
two thirds 658 316


Back to Top