Other Shortcodes

Important Note: When using shortcodes, there should not be a space after the first bracket and the element name. The spaces used in the examples below are for display purposes only.

If you are copying and pasting any of the code below, make sure you delete the extra space after the first bracket. You also may want to check out the glossary below.


 

Inline Show/Hide Added Content

Hide a chunk of associated content behind a text link. This can be useful for small pieces of text which would otherwise interrupt the flow of the story, but which may not important enough to link the reader to another page. The link and the show/hide content need not be directly next to each other.
This shortcode has two parts, the showhide-control and the showhide-area.

Please note: the only format markup allowed inside the showhide area are bold, italic/emphasis, links, and <span>.

Attributes for showhide-control
  • for – A name which specifies which content area this link controls.
  • text – The text which will be linked.
[ showhide-control text="Click here for a definition" for="definitionArea"]
Attributes for showhide-area

name – The name used by the link to know what content area to control.

[ showhide-area name="definitionArea"]The text that would initially be hidden away.[/showhide-area]

Putting the two above examples together would render as so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus scelerisque dui semper varius. More in Latin+ . Nunc vitae sollicitudin libero, quis congue velit. Proin purus eros, feugiat nec sapien iaculis, malesuada dapibus orci. Vivamus et sem id justo pulvinar aliquet sit amet ac metus. Nulla fermentum luctus sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum feugiat vel sem eget lobortis. In viverra ipsum urna, aliquam bibendum massa laoreet rhoncus.

 


Tabs

Displays a group of tabs which show and hide associated content. This shortcode has two parts, the tab and the tab-area. All of the tabs should be list elements (each shortcode should be a list point or <li> element).

Attributes for tab
  • for – A name which specifies which tab content area this tab controls.
  • text – The text which will be displayed on the tab.
  • initial – (optional) Use this if you want this tab to be already open when the page load. Obviously, you can only use this on one of the tabs.
  • [ tab for=”tab1″ text=”2010″]
  • [ tab for=”tab2″ text=”2011″]
  • [ tab for=”tab3″ text=”2012″ initial=”true”]
  • [ tab for=”tab4″ text=”2013″]
Attributes for tab-area

name – – The name used by the tab to know what content area to control.

[ tab-area name="tab1"]Content in area one.[/tab-area]
[ tab-area name="tab2"]Content in area two.[/tab-area]
[ tab-area name="tab3"]Content in area three.[/tab-area]
[ tab-area name="tab4"]Content in area four.[/tab-area]

Putting the two examples above together yields:

Content in area one.

Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia.

Content in area two.

Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia.

Content in area three.

Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia.

Content in area four.

Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia.

 


 

Columns

Create columns on a page. These columns turn into full width when viewed on a mobile device. There is an outer shortcode columns and an inner shortcode for each column column.

Attributes for [ columns] (wrapper shortcode)
  • sizes: (optional) Specify percentages for uneven columns or to override auto-sizing of columns. If not specified, all columns will be equal width. For example, sizes=”33-66″ would be a column of one-third width on the left and a two-thirds column on the right. sizes=”20-40-20-20″ would be four columns with the second being twice as large as the others. Providing a single size like sizes=”50″ will force all columns to be 50% width, even if there are more than 2 columns. This will cause the columns to wrap down the page, and could be useful for having many 50%-width blocks which cascade down. You can combine any of the following widths: 20, 25, 33, 40, 50, 60, 66, 75, or 80.
  • reverse: (optional) Set this to “true” or “on” to stack the rightmost column on top when in mobile view. By default, the columns are stacked left-to-right.
Attributes for [ column] (inner shortcode)
  • gutter: (optional) Set to “no” or “off” to leave no space between columns. Defaults to on (space between columns).
  • style: (optional) Specify css styles to apply to the column.
  • class: (optional) Specify a classname to apply to the column.
  • padding-top (optional)  How much space to give the top of the column. Use a percentage or other css unit.
  • padding-right: (optional) How much space to give the right side of the column. Use a percentage or other css unit.
  • padding-bottom: (optional) How much space to give the bottom of the column. Use a percentage or other css unit.
  • padding-left:(optional) How much space to give the left side of the column. Use a percentage or other css unit.
