Fences HTML5 illustration
Extensive field markup example
Extensive field markup code example
Minimal field markup example
Minimal field markup code example
Field example without Fences installed

Fences is 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 core! You can also remove field, label, wrapper or value wrappers entirely.

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™.

Versions

  • 3.x: Active development, Drupal 9/10 support.
    Drupal 8 support may end soon. Added field items wrapper & further functionality
  • 8.x-2.x: Security fixes only, Drupal 8 support, no Drupal 10 support.
  • 7.x-2.x: Active development, but maintenance fixes only. 7.x-1.x with further fixes. See comparison here.
  • 7.x-1.x: Original Drupal 7 release, security fixes only.

Usage

  1. Download, install and enable the module.
  2. Go to any Content → Manage Display and click on the gear icon of the targeted field.
  3. Here, you have the option to define custom field, field item and label tags and add custom classes.

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. :)

Not working with your contrib / custom theme?

If you're experiencing issues where the Fences settings do not fully apply, for example classes are added, but elements do not change, the reason might be, that your contrib / custom theme is overriding the field.html.twig file, which is higher weighted than the one from this module.
Find workarounds and help us to fix that in this issue: #3306130: Doesn't work with themes overwriting field.html.twig (also core like Bartik)

Additional modules

How You Can Help

This is a work in progress! Please do file an issue if you find a bug or have a feature request. Do chime in with your ideas!

Supporting organizations: 
proudly helped to improve this module for the Drupal community

Project information

Releases