Drupal 7 Fences Module

By shane
Tue, 2013-01-15 21:16
Daily Dose of Drupal Episode #87

Share with Others

The Drupal 7 Fences Module is a lifesaver for the HTML purist in all of us. By default Drupal adds a lot of extra markup that is not always needed. The reasons Drupal adds the extra markup is to make sure it can work out of the box for as many different requirements as possible. However, in many cases this markup is not needed. This is where the Drupal Fences module comes in. This module not only lets you choose how to structure the markup around your Drupal 7 fields, it also comes with a wide variety of completely customizable field templates.

In this episode you will learn:

  • How to clean up the HTML markup around your Drupal fields with the Drupal Fences module
  • How to change the template used for individual Drupal fields
  • How to modify an existing Drupal Fences template
  • How to create your own Drupal Fences template

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 87. As always I am Shane Thomas and you can follow me on Twitter at smthomas3, also hop over to codekarate.com and check out the other Daily Dose of Drupal videos and sign up for the newsletter, you can also find me on Google +. Today we’re going over a pretty cool simple little module called Defenses Module and this module solves a problem and there are some of you out there who are very … who this will … you’ll definitely appreciate this module I’ll say that.

Basically it allows you to simplify some of the markup that Drupal outputs. So a lot of times in Drupal because aims to be as flexible as possible and to fit as many purposes as possible it includes a lot of extra markup.

So as you can see here’s the Drupal 7 default markup for a field. You can see there’s a lot of divs there, a lot of nested divs just to make sure that it can fit pretty much any scenario you would need. 90% of the time that’s not necessary on most sites so what defenses allows you to do is that it allow you to simplify that markup. So here’s the defenses default markup and as you can see it’s much simpler.

So we’re going to go ahead and just demo this quickly and show you how it can used so let’s go ahead and open the site up and I have a pretty simple test site here, I just created a simple content type with a couple of fields and we’ll go ahead and open up our developer tools and take a look at this one here.

So as you can here is the field, this wraps the entire fields, here is the label and this was a select field, I called it Test Select, you can see there’s then a div that’s says it’s a classic field items and there’s item lists that says 1. So all that markup just to get this little output right here.

So we’re going to go ahead and I’m going to turn on defenses module which I’ve already downloaded and save this and now that I’ve saved this module I’m going to come back over here, I’m going to open this up in a new tab so we can compare and we’ll see if anything’s changed yet.

I haven’t done any configuration so it looks just about the same. Lets’ go ahead and configure this module now; okay so you can go ahead and look at the options that I have here; it generally says if it’s a new site you should go ahead and select override on both of these.

So now that we click save we’re going to come in to our content type that I created and I’m going to go into Manage Fields, I’m going to go into this Test Select. Now as you can see while I’m in this field there’s a wrapper markup selection and there’s a big list of all these templates that you can use for outputting your fields.

So the generic container is just the div but if we wanted this to be for instance a bold you can go ahead and select Bold, we’ll save this or refresh here, you can see now it says Bold or it is bold, it still says the same thing, you can see the label is much different, it’s much simpler HTML wise in comparison so it adds the label as an H3 and adds bold around the actual value so you can see how much simpler it is markup wise.

There’s no div wrapping everything, it’s just much simpler. So you can then of course use your CSS in your style sheets to go ahead and theme this however you want. We’ll go ahead and try a couple of other ones here, we’ll go into the Test Text and select different one, you could use a paragraph format which that … we’ll go ahead and try paragraph format.

As you can see there’s a whole bunch of options and I’ll show you how you can change these options or add to this list as well here in a second. So I’ll come back and refresh this, now you can see this is wrapped in a paragraph tag. So the label is H3 and this is wrapped in a paragraph tag and it’s pretty much as simple as it gets, you can go ahead in any field then you can of course configure it however you want making it extremely easy to change the markup for this specific field and that of course keep things simpler means, you know, the page is a little bit because you don’t have as much markup, your CSS is going to be applied a little bit faster, doesn’t have as much markup to parse thru.

Just overall if you can use less markup there’s no reason not to do it. It just makes things a little bit better. So how can we modify this? Let’s say we wanted to modify this template for this paragraph tag.

Well we can hop into the module and it comes with a whole bunch of templates so I’m going to go ahead and open this up and as you can see I’m in this defenses module here, it has a bunch of files but there’s a folder called templates and inside this there’s all of these different templates that you can use.

So for instance we can go ahead and open up this paragraph template if that was in here and you can see here is the template for this paragraph. If I wanted to change this template across my entire site all I need to do is make a copy of this template, bring it into my theme and put it either in my top level or my theme directory or a theme’s templates directory, save it, I can then modify this and then all I needed to do to get it to take effect is of course clear the cache in Drupal, so it’s really pretty easy.

You can also see if you know a little bit about PHP it says if the element is inline use a span, if it’s not, if it’s above use an H3. So that of course means that if we want this label to be inline instead of making it an H3 we can go ahead and come up to our content type and go to manage display and change the label of these to inline.
Save this and come back and you’ll notice now that they are inline. You’re going to have to of course do … add a little CSS to make this look the way you wanted to. It’s not going to maybe be as nice initially right out of the box but it does cut down the markup and allows you to control how the end output looks and doesn’t leave it all up to structure of the HTML itself. So that’s pretty much it for Defenses Module.

The one last thing I’ll cover before I quit is if you go down to the bottom it allows you or tells you how you can define your own templates. So let’s say you want to add your own template to this template list; so you wanted to add a template here you basically need to follow this format down here.

You build a template, you place the template file in your theme and you use this name and can mention. Use field--defenses-name of element, you can also use field--defenses-name of element-multiple and that’s just because some elements need to look differently if they have multiple values.

So if your field has two or three values maybe you can select multiple checkbox or something for your field, you’re going to want that probably have a little bit of extra markup around it than just a single selection. So you can go ahead and try to add your own elements and once you add this, clear the cache, they should show up in that list.
So that’s all we’re going to go over today, as always you can let me know if you have any questions or follow me on Twitter if you’re not already and try this module out and see if it helps you cut down on all that extra markup. Thanks for watching the Daily Dose of Drupal, we’ll be back again next time.