February 2013

Playing with Frank in the snow last night


Rendering responsive images with field_view_field and the Picture module

I've been working on implementing our theme in Drupal 7 and making it responsive. There are a lot of great modules out there that can help you do this, right now I'm using response.js, Omega, Breakpoints, and Picture.

One thing I've came across a few times is rendering image fields and making use of the Picture module.

$header_image = field_view_field('node', $vars['node'], $header_key, array(
  'label' => 'hidden',
  'type' => 'picture',
  'settings' => array(
    'picture_group' => 'NAME_OF_PICTURE_GROUP',
    'fallback_image_style' => 'NAME_OF_FALLBACK_IMAGE_STYLE',
    'image_link => ''

The field_view_field function makes it really easy to render fields. I'd also take a look at hook_field_formatter_info and hook_field_info for more info on how to use the field_view_field function. Also checkout a post called Responsive Images: A Drupal Implementation that describes a great way on how to setup Breakpoints, Picture and your Image Styles. You can also export all of the configuration in a feature.