[ columns]
   [ column]1/4[/column] 
   [ column]1/4[/column] 
   [ column]1/4[/column] 
   [ column]1/4[/column]
[/columns]

[ columns sizes="33-66"]
   [ column]1/3[/column]
   [ column]2/3[/column]
[/columns]

[ columns sizes="25-75" reverse="true"]
   [ column]1/4[/column]
   [ column]3/4[/column]
[/columns]

[ columns sizes="40-40-20"]
   [ column]2/5[/column]
   [ column]2/5[/column]
   [ column]1/5[/column]
[/columns]

[ columns sizes="50"]
   [ column]left half, first row[/column]
   [ column]right half, first row[/column]
   [ column]left half, second row[/column]
   [ column]right half, second row[/column]
   [ column]left half, third row[/column]
   [ column] etc.[/column]
[/column]

Colors are shown to simply display the differences of columns. When columns are applied to any page the background colors will not show.


1/4

1/4

1/4

1/4


1/3

2/3


1/4 (first box) Reversed!

3/4 (second box)


2/5

2/5

1/5


left half, first row

right half, first row

left half, second row

right half, second row

left half, third row

etc.

 


 

Embed an Ensemble Video

Embed an ensemble video on the page.

Attributes

Note: All attributes are optional except contentid.

  • contentid – The id of the ensemble content.
  • url – The url of the ensemble video.
  • audio – Set this to true if there is no video, just an audio clip.
  • width – The width of the video.
  • height – The height of the video.
  • autoplay – Set to true to make the video start playing automatically when the page loads. Defaults to false.
  • hidecontrols – Set to true to hide the controls.
  • showcaptions – Set to true to display captions.
  • title – Set a title for the video.
  • displayshowcase – true/false, defaults to false.
  • displaycategorylist – Set to false to hide the category list.
  • categoryorientation – Set to vertical to display the categories vertically. Defaults to horizontal.
[ ensemblevideo contentid="ehlPkjKlmEm91hwP5ZiWgA" width="320" height="180"]

 


 

Embed a Website with an iframe

Attributes

url – The url to embed in the frame.

height – (optional) Height of the frame, defaults to 400px

width – (optional) Width of the frame, defaults to full width.

scrolling – (optional) Whether the frame should scroll. Allowed values are “yes”, “no”, and “auto”; defaults to no.

[ iframe url="https://www.bates.edu/" scrolling="yes"]

 


 

Video with Captions

Add image-style captions to embedded videos.

Attributes

caption – the caption to display.

width – (optional) How wide the video is. Defaults to 630.

[ video-with-captions caption="The bobcat says what?" width="630"]http://youtu.be/8f1HY46jcu0[/video-with-captions]

The bobcat says what?

 

Progress Bar

An animated progress bar to track a metric (to see the animation, reload this page). If you don’t specify a label, the goal number is automatically used.

Attributes
  • count – A number indicating how far the progress bar should render (in relation to the goal number).
  • goal – The goal, as a number.
  • goalText – (optional) The text that shows in the background indicating what the goal is. If not specified, the goal number will be used.
  • successText – (optional) Text to display when the goal is reached. defaults to “We did it!”
[ thermometer-gauge count="392" goal="510" goaltext="510 gifts"]

 


 

Glossary

Attribute

Part of the shortcode which specifies that a certain name equals a certain value.

name="value"

This is always found inside the first part of the shortcode, between the brackets.

Opening/Closing Tag

Some shortcodes have a single element like

[example]

and some have a start and ending element like

[example] content [/example]

The first element, the [example], is the opening tag, and the second one, the [/example] is the closing tag. Note the closing tag has a /.

Content Area

In shortcodes with both an opening and closing tag, the space between the tags is the content area. Highlighted below:

[example name="value"] This is the content area. [/example]