Snippets and Shortcuts


Tooltip

A tooltip can be used to replace parenthetical text. One example would be defining an acronym such as CSRACentral Savannah River Area.

Tooltips are added just like links. Instead of linking to a page, #tooltip is used for the URL and the text to be included in the popup balloon is included in Title

tooltip

Accordion

Accordions, such as the one encompassing this page, are helpful in categorizing areas of text and reducing page scrolling.

This snippet is in the catalog as Basic Accordion.

The snippet is displayed as a table in the page editor. The first column is the section heading and the second is the content to be displayed in the section body.

To have a section automatically display as open, create a link in the section headFirst column and enter #open in the URL section.

Rows/sections can be added or removed by right-clicking and selecting an option under Row.

Profile Cards

Profile Cards are an easy and uniform way to display faculty and staff information. They also adjust to accommodate various screen sizes and page content.

This snippet is in the catalog as Profile Card [NEW].

Profile Cards Table

The snippet is displayed as a table in the page editor with each row representing a separate card. Information is entered in the appropriate columns. Rows/cards can be added or removed by right-clicking and selecting an option under Row.

The Employee Name can be linked to a page with additional information such as the Faculty Directory.

The profile image and all information is automatically cropped, transformed and formatted when the page is saved.

Richard Rohl

employee title

 

 

Image Randomizer

This snippet is in the catalog as Image Randomizer.

Up to 8 images with or without captions can be added. One of the images will be displayed at random when the page loads.

This is an alternative to image rotators. Statistically many page visitors will not progress past the first image in a rotator. Having an image display randomly from a list is a more diplomatic way to include several images to represent an area.

The snippet will dislay as a table in the page editor. Images are added to the first column and captions and optional links are added to the second. Empty table rows will not display in Image Randomizer.

Currently, this snippet only displays in the Promo Image section of the Featured Content area of a page.

Sample

Here is another caption 

Sample

Up to 8 Images can be added

sample

sample

sample


Page Thirds

This snippet is in the catalog as Page Thirds.

Create a page section with three equal-width colums.

The columns will stack on vertically on a mobile device.

Sample image

Can be used for text and images.

Table cells can be merged by highlighting two adjacent cells, right-clicking, and selecting Cell > Merge Cells. This will divide the page with a 2 to 1 ratio like so:

page thirds example

 Images will automatically fill the full width of a section and adjust size on smaller devices.

 

Page Halves

Divide an area of a page into mobile-responsive halves:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat tristique dui ut finibus. Mauris tempus non libero sed rhoncus. Suspendisse egestas tincidunt nisl sed suscipit. Vestibulum eget urna accumsan, suscipit est nec, bibendum mauris. Vestibulum porta, ex in rutrum posuere, arcu nunc mattis tortor, sit amet fermentum tortor ex eget justo. Proin pharetra lectus augue, non rhoncus elit bibendum in. Donec vehicula luctus magna, at aliquam massa. Sed porta sed nisl vel tincidunt. Curabitur commodo enim nibh, eget tristique dolor posuere sit amet. Morbi viverra laoreet erat sit amet bibendum. Donec nisl erat, laoreet et imperdiet non, tincidunt id libero. Phasellus molestie elit ac lorem fringilla, quis elementum dolor tempor.

Mauris ut rutrum odio. Donec facilisis non mi quis ultricies. Ut quis ultrices arcu. Ut maximus ut mi et dapibus. Suspendisse et turpis odio. Proin et tortor nec nisi aliquet luctus. Sed pretium purus ac eros aliquam aliquet. Quisque vehicula ipsum at odio imperdiet dapibus. In placerat odio cursus massa hendrerit semper. Fusce sed mi dui. Cras aliquet ac ex condimentum interdum. Morbi semper ultricies ligula sed tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sit amet rutrum ligula.

Images will automatically fill the full width of a section and adjust size on smaller devices.

Portrait Snapshot

The Portrait Snapshot snippet allows you to highlight a specific image. The image and image-label can be linked to another webpage, sending user for more information if necessary.

To insert this snippet, click the "Insert Snippet" icon, and then either scroll to or search for "Portrait Snapshot". Upon selecting and inserting the snippet onto your page, you will see a table with three columns.

  • In the first column, insert the image you would like to use. The image needs to be 300x300 pixels to work properly.
  • The second column allows you to label the image.
  • The third column allows you to insert a link for both the image and the image-label. You can leave this blank if you do not wish to link anywhere.

You can insert and delete rows of the table in edit mode to add or remove Portrait Snapshots to the page.

Easy Icons

Icons can be added using the text-editor by typing [icon:icon-name icon-size (optional)].

Examples:
[icon:phone] = phone icon[icon:graduation-cap 2x] = graduation-cap icon

 

Available Icons: phone phone icon | envelope envelope icon | envelope-o envelope-o icon | fax fax icon | map-marker map-marker icon | location-arrow location-arrow icon | globe globe icon | facebook facebook icon | twitter twitter icon | user user icon | university university icon | graduation-cap graduation-cap icon | clock-o clock-o icon | gift gift icon

Additional icons can be found here.

Available Sizes: default/blank user icon | lg user icon | 2x user icon | 3x user icon | 4x user icon | 5x user icon