Text Pages

Snippets

CMS Workshop: Snippets

Snippets are blocks of content created and maintained by UCM to allow the use of special design elements on a Gallery or Text page.

INSERT A SNIPPET

  1. Click the puzzle piece icon in the WYSIWYG Editor.
  2. Use the "Filter by name" field to type the name of the Snippet you would like to use or scroll through the list of all available Snippets.
  3. Choose the Snippet you would like to use.
  4. Click "Insert".

Text Page Snippet Options

  1. Buttons
  2. Images
  3. Tables
  4. Timeline (temporarily unavailable)
  5. Toggles
  6. Content Two-Column

Buttons

Button - Left

Example: Button Link

Button(s) - Centered

After you've inserted a Button Snippet:

  1. Change the text to what you want the Button Snippet to read.
  2. Highlight the text, then click the Link icon to add the link.
  3. Navigate to the page/file you'd like to link to or insert an external link.
  4. Click Insert.
  5. Save your changes.
  6. Click Publish. 

Back to top

Images

All images placed on a web page must be placed within an image snippet. Images must be resized to fit the proper dimensions of an Image Snippet.

Image Snippets

After you've prepared and uploaded your image(s) and inserted an Image Snippet:
  1. Click the gray box in the Snippet, which highlights the "Insert/edit image" icon on the WYSIWYG Editor.
    Screenshot of an Image snippet, highlighting the image gray box and Inser/edit image icon in the WYSIWYG Editor

  2. Click into the Source field and clear out any default content.
    Screenshot of an Image snippet modal window, highlighting the default content from Source fieldScreenshot of an Image snippet modal window, highlighting the cleared content from Source field
    Then click on the Dependency Manager and navigate to the image you'd like to add to the page. It should automatically place you within the site's "images" folder. Click "Insert".
    Screenshot of an Image snippet modal window, highlighting the breadcrumbs, selected image, and Insert button.
    Once inserted, the Dependency Tag will display in the Source field.Screenshot of an Image snippet modal window, highlighting the Source field and Dependency Manager.
  3. Add an Alternative description for the image.
    Screenshot of an Image snippet modal window, highlighting the Alternative description reading, "Screenshot of the Arrow Link component".
  4. (Ignore "Image title", "Width", "Height", "Class", "Custom Class", and "ID".) Click "Save".
  5. Publish your changes to Test and/or Production.

Image with Caption Snippets

Image with Caption Snippets operate the same as Image Snippets, but allow for a caption underneath the image.

After you've prepared and uploaded your image(s) and inserted an Image with Caption Snippet:
  1. Follow Steps 1-4 above (Image Snippets section).
  2. Add the caption in the "Enter Caption here." field. 
  3. Click "Save".
  4. Publish your changes to Test and/or Production.

Image Grid Snippets

Image Grids are used to add multiple images (and/or text) in a row on a web page.

After you've prepared and uploaded your image(s) and inserted an Image Grid Snippet:
  1. In the "Number of Images in a Row" section, choose two, three, or four.
  2. Follow Steps 1-4 above (Image Snippets section).
  3. Repeat until you have added all images to the Image Grid.
  4. To add or delete rows or columns, or to delete the table entirely, right click on the Table and choose which option you'd like to add (i.e. Row > Insert Row Before). You can also make changes to the cells themselves or choose Table Properties to make other adjustments.

    Right click


  5. You can also use the pop-up toolbar and click on the approporate icon to execute the task.

    Table functions

  6. Save your changes.
  7. Click Publish.

Image - Small - Left

Manatee

 

 



Image - Small - Left with Caption

Manatee

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

 

 

 

 

 

 

 

 

Image - Small - Right

Manatee

 

 

 

Image - Small - Right with Caption

Manatee

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

 

 

 

 


 

 


Image - Medium - Left

Medium Snippet Left with Caption

 

 

 

 

 

 

Image - Medium - Left with Caption

Medium Snippet Left with Caption

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

 

 

 

 

 

 

 

Image - Medium - Right

Medium Image Right

 

 

 

 

 

 

