Office of Communications

A General Guide to Snippets

Writing for the Web  |  Page Properties  | Web Styling Options  | Photo Sharing in Google Drive

Snippets Dialog BoxThe "Snippet" tools in our content management system make it easier to create attractive web pages, but there are some limitations and guidelines to follow.

The Basics

Here are examples for each snippet, which are offered in the following categories:

Layout Helpers

Images

Outside Content

Data Tables

 

 

The Basics

How do I add a snippet to my page?

1

 

Place your cursor where you would like to insert a snippet

2

Snippet Icon

Click on the snippet icon located in the toolbar at the top of the OU editor

3

Insert Button

select a snippet and click insert

Why do they look like tables?

Most of the snippets are styled when you publish your web page. In the editor, they will look like tables to provide fields in which you can insert text and/or images and better organize content on the page. The exceptions to this are the image with caption and data tables.

How can I edit/modify them?

Snippets can be easily modified to fit your needs. In most cases, simply add a row in the snippet table to input more content.

Do not add or delete columns.

With the exception of data tables, adding or deleting columns will cause the snippet not to work properly. If you do not wish to use a particular content cell, leave it blank.

 

 

Layout Helpers

 

People List

Main use: Spacious faculty/staff lists. Faculty listing pages require this snippet.

 

People Grid

Main use: People list alternative for less available space and more general info.

Features: Allows wrapping of content.

 

 

Picture List

Main use: Equipment listings, event timelines and any other sort of list with visuals.

 

 

Course List

Main use: Course description pages require this snippet.

Please note that the course number needs to be in this style to generate automatic page anchors, used for links on Course Plan pages.

 

 

Callout Box

Main use: Highlight a list/procedure that needs extra attention.

Limit: 1 per page.

 

 

Details

Main use: Organize content so one set of information is visible at a time. Course plan pages require this snippet.

Limit: 1 per page. No exceptions.

First This content will automatically be shown first.
Hidden All the other content will be hidden unless the viewer clicks on a different tab.
Interactive This snippet requires the interactive participation of the audience.
Important Do not put important information in this snippet unless it makes sense to do so.
Content The content on the course plan pages is an example of content that is appropriate for this snippet.
Limits The tab Label should be one to two words long. There are no limits to how many tabs you have in the snippet but they will wrap to two rows if you have too many and/or the labels are too long.

 

 

Thermometer

Main use: To visually track the progress of something with quantitative data.

5,000
2,500
2,651
4,000

 

 

Flexible Grids (2 & 3 Columns)

Main Use: Organize and display content in columns without using tables.
Features: Expands and contracts in response to the width of your screen. You can use almost all of the other snippets inside the flexible grid snippets allowing you to have full control over the layout of your web page.

How it works:

When viewed on a mobile device, the content in this area will display first.
This will display second. You can see this by looking at this page on your smart phone or by decreasing the size of your browser window
This will be third  You cannot add columns, but you can add as many rows as you would like.
This content area will display last. Everything in the flexible grid snippet will display in one column on a smart phone instead of multiple columns like on a desktop computer.

 


 

Images

 

 

Image with Caption
Image with caption. The image can be any size; the caption will automatically adjust its width accordingly.

 

Image with Caption

Main use: To add visuals to a page, including a caption whose width adjusts according to the image size.

Size limits: Uploading the original full-sized version of the image is recommended (the largest dimension of the photo should not exceed 2000 pixels).

When inserting an image into a page, you can determine the size it displays by typing new dimensions in the "Appearance" tab of the "Insert/Edit Image" dialogue box. Always leave the "Constrain Proportions" option checked to avoid image distortion.The recommended display size of an image is 450 pixels wide (The display width should not exceed 600 pixels). 

Features: Allows wrapping of content around image and caption by aligning it to either the right or left side of the content area.

 

 

Turning Titan '14
Limit text to about eight words.
Turning Titan '14
You can use both text areas
Or neither of them. 
Shinto Shrine Reception
Try not to cover people's heads like this!
 Use the appropriate text area for the photo
Origami
Images must be the same size
This photo shows what not to do – Do not change orientation or dimensions, or use this much text.
 

Rotating Image Carousel

Main use: Provides multiple images in less space.

Limits: 1 per page. Widths of images should not exceed 450 pixels. All images must be the same dimensions, both width and height. Rotating image carousels should have at least 3 photos and not more than 6 photos.

It's a good idea to check your page on a mobile device – captions will cover more of the image.

Features: Allows wrapping of content around image and caption by aligning it to either the right or left side of the content area.

 


Outside Content

 

What Happens After Classes? Be aware that links won't work here.

Video with Caption

Main use: Easily include videos on your site, without having to use embed code.

Features: Allows wrapping of content.

Limits: Be aware that only right alignment is possible at this time.

 

 

Small Flickr Gallery

Main use: Introduce fewer images from a Flickr gallery than the large Flickr gallery snippet.

 

Large Flickr Gallery: A large Flickr gallery displays every photo in the album you choose to share.

 

 

Data Tables

 

Main use: Data/info that requires this kind of visual organization. Tables are no longer acceptable for general page layout.

Warning: Do not modify the widths/heights of table cells. They will expand/contract depending on the width of the content.

Dataset Column A Column B
Subject 1 Result 1A Result 1B
Subject 2 Result 2A Result 2B
Subject 3 Result 3A Result 3B
Subject 4 Result 4A Result 4B
Subject 5 Result 5A Result 5B