Technology & Development, Content Management

Snippets: Your New Best Friend

In OU Campus™, a snippet is a pre-built chunk of code that non-technical users can easily add to a web page by clicking a button in the WYSIWYG Editor or dragging it from the Snippets Gadget. Web developers can create these snippets to make content editing easier for end users. For example, users can use a snippet to add a complex table with formatting and interactive functionality that adheres to your institution’s overall design and accessibility guidelines.

Content contributors can easily create, maintain, and adjust snippets. Snippets can be as simple as the example below or as complex as creating sophisticated layouts, which I’ll explain a little later.

<h3>Contact Us</h3>
<p>Tel: 123.456.7890</p>
<p>Email: support@gallena.edu</p>
<p>Address: 1234 N. 15th Street</p>
<p>Gallena, CA 90010</p>

Should the heading be in H2 or H3? The snippet above allows your web authors to take the guesswork out of formatting content that you want to look the same across your site. This snippet will eliminate that decision and allow them to focus on what matters most: the content.

In addition to simple content formatting, you can take it up a notch and utilize the XSL transformation that occurs in OU Campus to transform your snippets into something more complex, or something completely different altogether. For example, many designs today leverage a responsive design. Two of the most popular responsive web frameworks are Bootstrap and Foundation, both of which feature a grid system. You can create a snippet that contains the HTML below and let your content contributors add this snippet to your web pages.

<div class="row">
<div class="small-12 large-6 columns">
<h3>Sample Heading</h3>
<p>This is some sample content</p>
</div>
<div class="small-12 large-6 columns">
<img src="http://placehold.it/350x150" alt="" />
<p>Sample Image content</p>
</div>
</div>

This particular snippet will give you two columns of content, a left and right column. However, adding any explicit div structure into the WYSIWYG Editor is not recommended since our goal is to separate content from design (e.g., if you choose to move to a different CSS framework down the road, you won't want to deal with changing all of the HTML and CSS class names that are embedded within your content). Don’t worry, there is a solution: a snippet transformed using XSL.

We have determined that, in the WYSIWYG Editor, content contributors find it easier to edit content in a table. So let’s build a snippet that contains a table, allowing our non-technical users to easily edit the content, and use XSL to transform our table snippet into the desired div structure shown above. You can accomplish this in many ways; however, the simplest and most common method is to use XSL to target the table snippet's ID or class and convert the output from the table structure into the div structure.

What would it entail to create our earlier two-column example using a table transformation snippet?

The snippet would have to consist of two rows, each row containing two columns: one for modifying the class associated with each column, and the other to control the content each column is going to display.

<table class="ou-snippet">
<thead>
<tr>
<th colspan="2">Two Column Snippet</th>
</tr>
<tr>
<th>Classes</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr class="left-column">
<td class="class">
small-12 large-6 columns
lt;/td>
<td class="content">
<h3>Sample Content</h3>
<p>This is some sample content</p>
</td>
</tr>
<tr class="right-column">
<td class="class">
small-12 large-6 columns
</td>
<td class="content">
<img src="http://placehold.it/350x150" alt="" />
<p>Sample Image content</p>
</td>
</tr>
</tbody>
</table>

Notice that I have added classes to certain elements: the table itself and the table rows. XSL will use these classes to target elements of the snippet so we can control the output. These classes keep the code clean and make the XSL easier to read. It is important that you are only targeting this particular table with your XSL transformation. Targeting a specific CSS class name is important. You will notice that this table is a very close representation of the div structure listed above, and you are right; however, this will be much easier to edit in the WYSIWYG Editor than the original div structure.

Two Column Snippet

Now we need to utilize XSL to transform the new table snippet we created into our preferred div structure as seen above. This is a fairly basic example; however, this same method can handle very complex layouts. With the power of XSL, you can transform almost anything.

<!-- First we match the table with the class of 'ou-snippet' -->
<xsl:template match="table[@class='ou-snippet']">
<!-- Output the necessary div structure that we do not want to be part of the WYSIWYG editor -->
<div class="row">
<!-- Build the first div class by using the content the user has supplied in the classes row, and the cell with the class of 'class' -->
<div class="{tbody/tr[@class='left-column']/td[@class='class']}">
<!-- Process only the children of the row with the class of 'left-column', and the cell with the class of 'content' -->&nbsp
<xsl:apply-templates select="tbody/tr[@class='left-column']/td[@class='content']/node()" mode="copy"/>
</div>
<!-- Build the second div class by using the content the user has supplied in the classes row, and the cell with the class of 'class' -->
<div class="{tbody/tr[@class='right-column']/td[@class='class']}">
<!-- Process only the children of the row with the class of 'right-column', and the cell with the class of 'content' -->
<xsl:apply-templates select="tbody/tr[@class='right-column']/td[@class='content']/node()" mode="copy"/>
</div>
</div>
</xsl:template>

Below is an example of the two-column layout that our snippet has produced, as well as the source code.

Snippet two-column layout

You can see the HTML output from the snippet matches our desired output perfectly.

Snippet Source Code

You will notice that I am matching the table via the class name supplied by the snippet. Then I build the editable sections of the div structure (class and content) by getting those values from what the user has entered into the snippet. If you wanted to clean this example up to make it more DRY (Don’t Repeat Yourself), you could do the following instead:

<xsl:template match="table[@class='ou-snippet']">
<!-- Instead of listing each row on its own we can use the for-each to have XSL go through all of the rows in the table -->
<div class="row">
<xsl:for-each select="tbody/tr">
<div class="{td[@class='class']}">
<xsl:apply-templates select="td[@class='content']/node()" mode="copy"/>
</div>
</xsl:for-each>
</div>
</xsl:template>

Two things are different here, I added the for-each statement so that the XSL will loop through all of the table rows that are part of this table, and I removed the class that was on the table row element. I removed the class to give the content editor flexibility with the snippet. They can now add as many rows as they want to achieve the desired output and the XSL will process each row that it finds. This gives you the same output as above (it’s just a bit cleaner and more efficient).

With this knowledge, the possibilities with snippets and XSL are endless. Here are some examples to get the creativity flowing:

  • Any combination of complex, flexible div-based layouts
  • Editing JavaScript arrays to create dynamic content
  • Creating image galleries
  • Creating faculty/staff/student profiles
  • Building buttons and adding icons to content

Snippets are a great way to give non-technical content contributors the ability to create complex web components in a safe and structured way—a win for everyone involved. Good luck creating simple or complex snippets.

Share this article: