Page tree
Skip to end of metadata
Go to start of metadata

Web Services has devised a way to share pieces code as small plugins. Plugins are defined as small pieces of code that encapsulate all html, images, css, and javascript into one T4 content type. Plugins must include minimal styling and must be able to be applied to any VCU site. We're assuming jQuery is loaded in the page layout of the site's template. This is achieved by using three different T4 content type layout formatters and the media library.

The only configuration necessary to start using plugins is to add the following T4 navigation tags to your header and footer in your page layout (template).

If your page is using the same plugin twice the stylesheets and javascript will only be added to the header and footer of your site once.

Header:

<!-- navigation object : Plugin Style -->
<t4 type="navigation" id="3276"/>

Footer:

<!-- navigation object : Plugin Javascript -->
<t4 type="navigation" id="3277"/>

These navigation tags belong to the "Plugins" group but can be used cross channel because they are not pulling in any channel specific information.

You'll then need to enable the plugin for your section or branch so your users can use it. You'll do this by going to the Section > Content Types and enabling the plugin you want your users to be able to use. Available plugins are added to the "Plugins Users" group. (Enabling plugins on a page from the "Plugins" group will not work, because only Web Services staff are in that group.)

From there your users who are in the Plugins User group will be able to use the plugin. 

As outlined below, plugins are namespaced with a wrapping <div class="plugin-pluginName"></div> and include minimal styles. This way website owners should be able to style each plugin to match their website easily by utilizing that opening "plugin-pluginName" class.

Creating Plugins

Namespacing Plugins

All CSS and Javascript used in plugins must be namespaced to not override any website styles or functionality. For CSS we are using:

/* example */
.plugin-pluginName-element {background: yellow;}
 
/* For instance */
.plugin-printthis-btn {padding: 5px 0px 5px 20px; background:url(printer.gif) no-repeat left 5px;}
  • No labels