Tag: pop-up image

Image with Caption Snippet

This snippet will create an image with text beneath it. The image can be left or right aligned so body content wraps around it if it is not the full content area width or center or left aligned with no wrapping. If you have cropped an 800 size or larger of the image being displayed, the system will automatically include a pop-up of the image and caption.

Example of an image with a caption.

Image with caption snippet.

  1. Using the Image Editor, crop a Banner, Card, or Vertical image type depending on the image you want to insert. Insert the desired size image in the Image field.
    1. Insert a 400 or 450 size image for a partial-width image when you have zero or one sidebars.
    2. Insert a 1200 size image for a full-width image when you have zero or one sidebars.
    3. Insert an 800 size image for a full page when you have both sidebars.
  2. Enter the text for the caption in the Caption field.
  3. The class field determines the alignment of the image.
    1. “left” (without quotation marks) will left align the image and caption with body content wrapping to the right of it if the image does not take up the full content area width.
    2. “right” (without quotation marks) will right align the image and caption with body content wrapping to the left of it if the image does not take up the full content area width.
    3. “middle” (without quotation marks) will center align the image and caption with body content just going beneath it, not wrapping.
    4. Making this field blank will left align the image and caption with body content not wrapping.

Pop-up Images Snippet

This snippet allows you to link an image or text to a pop-up window displaying an image. This pop-up can be a single image for that link or a gallery of multiple images from the links on the page. This is an advanced function.

pop-up-example

Pop-up images snippet.

  1. Enter the content that will appear on the page (either text or an image) in the Content field.
  2. Link that content to the image you want to appear in the pop-up.
  3. Enter text in the Relationship ID field. This is just an identification to determine which, if any, images should be in the same gallery. If you are adding multiple pop-up images on a page, giving them the same Relationship ID will group them into a gallery where the user can arrow through the images.
    1. The text must be all lower case with no symbols other than hyphen (-).