Section Menu

Image Snippets

All of the below are available via the Insert Predefined Snippets button (snippet wysiwyg icon). Look in the Images Category

Rows of Images with Captions

These are similar to the previous snippets, but they are full-column rows of images. They will be responsive at all screen widths, and they work in any column width, from full-width.

Begin a row by creating a new blank line or paragraph; image rows will not work in-line in with text.

  • Row of 2 with captions
  • Row of 3 with captions

If you follow the suggested width of the placeholder image (720px), the image  will remain the same width as the thumbnail, regardless of screen size.

Here are examples:

placeholder

Row with 2 images

Caption text goes here

placeholder

Title here

Caption text goes here

placeholder

Row with 3 images

Caption text goes here

placeholder

Title here

Caption text goes here

placeholder

Title here

Caption text goes here

Now what?

  • Select and replace the Title and Caption lines with your own text.
  • Click the image placeholder, then click the Insert/Edit Image button (image wysiwyg icon) to choose or upload your own images.

Don't want the Captions?

Select and delete the text on those lines, and you will have simple images with no text inside the thumbnail wrapper. Use the backspace or delete keyboard command to remove the lines of text.

Here's the result:

placeholder
placeholder
placeholder

Images with Captions, right or left aligned

For a captioned image similar to the defined styles of left-aligned and right-aligned (which are available in the Styles dropdown), use one of the following:

  • Left-aligned image with caption
  • Right-aligned image with caption

These are composed of a wrapping thumbnail element which provides a border, alignment and a light shadow, and some placeholder text. This is a responsive element, and will behave nicely at all screen widths.

Please use these elements only in the main column, not in a sidebar. The width of a sidebar is too narrow for these elements. Below are examples of placeholder paragraphs with these elements added.


 

placeholder

Right-aligned image

Caption text goes here

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

placeholder

Left-aligned image

Caption text goes here

Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Media Object with image thumbnail, title, description and link

This responsive snippet is useful for lists of speakers, lists of items with images, etc. It consists of a wrapping division, enclosing the left-aligned image thumbnail, a heading, a paragraph and a bullet list item. It works well on desktop displays, and on mobile displays, where it changes layout to place the image above the title. Because the image will change size depending on the browser's display width, it should be a relatively large image, not a tiny thumbnail.

  • Please insert this snippet on a separate Paragraph line
    • For several Objects, you should create several Paragraph lines prior to inserting the snippets.
  • This snippet is appropriate for display in the main content area. It is not for use in a sidebar. 
  • Suggested original size for Media Object thumbnail images is 480 to 720 pixels wide

Example use of this snippet: Burkett Miller Lecture Series Speakers

image thumbnail

Title Text

Description of the object. This is paragraph text and is a placeholder. Feel free to use paragraph text, links, lists, etcetera in this space

image thumbnail

Title Text

Description of the object. This is paragraph text and is a placeholder. Feel free to use paragraph text, links, lists, etcetera in this space

©