theming

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
    1. Default: this is the default Drupal core field output.
    2. Reset: a function which strips all wrappers.
    3. 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!

Sweaver: a visual interface for tweaking your Drupal 6 theme

For the upcoming release of Conimbo, a Drupal distribution we're building at One Agency, we needed an easy and attractive way to theme your website without knowing anything of CSS. Having the opportunity to experiment once and a while during our free day at work, one of our colleagues started playing around with jQuery and manipulating the properties directly on the frontend - much like the Themebuilder created by Drupal Gardens, which he used as inspiration. After a while, I joined the coding part and sweaver was born - if you really want to know where the name comes from, that's all explained on Drupal.org.

Writing sweaver was interesting because of three reasons:

  • jQuery: we now probably know the jQuery manual by heart since we've had to look up a lot of new tricks to manipulate all kinds of stuff: iterating through all parents of a css selector, show/hide/close/open tabs and sliders, find out out the type of a selector and keeping it all manageable in a nice interface. It's been a tremendous ride so far and I'm pretty sure we've not reached the end of it.
  • CTools: sweaver uses the CTools plugins and exportables functionality. This means developers heaven both for us as maintainers, but also for other drupal people out there wanting to write their own plugin for this module. We're still into beta phase right now, so we might even use other functionality like object caching, Ajax and form tools.
  • Themes: we've learned that creating a re-usable theme isn't that easy, which is not even related to Drupal. Technology like cufon is fun, but clashed with our module. Switching to @font-face was something we've planned, but now got implemented faster. And I personally learned a lot of cool css tricks, but I'll stick with coding though :)

Interested and want to see how it looks like ? You can watch two video's we've created: a basic introduction and another where we show you how I've used the module to rebuild my own website. There is also a demo site where you can login and play around with it - not all plugins are enabled, but you should be able to create beautiful themes or hideous creatures :)

Downloads and more documentation is available on the project page on Drupal.org. It's important to know that we're still in development, so there are things that still act funky and might change completely during commits before a first release. Happy theming!

Pimping the CCK display fields UI

Ever dreamed of having a node template with only this in it: print $content; ? Well, my sandbox site currently runs a patched version of CCK which does the following: order the fields on every display, not when managing them. You are also able to render the fields in what we call node regions. Screenshots and a first patch is available at the end of this post.

Rendering fields

In the UI of CCK we all know right now, it's possible to set the order of the fields on the 'manage fields' tab. This affects the order on the node form and on the full node, teaser etc view. Since the arrival of http://drupal.org/project/nodeformcols, it's easier to have a more finer control of the node edit form and we wanted to have that same control over the full node, teaser, sticky view .. Adding a weight property wasn't that hard to accomplish. You can see that the order of fields is different in those 3 contexts on the sandbox site. We're still looking howto affect search results too ..

Node Regions

To make our themers happy, we added node regions, so it's easier for them play around with the fields while creating their views, teasers, full nodes etc. They can play with 5 regions without having to create one single template file. Only CSS, that's what they were hired for in the first place :) If you look at the sandbox site, you'll see that with those regions, a full view vs sticky looks different, only through the magic of css.

Extra fields

In the version we currently have at work, we are able to add extra fields with custom formatters. It resembles a bit like the 'content_extra_fields' hook you can currently implement. This gives us the benefit to render the title beneath an image for instance. In the next few days, we'll be looking on howto to extend that functionality in the CCK module.

Patch

We won't release this as a module or as a fork of CCK, the best way to contribute is to release a patch of course. We're still cleaning up the code a bit, but a first version is available. Apply it against the 6--2 branch of CCK - latest dev will probably work too. As soon as we think the patch is clean, we'll post it in the issue queue of CCK. In the meantime, if you have any questions or suggestions, ping us on IRC (swentel, stalski or zuuperman).

Screenshots

The manage fields now only manages the cck fields.

Display fields now controls the order and the region, here the full node.

Same screen, but now the sticky context.

Shot of firebug where you can see that 3 node regions are rendered.

Topics 

drupal, theming, cck, planet

Theming is done

Creating a cool layout isn't easy, especially if you also want a tableless layout with css. And I'm not that talented to create a new template in a few hours which is funky and 'web 2.0' enough to publish. So I just used my old template and created a new theme for my drupal installation. I'm pretty satisfied with it and testing on firefox and internet explorer went pretty smooth. I personally like the image galleries which use the complete viewport of your browser, so no problem with huge pictures from now on. The only thing left is adding next and previous buttons when browsing through a gallery looking at individual pictures.

Update Jul 3, 10:36 ยป Next & previous buttons work on the image galleries!

In the meantime, look around and if you encounter some sort of layout problem, let me know!

Topics 

drupal, theming
Subscribe to RSS - theming

You are here