Gallery Pages

Snippets

CMS Workshop: Gallery Pages: 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 Gallery Item Snippet

1. Click the puzzle piece icon in the WYSIWYG Editor.
2. Use the "Filter by name" field to type "Gallery Item" or scroll to the "Gallery Item" Snippets.
3. Choose the Gallery Item Snippet you would like to use.
4. Click Insert.
   1. Please note: some Gallery Item Snippets need to be inserted into a Gallery Item - Text Snippet to work correclty on a Gallery Page.

Gallery Item Snippet Options

• Band with Background Color
• Call to Action
• Heading
• Heading (Anchor Link Compatible)
• Image
• Images - Two-Column
• Rotator
• Text
• Text and Embed
• Text and Image
• Video

Band with Background Color

After you've inserted a Gallery Item - Band with Background Color Snippet:

1. Add an additional Gallery Item Snippet inside the Band with Background Color Snippet.
   1. This will create a gray box surrounding the chosen Gallery Item Snippet(s).
2. Edit the chosen Gallery Item Snippet.
3. Save your changes.

Back to top

---

Call to Action

The purpose of the Gallery Item - Call to Action Snippet is to drive traffic to specific functionality on your website. For example, at different points of the year, you may want to drive prospective students to apply, or donors to give, or community members to attend a campus event. In order to implement this option successfully, you need to identify your key audience(s), analyze their needs, and meet those needs by producing a call to action that allows them to complete a specific task that you know is important to them.

Before you've inserted a Gallery Item - Call to Action Snippet:

1. Navigate to the "widgets" folder of your site directory.
2. Click either New or the arrow icon.
   1. Clicking the arrow icon will provide a quick look at which widgets are available, while clicking New will provide a larger view.
3. Select "Call to Action".
4. Complete all required information, following all instructions.
5. Click Create.
6. Click MultiEdit.
7. Make all appropriate changes.
8. Click Save.
9. Publish the newly created Call to Action widget to Test and Production.

The Call to Action must meet certain specifications: 

• Each headline has a character limit of 20.
• Each summary has a character limit of 50.
• Each box must have an icon, created by UCM.
  • Icons are located in /images/cta-icons.
• Each box must link to a web page.
• There must be exactly four icons displayed.

After you've inserted a Gallery Item - Call to Action Snippet:

1. Highlight the "Link to CTA Widget" link.
2. Click the link icon in the WYSIWYG Editor and navigate to the newly created Call to Action widget.
3. Click Save.

Back to top

---

Heading

After you've inserted a Gallery Item - Heading Snippet:

1. Highlight the "Gallery Item Heading" text.
2. Type in or paste your Heading.
3. Click Save.

Heading (Anchor Link Compatible)

The Anchor icon can be thought of as a bookmark on a page and allows users to jump to a specific location on that page with just a click. For example, a FAQ page may use anchor links to move users to an answer when a certain question is clicked. View UCM’s Logo Usage page to see anchor links in action.

After you've inserted a Gallery Item - Heading (Anchor Link Compatible) Snippet:

1. Position the cursor where the anchor should be placed (within the the Heading (Anchor Link Compatible) Snippet).
2. Click the Insert/Edit Anchor icon.
3. In the Anchor Name field, enter the name for the anchor.
4. Click Insert.

Names should be as short as possible and use lowercase letters. Numbers can be used, but they cannot start with a number. An anchor icon will then appear next to the text.

Link to an Anchor

1. After creating the anchor, select the text that will link to it (outside of the Heading (Anchor Link Compatible) Snippet).
2. Click on the Insert/Edit Link icon.
3. Select the appropriate anchor from the Anchors drop down menu and click Insert.

Modify an Anchor

1. Click the existing anchor shown in the editing area.
2. Click the Anchor icon on the toolbar.
3. The Insert/Edit Anchor dialog shows the existing text for the anchor.
4. Make the modification to the text and click Update.

Back to top

---

Image

After you've inserted a Gallery Item - Image Snippet:

