Error message

  • Notice: Undefined index: openblog_theme in drupal_theme_initialize() (line 100 of /var/www/zach.seifts.us/build_1406387381/includes/theme.inc).
  • Notice: Trying to get property of non-object in _drupal_theme_initialize() (line 146 of /var/www/zach.seifts.us/build_1406387381/includes/theme.inc).
  • Notice: Trying to get property of non-object in _theme_load_registry() (line 335 of /var/www/zach.seifts.us/build_1406387381/includes/theme.inc).
  • Notice: Undefined index: openblog_theme in theme_get_setting() (line 1431 of /var/www/zach.seifts.us/build_1406387381/includes/theme.inc).
  • Notice: Trying to get property of non-object in theme_get_setting() (line 1478 of /var/www/zach.seifts.us/build_1406387381/includes/theme.inc).

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.

Comments

+1 for this, exactly what I was looking for. Thanks.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.