by Jeff Eaton on July 23, 2012 // Short URL

Module Monday: Fences

How to Avoid Heavy FieldAPI Markup (When Setting up Custom Content Types) in Drupal 7

Yes, yes -- Drupal's FieldAPI gives us powerful tools for modeling content, displaying it, and customizing the administrative interface for content editors. That's all well and good, but have you seen the markup that FieldAPI generates? Setting up custom content types may be a pleasure, but the tangle of deeply-nested DIV tags that results is anything but awesome. While it's possible to override that clunky markup in a custom theme, the new Fences module eliminates heavy field markup with just a few clicks.

Screenshot of Fences field options

Installing Fences results in one simple change: when you go to edit a field, you're given and opportunity to choose what sort of markup element should wrap a field's contents. Want one field's text to appear in an <h3> while another's shows up in a <cite>? No problem. If you want to change fields globally, you can also switch all of your fields to a smart, <div>-based default until you have time to manually tweak them all. The results are impressive:

Default Drupal node markup

<div class="field field-name-body field-type-text-with-summary field-label-hidden">
  <div class="field-items">
    <div class="field-item even" property="content:encoded">
      <p>Body text goes here!</p>
    </div>
  </div>
</div>

<div class="field field-name-field-announce-date field-type-datetime field-label-above">
  <div class="field-label">Announce Date:</div>
    <div class="field-items">
      <div class="field-item even">
        <span class="date-display-single">Monday, June 18, 2012</span>
      </div>
    </div>
  </div>
</div>

Node markup with Fences module

<div class="field-body">
  <p>Body text goes here!</p>
</div>

<h3 class="field-label">Announce Date:</h3>
<div class="field-announce-date">
  <span class="date-display-single">Monday, June 18, 2012</span>
</div>

Impressed? I know that I am. There are a handful of missing features that would be handy, like adding a custom wrapper tag around a field in addition to controlling the field's own markup. As it stands, though, Fences is a great tool for simplifying markup and avoiding piles of theming grunt work.

Jeff Eaton

Senior Digital Strategist

Want Jeff Eaton to speak at your event? Contact us with the details and we’ll be in touch soon.

Comments

valderama

Seems like a super useful

Seems like a super useful module.

There are a couple of field templates that you need for multiple field per project and also in every project again. Makes real sense to a have an module with a UI.

Thanks for sharing!

Reply

Kevin

Why does Drupal need to

Why does Drupal need to markup the fielded output before asking the user?

I really wish (and maybe there are and I am unaware yet) there were simple hooks that allowed themers to provide wrappers for Fields, or hooks in Fences to define your own with TPLs. I took a look at some of the FieldAPI, and a lot of it is too complicated for the average themer to want to deal with.

Reply

Larry Garfield

Themer optional

A major part of Drupal's design is making it possible to spin up RAD sites without a themer. That means adding a field must give at least decent output and display on screen. Not stellar, not optimized, but decent and usable. Displaying a field by default with no markup whatsoever would fail that criteria.

The markup in D7 is excessively heavy, no question, and a lot of it has been simplified in D8. (There's more work to do there; volunteers welcome!)

That said, I believe there's already ways to individually override the template for specific fields. It's just an annoying process to do repeatedly, which is where Fences module makes life a lot simpler.

Reply

John Albin Wilkins

There’s an API for that.

I really wish (and maybe there are and I am unaware yet) there were simple hooks that allowed themers to provide wrappers for Fields, or hooks in Fences to define your own with TPLs.

Actually, both core and Fences do. Theme hook suggestions allow you to use a specially-named template file that will be used instead of the default field.tpl. You can see a list of the theme hook suggestions that core provides for fields on that docs page I just linked to. Fences extends that idea and provides a fences-specific theme hook suggestion when you configure a field to use a specific HTML5 element.

Fences also has an API to add additional template files with their HTML5 elements to its drop-down list.

Reply

moshe weitzman

Contemplate for Fields

Oh dear. Isn't this Contemplate module for Fields? This is a UI for wrapper markup, and stored in the DB. It is handy and evil for all the same reasons that Contemplate is handy and evil. The UX here is easier/better than Contemplate, but still.

Reply

John Albin Wilkins

Contemplate stored markup in the db

I think you are misunderstanding what Fences does.

Contemplate stored markup and PHP in the database. Fences uses theme hook suggestions. All of the HTML element options for a field have a corresponding template file inside the fences/templates folder.

And let’s compare Fences with the Semantic Fields module. It allows/requires you to enter the HTML element into text fields for each view mode that a field is used in. The HTML element is stored in the database with the field configuration.

Fences, on the other hand, only requires you to select the HTML element once. The presumption (a good one, IMO) is that the semantic meaning of your field doesn't change depending on where the field is being displayed on your site. You select the semantics once and its used everywhere the standard field template would be used.

Fences also doesn't store the HTML markup in the database. It stores the name of the theme hook suggestion with the field configuration.

So… absolutely no markup in the database because of Fences. It’s not even close to comparable with Contemplate module.

Reply

Chris Ruppel

Fences + Chosen

People who prefer the keyboard over mouse clicks might appreciate the Chosen module in conjunction with Fences. It turns that big <select> tag into an auto-complete field, removing a few clicks from the process of configuring each field.

Reply

John Albin Wilkins

2 comments

First: a typo. The code snippets’ caption both say "node markup" when they should say "field markup".

Also, the optional wrapper around titles and the field is an open feature request. I'd love to see that be Fences' next feature. http://drupal.org/node/1343578

Reply

bizworldusa

Fences

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.

regards.
bizworldusa

Reply