Images and Video

Components on this page:

Image with Caption

For best results, place this component inside a [WYSIWYG] Content Container snippet, especially when using the Float options.

  • Image [Image Chooser]: Select an image to display on the page. For best results, use an image which is 700px wide. If the image is floated to the left or right, a width of 660px may be used.
  • Large Image [Image Chooser] (optional): Select a larger version of Image. When provided, visitors will have the option to view the image full-screen in a "lightbox".
  • Image Description [Short Text]: Describe the image.
  • Image Caption [Short Text] (optional): The caption to display below the image
  • Float [Radio Buttons: None, Left, Right]: Float the image to the left or right of the content.
woman in front of textured background
This is an image caption

Float Left

woman in front of textured backgroundOpen the image full screen.
This is the caption for an image which has been floated to the left and uses the Large Image field

This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. Lorem ipsum amet. This is a paragraph describing our different departments and programs. It is an opportunity to showcase body link example the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.

Float Right

woman in front of textured background
This is the caption for an image which has been floated to the right

This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of opportunities. Lorem ipsum amet. This is a paragraph describing our different departments and programs. It is an opportunity to showcase body link example the breadth of opportunities. This is a paragraph describing our different departments and programs. It is an opportunity to showcase the breadth of.

No caption provided

woman in front of textured background

When the caption is not provided, the image is still displayed according to the other options selected.

Image Comparison Slider

The Image Comparison Slider component shares much of its functionality with the Image With Caption component. The primary difference is that the Image Comparison Slider requires you to supply two images (and their descriptions).

  • First Image [Image Chooser]: Select an image to display in the component, on the left side of the comparison slider.
  • First Image Description [Short Text]: Describe the first image.
  • Second Image [Image Chooser]: Select an image to display in the component, on the right side of the comparison slider.
  • Second Image Description [Short Text]: Describe the second image.
  • Image Caption [Short Text] (optional): The caption to display below the image.
  • Float [Radio Buttons: None, Left, Right]: Float the image to the left or right of the slider.
commencement
life at SDSU
This is a caption

The Image Gallery component creates a grid of thumbnails that link to their associated full-size images.

  • Images [Group]
    • Thumbnail Image [Image Chooser]: For best results, use a 120x120 image.
    • Large Image [Image Chooser]: The image to be displayed full screen.
    • Image Description [Short Text]: Describe the image's content (will be set as the image's alt attribute).
    • Image Caption [Short Text] (optional): The caption is displayed below the image.

Video Player

The Video Player component should also be placed inside a [WYSIWYG] Content Container snippet.

  • YouTube URL [Short Text]: Use a YouTube embed URL, e.g. https://www.youtube.com/embed/ScMzIvxBSi4
  • Video Title [Short Text]: A title for the video (provides a title for accessibility)
  • Image [Image Chooser]: Select an image to be displayed on the page (until the user starts the video).
  • Image Description [Short Text]: Describe the image's content.
  • Caption [Short Text] (optional): Caption displayed below the image/video player.
three menu in canoes
Short image caption goes here