Drupal 7 Field Formatter Class Module

By shane
Mon, 2013-01-07 18:52
Daily Dose of Drupal Episode #82

Share with Others

The Drupal 7 Field Formatter Class module allows you to add classes to the display of individual fields that are output by Drupal using the Field API. This module is useful to help save you from writing as many lines of CSS as you can use this to implement common classes across multiple fields or even use it to differentiate the same field used across multiple content types. This is a flexible tool for those site builders or themers that need a little extra help when styling the display of their Drupal fields.

Note: This module requires the Drupal 7 Field formatter settings module.

In this episode you will learn:

  • How to change the class on on a Drupal 7 content type field display

Hello everyone and welcome to another Daily Dose of Drupal, we’re on Episode Number 82 today and as always I’m Shane, go ahead and follow me on Twitter if you haven’t already at smthomas3, go back to codekarate.com and check out the other Daily Dose of Drupal videos and sign up for the newsletter. Today we’re going to be going over another very simple module; it’s the Field Formatter Class Module.

Again this isn’t a module that you’re going to use on every website unless it’s something that you really need to use for a specific design purposes but what it allows you to do is it allows you to specify a class to be on the wrapper div that goes around any fields for any of your content types.

And basically what this is going to allow you to do is let’s say you have specific classes you want to add for a specific types of text or specific design or display purposes you can use the same class across multiple fields and you can simplify your CSS file so you don’t have to write as many CSS rules and it can just really helps simplify. This is probably not anything you couldn’t do without it in all reality but it can drastically simplify how much CSS you need to write especially if you have a lot of common displays across different fields.

So it’s a really simple module but before we get started if you were anyone you know is interested in getting an e-commerce site developed to Drupal, go ahead and contact me on codekarate.com. My development team has a few empty spots in the next coming months and we’re looking to fill a couple. So I’m going to go ahead and get started. I already have the module, the Field Formatter Class Module downloaded and installed. It also has a requirement for the Field Formatter Settings Module so you’re going to want to download that and get that one installed as well.

So we’ll go ahead and show you that those are installed. You can see the Field Formatter Class and Field Formatter Settings API have been downloaded and enabled and all these does is it gives you a simple option on the manage display page of a content type. So if we go to content types and in this case I’ll go to article, click on Manage Display, you can see that there’s no class here.

If I click on this test field that I created I can add a class. Before we look at what that does let’s go ahead and go to an article that had this field filled out. As you can see I have a field there with some text in it, if I hover over it it has this wrapper div that goes around the entire field. You’ll notice it already had a bunch of classes and this is why I said it’s not something you’re going to need in every case because a lot of times you’ll be able to use the class that are given but if you have a lot of for instance text field classes and maybe a couple of text area of classes or something with a bunch of text and you want to have one class that you can use all between all these or you can probably come over the whole bunch of ideas if you have worked with CSS quite a bit for ways to help lessen the amount of CSS you need to write but we’re going to add a class to this field just to show you how it works. So I’m going to go ahead and come into the content type’s page, go back to article and go to Manage Display.

I’m going to go over to Test Field 1 and go ahead and add a My Test Field Class. If I update that, save this and I refresh this page and come back to this wrapper you’ll notice right here there’s My Test Field is at the end of this in the classes list. This means I can of course target this with specific CSS and then maybe for this class I wanted the color to be red or some other design type of purpose.

Then in this case I could set My Test Field and have certain field item show up as red. So maybe you have a bunch of text fields and you don’t want them to all be the same but you do want some of them to have a red color, you can go ahead and add this class to a couple of them and you can of course change that.

This of course works across all your different types of fields so you could of course add it to … looks like you can add it to your tags field or even your body field, you can go ahead and add this classes, change the design based on specific fields and add a CSS to your various field displays.

And that’s really all there is to this module. Like I said it’s a very simple module, if you’re a designer or a theme developer you’ll know if you’d run into these pain points before and you will know when it’s probably necessary to add this module to your Drupal website. So that’s it for this time on the Daily Dose of Drupal, we’ll be back again next time with another episode. Thanks for watching.