Image - Medium Right with Caption

Medium Image Right with Caption

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

 

 

 

 

 


Image - Large

Large Image

Image - Large with Caption

Large Image with Caption

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

Image - Grid

  • Display two, three, or four images.
Image Grid

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

Image Grid

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

Image Grid

Manatees are large, fully aquatic, herbivorous marine mammals sometimes known as sea cows.

Back to top

Tables

Please note: Tables should only be used to display data. They should not be used for layout or design.

Table - Bordered and Striped

Example: Table - Bordered and Striped
Heading 1 Heading 2 Heading 3
Item 1 Item 2 Item 3
Item 1b Item 2b Item 3b

Table - Bordered

Example: Table - Bordered
Heading 1 Heading 2 Heading 3
Item 1 Item 2 Item 3
Item 1b Item 2b Item 3b

Table - Striped

Example: Table - Striped
Heading 1 Heading 2 Heading 3
Item 1 Item 2 Item 3
Item 1b Item 2b Item 3b

Table - Not Bordered or Striped

Example: Table - Not Bordered or Striped
Heading 1 Heading 2 Heading 3
Item 1 Item 2 Item 3
Item 1b Item 2b Item 3b
After you've inserted a Table Snippet:
  1. Add the Table Caption, Heading(s), and Item(s).
  2. To add or delete rows or columns, or to delete the table entirely, right click on the Table and choose which option you'd like to add (i.e. Row > Insert Row Before). You can also make changes to the cells themselves or choose Table Properties to make other adjustments.

    Right click functions


  3. You can also use the pop-up toolbar and click on the approporate icon to execute the task.

    Table functions


  4. You can also make changes to the cells themselves or choose Table Properties to make other adjustments.
  5. Save your changes.
  6. Click Publish. 

Back to top

Timeline

The Timeline snippet creates an offset two-column layout that groups events with their accompanying time periods. The snippet requires the Timeline Event Component(s), where users can add additional event details. Please note: Only Timeline Event Component(s) can be used within the "Timeline Item Components" portion of the Timeline Snippet. Timeline Event Component(s) cannot be used with or in addition to any other snippet.

screenshot of basic and centered timeline snippet

After you've inserted a Timeline Snippet:

screenshot of editing a timeline snippet

  1. Choose a Timeline Style (formats the position of events).
    • Basic: Simple vertical timeline.
    • Centered: Vertical timeline where the events alternate in an ‘even-odd’-type order.
  2. Type in the event's Time Period.
    1. Suggested usage is by month and/or year (i.e. 2019, January 2019).
  3. Insert the Timeline Event Component(s). Please note: More than one Timeline Event Component can be added to a single Time Period.
    screenshot of more than one Timeline Event Component in a single Time Period

  4. Please see our resource for further instruction.

Back to top

Toggle Section

Toggle Section Snippets put content into an accordion-style layout, allowing it to expand and retract. They are often used when there is a lot of content that would cause the reader to have to scroll down the page to find all of the information.

Example: Toggle Section

Toggle Section Content

After you've inserted a Toggle Section Snippet:

  1. Enter the text you want to appear on the Toggle Section when it is retracted in the "Enter toggle text here." section.
  2. Enter the content that will be hidden from view, until expanded by clicking the plus sign symbol, in the "Enter toggled content here." section.
  3. WYSIWYG tools and other Snippets can be used within a Toggle Section Snippet.
  4. Save your changes.
  5. Click Publish. 

Back to top

Content - Two-Column

Like its name, Content - Two-Column Snippets are used to create two columns of content side-by-side on a web page. 

After you've inserted a Content - Two-Column Snippet:
  1. Enter the text you want to appear in each column.
  2. WYSIWYG tools and other Snippets can be used within the columns.
  3. Save your changes.
  4. Click Publish. 

Manatee

Content - Two-Column Snippets can include images.

You can also use WYSIWYG Editor functionality within Content - Two-Column Snippets.

Like bulleted lists:

  • Thing 1
  • Thing 2
  • Thing 3
  • Thing 4

And different style elements.

 

Back to top