Fences HTML5 illustration

Fences is a an easy-to-use tool to specify an HTML element for each field. This element choice will propagate everywhere the field is used, such as teasers, RSS feeds and Views. You don't have to keep re-configuring the same HTML element over and over again every time you display the field.

Best of all, Fences provides leaner markup than Drupal 7 core! And can get rid of the extraneous classes too!

This kind of tool is needed in order to create semantic HTML5 output from Drupal. Without such a tool, you have to create custom field templates in your theme for every field. :(

Similar projects include Semantic fields, Field Wrappers and a tool inside the Display Suite extras. But we think this approach is Morefasterbetter™.

Markup Comparison

Compare Drupal 7’s default markup for a field:

<div class="field field-name-field-test field-type-text field-label-above">
  <div class="field-label">Foobar field:&nbsp;</div>

  <div class="field-items">
    <div class="field-item even">Leaner markup means better front-end performance.</div>
  </div>
</div>

To Fences’ default markup (when selecting <div> as the wrapper):

<h3 class="field-label">Foobar field</h3>

<div class="field-foobar">Leaner markup means better front-end performance.</div>

How To Use This

  1. Download, install and enable the module.
  2. Visit admin/config/content/fences to configure the default markup and classes used on the site. For new sites, we highly recommend using all of the “override” options.
  3. Now when you create new fields, in the configuration for that field, you have a new option — to choose the markup for this field.

Now anytime you display that field in a node, or even in Views, Fences will alter the markup for the field to use the element you chose. If you would like to not let Views use the Fences markup, you can still use all the power of Views to alter it. But it will use Fences by default. :)

What it's doing

Behind the scenes, the Fences module is remembering which custom tpl file you want to use for each field. This is set in the field configuration itself — not in the display (or view mode) configuration. That way, every time to output this field, it will use this custom tpl.

Fences ships with a bunch of tpls files. Look inside the module to see which ones, and to see the markup for each of those. If you would like to change that markup, make a copy of any tpl file, put it in your custom theme, and edit away. Drupal will automatically use the copy in your theme instead of the copy in the Fences module files (once you clear the cache).

If you would like to make more things — and add to the list of possibilities — make more tpls files of your own, and place them in your theme. Use the fences naming convention, and Fences will automatically find them, and add them to the list available in the dropdown for field configuration.

field--fences-NAMEOFELEMENT.tpl.php
and
field--fences-NAMEOFELEMENT-multiple.tpl.php

Why have two, one with 'multiple' in the name? Because sometimes fields are multi-value, and require more complex markup then when they have a single value. But we didn't want to have all that markup around all the bazillion times a field is not a multivalue field, so we built a way for the Fences module to check, and use a simpler tpl file whenever possible.

How You Can Help

This is a work in progress! Please do file an issue if you find a bug. You can also help by suggesting more starter-templates for Fences to ship with. It's complicated, figuring this out — many HTML elements are best used when fields are grouped together and nested inside a wrapper element, and Drupal doesn't have any way to do that. We are still working on solutions for the more complicated usecases. Do chime in with your ideas!

Project Information

Downloads