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
image.png

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.

literal-width.png

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
    fullcap2.png
  3. Click the “Advanced” tab and check “Use figure and figcaption for this image”

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

 

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

    image1.png
  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)

    image2.png
  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

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

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

    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.

hoverimg.png

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
    hoverimg5.png
  3. Upload the hover version of the image
    hoverimg3.png

    1. Maintain the file name with "-hover" before the extension
    2. Place the image in an image folder within your department folder
      hoverimg2.png
    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
      hoverimg4.png

When published, the image should change when hovered over

 

Spot Images

spot.png

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