Middlebury

Drupal Shortcodes

A "shortcode" is a snippet of text that allows you to insert special elements into your page. These can be placed in any WYSIWYG editor window.

Video

The most common shortcode is used to embed video. To embed a video, get its URL from your video service of choice. For MiddMedia use the "HTTP (Download) URL". Here is an example of using the video embed code with a video from MiddMedia of the 2012 Convocation.

[video:http://middmedia.middlebury.edu/media/Communications_LiveRecording-MIDD-web_data-middlebury-edu/mp4/2012Convocation.mp4]

Supported Video Sources

We support video from the following sources.

Video Player Attributes

You can change the appearance or behavior of the video player using attributes added to the shortcode. Not all of these work on videos from every source listed above. They should all work for videos from MiddMedia. The "width", "height" and "ratio" attributes can be used with any video. All of these are optional.

  • Width written as width:123 where "123" is the desired width of the player, in pixels.
  • Height written as height:123 where "123" is the desired height of the player, in pixels.
  • Open written as open:1 where "1" indicates that clicking on the video should open a pop-out player, rather than playing it inline. See the MIIS Spotlight feature on that site's homepage for an example.
  • Image written as image:http://url_of_image.jpg puts a "splash" image over the video player, allowing you to highlight a particular frame if you have a separate image of it.
  • Ratio written as ratio:16/9 allows you to set the aspect ratio of the video player. The default value is 16/9.
  • Align written as align:left or align:right to align the video player to one side of the content.
  • Autoplay written as autoplay:1 or autoplay:0 where "1" indicates that the video should play automatically when the page loads (discouraged) and "0" indicated that the video should only play when the user clicks the play button. The default is "0".
  • Autorewind written as autorewind:1 or autorewind:0 where "1" indicates that after the video is done playing, the play bar is moved back to the beginning and "0" indicates that it is left at the end. The default is "0".
  • Loop written as loop:1 or loop:0 where "1" indicates that the video should begin again after it is finished automatically and "0" indicates that it should not. The default value is "0".

A note about ratio: The default value of this attribute is 16/9. If you have a video that you want to play at a very precise pixel dimension, especially for large videos, or because you are using a specific splash image, you can set the ratio to the value of "width/height". Example: width:589 height:374 ratio:589/374.

Here is an example of a video shortcode using all of these attributes:

[video:http://middmedia.middlebury.edu/media/Communications_LiveRecording-MIDD-web_data-middlebury-edu/mp4/2012Convocation.mp4 width:640 height:480 open:1 image:http://middmedia.middlebury.edu/media/Communications_LiveRecording-MIDD-web_data-middlebury-edu/splash/2012Convocation.jpg ratio:16/9 align:left autoplay:0 autorewind:0 loop:0]

Vimeo Attributes

The Vimeo player supports a set of custom attributes.

  • Autoplay written as autoplay:1 or autoplay:0 where "1" indicates that the video should play automatically when the page loads (discouraged) and "0" indicated that the video should only play when the user clicks the play button. The default is "0".
  • Loop written as loop:1 or loop:0 where "1" indicates that the video should begin again after it is finished automatically and "0" indicates that it should not. The default value is "0".
  • Color written as color:ff9933 where the value is a hexadecimal representation of an RGB color value. If no value is included, 00adef will be used.
  • Title written as title:0. The only valid value is 0. If included, the title of the video will not be shown on the splash screen.
  • Byline written as byline:0. The only valid value is 0. If included, the byline of the video will not be shown on the splash screen.

Here is an example:

[video:https://vimeo.com/72660526 width:456 height:256.5 color:ff9933 title:0 byline:0]

YouTube Playlists

You can add a YouTube playlist by adding the playlist ID in the video URL. For example:

[video:http://www.youtube.com/watch?v=DaCP2kdYA4A&p=17B9CA1B31A33C5E]

or

[video:http://www.youtube.com/watch?v=DaCP2kdYA4A&list=17B9CA1B31A33C5E]

In these examples, the playlist ID follows the "p=" or "list=" parts of the URL.

Exposure Attributes

In addition to height, width, and ratio, Exposure embeds also support two custom attributes: title: and author:. These attributes will set the attribution line below the embed content. Underscores will be translated to spaces. Example:

[video:https://middlebury.exposure.co/middlebury-presidential-inauguration width:600 height:600 author:Middlebury title:Inauguration_of_Laurie_L._Patton]

Audio

Audio uses the same shortcode as video, which might be confusing, but will work. The only supported sources for audio files are MiddMedia and Panopto. Here is an example of the shortcode to use for an audio file.

[video:http://middmedia.middlebury.edu/media/imcbride/mp3/Tree_Miller.mp3]

[video:https://midd.hosted.panopto.com/Panopto/Pages/Viewer.aspx?id=##########]

Unlike video, you cannot set the height, width or other attributes of the audio player.

Computer Labs

You might want to add information about the labs that visitors to your site use. We can display the number of available machines in each of these labs to give people real-time information about their usage. To do this use the labserver shortcode.

[labserver] will print the total number of available machines in all computer labs.

[labserver 3] will print the total number of available machines in computer lab 3, which is Armstrong 161.

[labserver 65,43] will print the total number of available machines in computer labs 65 (LIB 105) and computer lab 43 (LIB 140) combined.

You can get the ID of the lab to use by clicking on any of the labs on the LabStats site and looking at the URL, which will include a "lab_id" parameter.

Alumni Profiles

To display a list of all Alumni Profiles:

[view:alumni_profiles]

To display a list of Alumni Profiles from a single department, include that department's four letter Banner subject code:

[view:alumni_profiles=default=ITAL]

To display a list of Alumni Profiles from multiple departments, include a + separated list of those departments' four letter Banner subject codes:

[view:alumni_profiles=default=ITAL+GEOL]

To display a slider of random Alumni Profiles:

[view:alumni_profile_slider]

To display a slider of Alumni Profiles from a single department, include that department's four letter Banner subject code:

[view:alumni_profile_slider=default=ITAL]

To display a sliderof Alumni Profiles from multiple departments, include a + separated list of those departments' four letter Banner subject codes:

[view:alumni_profile_slider=default=ITAL+GEOL]

List Manager Subscription Forms

You can embed a sign-up form for your List Manager mailing list in content using this shortcode, where the second part is the name of your mailing list. For example:

[listmanager middnews_general]

You can have a nice printed description for the list, rather than showing the machine name of the list to the user. To do this, add the description of the list separated from its name by a colon.

[listmanager middnews_general:MiddNews]

You can allow the user to subscribe to multiple lists at once using the same form. To do this, separate this lists with commas.

[listmanager middnews_general:MiddNews,artsmail:Arts at Middlebury]

Storify

Storify is a service that allows you to build a story using clips from many social networks. Search for a term like "Middlebury Reunion" and find the Facebook posts, Tweets, YouTube videos, Instagrams, etc. about that event and then drag-and-drop them into a list that can be displayed on your site.

To use this add the following shortcode to your content:

[storify:STORY_URL]

iframe Embeds

We allow iframe embeds from several sites, when we need to support embedded forms or other interactive elements. These are whitelisted by domain. The current list of supported domains is:

  • app.e2ma.net
  • learn.middlebury.edu
  • middlebury.tfaforms.net
  • www.sensusaccess.com

These can be embedded using the following code:

[iframe https://middlebury.tfaforms.net/217719]

We support the following attributes, all of which are optional:

  • width written as width:123 where "123" is the desired width of the iframe, in pixels.
  • height written as height:123 where "123" is the desired height of the iframe, in pixels.
  • allowfullscreen written as allowfullscreen:true to allow a fullscreen button on the iframe. Can be either "true" or "false".
  • allowTransparency written as allowTransparency:true to allow transparent iframes. Can be either "true" or "false".
  • frameborder written as frameborder:0 to show a border on the frame. Can be either "0" or "1".
  • scrolling written as scrolling:yes to show a scrollbar on the iframe if the content exceeds the specified width and height dimensions. Can be either "yes" or "no".

Theta360

Panoramic images from this service can be embedded in the site using the following shortcode:

[theta image=https://theta360.com/s/cOq9vWMcV9jNvi0syU1MaAVM0 width=500 height=375]

The "image" attribute is required and must have the hostname "theta360.com". The width and height attributes are optional and will default to 500 and 375, respectively, if not included.

Powered by MediaWiki