1. Click the gray box in the Snippet, which highlights the "Insert/edit image" icon on the WYSIWYG Editor.
2. Using the folder structure, navigate to the image you'd like to add to the page (in the site's "images" folder).
3. Click Insert.
4. Add alt text to the 'Alternative description' field.
5. Click Save.

Images - Two-Column

After you've inserted a Gallery Item - Images - Two-Column Snippet:

1. Click the first gray box in the Snippet, which highlights the "Insert/edit image" icon on the WYSIWYG Editor.
2. Using the folder structure, navigate to the image you'd like to add to the page (in the site's "images" folder).
3. Click Insert.
4. Add alt text to the 'Alternative description' field.
5. Click Save.
6. Click the second gray box and repeat Steps 3-5.

Rotator

The Gallery Item - Rotator snippet allows 2-5 slides.

After you've inserted a Gallery Item - Rotator Snippet:

1. Select Yes or No from the "Auto-Rotation" dropdown.
2. If Yes is selected, the Feature Rotator will automatically rotate between slides.
3. Select Yes or No from the "Caption Display" dropdown.Each slide allows for its own caption.
4. The next five sections allow you to enter the information for each slide and in the order it will appear in the Feature Rotator.

Back to top

---

Text*

After you've inserted a Gallery Item - Text Snippet:

1. Type in or paste your text content.
2. Use the WYSIWYG Editor to add styilized elements like bold or italics.

*The Text Snippet must be used to encompass other (non-Gallery Item) Snippets.

Text and Embed

The Gallery Item - Text and Embed Snippet includes a Heading (displayed or hidden), Text, and Embed (left or right aligned), displayed as one cohesive section. The Embed can be a Youtube video, Soundcloud podcast episode, etc.

After you've inserted a Gallery Item - Text and Embed Snippet:

1. Choose 'yes' or 'no' from the 'Display Heading?' dropdown.
2. Type in or paste your Heading in the 'Heading' field.
3. Type in or paste your Text in the 'Text' field.
4. Click the line in the 'Embed iFrame' field, which highlights the 'Insert/edit media' icon in the WYSIWYG Editor.
5. Paste the file’s URL into the Source box. Enter only this information.
   1. Do not remove, add, or change any other information on any other tabs. The CMS is configured to format the video automatically upon saving and publishing. Any modification could cause the design of the templates to break. You can use either the full YouTube URL from the address bar of your browser or the “Share” URL.
6.  Click Save.
7. Choose 'right' or 'left' from the 'Embed Alignment' dropdown.

Text and Image

The Gallery Item - Text and Image Snippet includes a Heading (displayed or hidden), Text, and Image (left or right aligned), displayed as one cohesive section. The Embed can be a Youtube video, Soundcloud podcast episode, etc.

After you've inserted a Gallery Item - Text and Image Snippet:

1. Choose 'yes' or 'no' from the 'Heading Display' dropdown.
2. Type in or paste your Heading in the 'Heading' field.
3. Type in or paste your Text in the 'Text' field.
4. Click the gray box in the Snippet, which highlights the "Insert/edit image" icon on the WYSIWYG Editor.
5. Using the folder structure, navigate to the image you'd like to add to the page (in the site's "images" folder).
6. Click Insert.
7. Add alt text to the 'Alternative description' field.
8. Click Save.
9. Choose 'right' or 'left' from the 'Image Alignment' dropdown.

Back to top

---

Video

After you've inserted a Video Snippet:

1. Click the pre-loaded video (USF College of the Arts) in the Snippet, which highlights the "Insert/edit media" icon on the WYSIWYG Editor.
2. Paste the YouTube URL into the Source box.
   1. Enter only this information. Do not remove, add, or change any other information on any other tabs. The CMS is configured to format the video automatically upon saving and publishing. Any modification could cause the design of the templates to break. You can use either the full YouTube URL from the address bar of your browser or the “Share” URL.
3. Click Save.

Back to top