One of the challenges of building is a website is how does one organize the output the fields of a content type. As with many things in Drupal, there's more than one way to accomplish the same goal. In this blog post, we're going to be taking a look at using the Field Group module for oragnizing the output of a node.
The Field Group module
The Field Group module allows you to define different groups of fields on the add / edit form of the content as well as the output of the fields in the various display modes of the content. The different types available are:
- Horizontal tabs
- Vertical tabs
- Multipage steps: Note: This is only client side.
- HTML5 elements
- Html elements
Fieldsets allow the content to be output in <fieldset> elements. They can also be collapsible / collapsed.
Horizontal tabs allow the content to be organized into a groups and subgroups of content. Vertical tabs does the same but in the veritcal direction.
Accordions group the content in collapsible accordions.
Divs allow the content to be grouped up in <div> elements. This is useful for when CSS styling calls for grouping up content to make it react to theming around it, so as in an inline block.
HTML5 elements allows you to group up elements using HTML5 elements such as section, aside, header, etc.
HTML elements allows you to group up your content using an arbitary HTML wrapper tag. This is useful for grouping up content into sections such as <figure> with the image and a <figcaption>.
Using these basic building blocks, one can achieve complex layouts of the content type without resorting to custom coding a template file for the content type. It also allows exporting via features for easy version control.
There are many modules that can be used in conjunction with the field group module but two in particular that further extend it's functionality are the Fences module and the Field Formatter CSS Class module. The fences module allows you to define the wrappers around fields or even remove them if you're grouping up the content yourself using field groups. Then, using the Field Formatter CSS Class module, you can add classes to the field group element to conditionally control it using CSS.
This overview on the Field Group module and supplemental modules hopefully provides you the tools to start creating your own complex layouts. And as always, there's more than one way to accomplish a goal in Drupal. If you have a method for achieving a similar goal, post it in the comments below.