University Marketing and Communications

Image and Multimedia Widgets

Image Auto Grid | Image Gallery | Image Thumbnails With Gallery | Image With Caption | Pop-up Images | Row w/ Background | Row w/ Left ImageVideo and 360 Image Embed

Style Guide | Page Design and Layout | Style and Format | Content Widgets | Additional Functionality

Image Auto Grid

Arcelor Mittal logo
Black & Veatch logo.

GM logo.

Greenheck logo.
Jackson Insurance logo.
Systems Control logo.

Instructions

Use the Image Auto Grid snippet.

Back to widget index

Night photo of the husky statue on campus.

Title 1

This is the first image caption.

Night photo of the husky statue on campus.

Title 2

This is the second image caption.

Night photo of the husky statue on campus.

Title 3

This is the third image caption.

Night photo of the husky statue on campus.

Title 4

This is the fourth image caption.

Instructions

Insert an Image Gallery Snippet onto your page.

Back to widget index

Image Thumbnails With Gallery

Instructions

Image Thumbnails with Gallery are created using the Image Gallery Snippet.

Back to widget index

Image With Caption

Left

Night photo of the husky statue on campus.
This is a 350 Sidebar image on the page with the Class set to left.

When you use a class of left on the snippet, the image will go to the left side of the content area with the text wrapping on the right side.

Right

Night photo of the husky statue on campus.
This is a 350 Sidebar image on the page with the Class set to right.

When you use a class of right on the snippet, the image will go to the right side of the content area with the text wrapping on the left side.

Middle

Night photo of the husky statue on campus.
This is a 350 Sidebar image on the page with the Class set to right.

When you use a class of middle on the snippet, the image will go to the middle of the content area with no text wrapping.

Blank

Night photo of the husky statue on campus.
This is a 350 Sidebar image on the page with the Class blank.

When you leave the class blank on the snippet, the image will go to the left side of the content area with no text wrapping.

View the Image with Caption: on a Page with No Sidebars | on a Page with Left Nav | on a Page with Right Sidebar | on a Page with Both Sidebars

Instructions

Image with caption is created using the Image With Caption Snippet.

Back to widget index

With Gallery

Night photo of the husky statue on campus.

The pop-up could come from text.

Without Gallery

Night photo of the husky statue on campus.

The pop-up could come from text.

Instructions

Use the Pop-up Images Snippet.

Back to widget index

Row with Background

Image

    

You can put text over the background.

Light Grey

Light grey is made using grey and nofilter in the classes.

Dark Grey

Dark grey is made using grey in the classes.

Gold

For the rest of the colors you always need to use the nofilter class.

White

  • touts
    can
  • go
    over
  • the
    background

Black

The system knows what color text to use for each background color.

Khaki

Khaki without nofilter is just grey!

Instructions

Use the Row w/Background Snippet.

Back to widget index

Row With Left Image

Wrap

Night photo of the husky statue on campus.

This is some text below the image. You can see what it does in conjunction with wrapping.

Title

One of the parameter option is wrapping. If you set wrapping to true, the text on the right will wrap beneath the content on the left if it gets too long.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nisl. Aenean ut posuere ex. Maecenas nec massa mauris. Donec mi mauris, dapibus ut risus ut, consectetur hendrerit tellus. Nullam scelerisque laoreet tellus. Mauris tristique mattis enim, sit amet congue ex dictum in. Fusce aliquam nisl est, ut euismod metus tempor non. Nulla aliquet congue pulvinar. Mauris bibendum felis ac aliquet dignissim. Pellentesque nec ornare urna, id fringilla justo.

Aenean volutpat pellentesque enim, non semper nulla tempor vel. Etiam sodales consequat diam et cursus. Cras at feugiat felis. Vestibulum quis ornare velit, a laoreet velit. Duis porta, nisi vel finibus pretium, lorem odio posuere enim, nec dictum nibh leo vitae ipsum. Nullam eget ex mattis nunc accumsan pellentesque fermentum a tellus. Phasellus at purus ac lacus feugiat lacinia. Nullam at enim sit amet tortor posuere venenatis. Donec at tempus magna, eu molestie tortor. Etiam hendrerit vulputate ipsum vitae fringilla.

No Wrap

Night photo of the husky statue on campus.

This is some text below the image. You can see what it does in conjunction with no wrapping.

Title

One of the parameter option is wrapping. If you set wrapping to false, the text on the right will stay on the right, leaving blank space below the content on the left.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nisl. Aenean ut posuere ex. Maecenas nec massa mauris. Donec mi mauris, dapibus ut risus ut, consectetur hendrerit tellus. Nullam scelerisque laoreet tellus. Mauris tristique mattis enim, sit amet congue ex dictum in. Fusce aliquam nisl est, ut euismod metus tempor non. Nulla aliquet congue pulvinar. Mauris bibendum felis ac aliquet dignissim. Pellentesque nec ornare urna, id fringilla justo.

Aenean volutpat pellentesque enim, non semper nulla tempor vel. Etiam sodales consequat diam et cursus. Cras at feugiat felis. Vestibulum quis ornare velit, a laoreet velit. Duis porta, nisi vel finibus pretium, lorem odio posuere enim, nec dictum nibh leo vitae ipsum. Nullam eget ex mattis nunc accumsan pellentesque fermentum a tellus. Phasellus at purus ac lacus feugiat lacinia. Nullam at enim sit amet tortor posuere venenatis. Donec at tempus magna, eu molestie tortor. Etiam hendrerit vulputate ipsum vitae fringilla.

Horizontal Rule

Night photo of the husky statue on campus.

Title

The other parameter is hr. Setting this to true will add a horizontal rule after each row that you create with the snippet.


Night photo of the husky statue on campus.

Title

This is a second row created within the same snippet.


Instructions

Use the Row w/ Left Image Snippet.

Back to widget index

Video

Title and Description

Play Title Field video
Preview image for Title Field video

Title Field

Description Field

Title Only

Play Title video
Preview image for Title video

Title

Description Only

No Title or Description

Instructions

Use the Video Snippet to embed videos or 360 images.

Back to widget index