Configuring fields with Display Suite for Drupal 7
The 7.x-1.1 release of Display Suite comes with a couple of new exciting features:
- Fivestar
- More hooks and better views extendibility
- Ability to hide the page title on full node view
- Custom field templates via the UI
The last feature is better known as the cure for divitis feature for the field system. Or you can also call it semantic fields. The possibilities to theme entities through the Field UI have now become endless. I'll explain those changes with code and screenshots, which should convince you how powerfull and easy Display Suite can be for your website. And best of all, this is all exportable!
Display Suite Extras
The field templates feature is located in the Display suite extras module, so it isn't enabled by default. But once configured to run, all fields, in every entity/bundle/view mode, on the "Manage display" screens get the ability to change following properties of their output:
- Label: a custom label, wrapper and classes
- Styles: extra styles on the outer wrapper (except reset or expert)
- Field template: select the default output function which can be registered with hook_ds_field_theme_functions_info(). 3 options are already available
- Default: this is the default Drupal core field output.
- Reset: a function which strips all wrappers.
- Expert: a function which enables you to have full control over
- Outer wrapper, element and classes
- Field items wrapper, element and classes
- Field item wrapper, element and classes
Fancy pictures usually say more than words, so just take a look at the screenshots underneath to see how this looks in reality.
In case you're not satisfied with those 3 options, you can always create your own output function. It's a simple hook returning an array which keys are the function and values are used for the label in the select box on the Field UI screen. The function takes 2 parameters, namely the $variables from the field the $config variable which holds specific information about the field itself.
<?php
/**
* Implements ds_field_theme_functions_info().
*/
function example_ds_field_theme_functions_info() {
return array('theme_example_field' => t('Example theme field'));
}
/**
* Field theming function.
*/
function theme_example_field($variables, $config) {
$output = '';
// Render the items without wrappers and label.
foreach ($variables['items'] as $delta => $item) {
$output .= drupal_render($item);
}
return $output;
}
?>And that's it. Theming your entities has never been so easy in Drupal 7. If you want to try out yourself, go to http://drupal.org/project/ds and download the latest stable release. Happy theming! If you're interested, please support our session at the upcoming DrupalCon London and talk with us maintainers for tips and tricks!
| Attachment | Size |
|---|---|
| ds-field-template.png | 119.51 KB |
Comments
PieterDC on Mon, 09/05/2011 - 14:08
Looking forward to a project where I can play with this. Looks promising.
Delphine on Fri, 13/04/2012 - 11:46
Very handy !
Thanks for the tip
laurencefass on Wed, 30/01/2013 - 16:55
hello pleae do you know where the field templates settings are stored? i cannot find them anywhere!
droddis on Tue, 26/03/2013 - 19:45
I've been beating my head against the wall for 4 hours trying to figure out how to get this level of granularity..... thanks man, I owe you! Amazing post and much appreciated.
Add reply