theme_picture [#2378697]

I need to preprocess an image to output into my drupal 7 theme. We are using the picture module, but I am having issues figuring out how I can output the correct
markup.

I found reference to a theme_picture function for d8 (which I assume is basically the same for 7). This is what I have so far:
$vars['banner'] = theme_picture(array('breakpoints'=>array('600'), 'style_name'=>'medium', 'uri'=>$vars['node']->field_banner_image_tall['und'][0]['uri']));

However, I don't think I am setting up the breakpoinsts/style_name variables correctly. I assume there is a way to correlate a breakpoint with a style_name? Could someone point me to or provide an example for how to accomplish this?

Thanks!

Comments

Comment #1

tragic.rich commented 2 December 2014 at 03:41

Status:

Active

» Closed (fixed)

In case anyone is also trying to do this, I *finally* figured this out! Instead of trying to re-architect my breakpoints by hand I found some handy helper functions in the picture.module file:

$breakpoints = picture_get_mapping_breakpoints(picture_mapping_load('banner_'));
$vars['pageBanner'] = theme_picture(array('uri'=>$vars['node']->field_banner_image['und'][0]['uri'], 'breakpoints'=>$breakpoints, 'style_name'=>'banner'));

Load the picture map via your mapping computer name, in this case:'banner_'

picture_mapping_load('banner_');

Pass the picture map to the picture_get_mapping_breakpoints to get your breakpoints array:

$breakpoints = picture_get_mapping_breakpoints(picture_mapping_load('banner_'));

Then pass the breakpoints to theme_picture:

theme_picture(array('uri'=>$vars['node']->field_banner_image['und'][0]['uri'], 'breakpoints'=>$breakpoints, 'style_name'=>'banner'));

And voila:

<picture>
<source media="(max-width:320px)" srcset="http://xxxx.com/sites/default/files/styles/banner_breakpoints_theme_conkwest_mobile_1x/public/index_0.jpg?itok=ZDgaIvo1 1x"></source>
<source media="(max-width:768px)" srcset="http://xxxx.com/sites/default/files/styles/banner_breakpoints_theme_conkwest_narrow_1x/public/index_0.jpg?itok=vYNAgcPI 1x"></source>
<source media="(max-width:1200px)" srcset="http://xxxx.com/sites/default/files/styles/banner_breakpoints_theme_conkwest_normal_1x/public/index_0.jpg?itok=BQAdPG4h 1x"></source>
<source media="(max-width:1600px)" srcset="http://xxxx.com/sites/default/files/styles/banner_breakpoints_theme_conkwest_wide_1x/public/index_0.jpg?itok=A2ew5mSN 1x"></source>
<img title="" alt="" srcset="http://xxxx.com/sites/default/files/styles/banner/public/index_0.jpg?itok=Uyu9ShDc 1600w" src="http://xxxx.com/sites/default/files/styles/banner/public/index_0.jpg?itok=Uyu9ShDc">
</picture>

Comment #2

sgdev commented 16 January 2015 at 07:57

Thanks for sharing the formatting for this. I had been working through deciphering the proper options for the theme_picture function, and this helped greatly.

A couple of comments to further help people who visit this post. I'm not sure if there was a change in versions newer than Picture 7.x-2.7, but the picture_mapping_load format mentioned in post #1 does not work in 7.x-2.9. It should be without the underscore, otherwise the function returns an error:

$breakpoints = picture_get_mapping_breakpoints(picture_mapping_load('banner'));

Also while it is possible to render the function using theme_picture, I believe the recommended Drupal format is to use the theme function. Therefore in the example presented in #1, it would be formatted as follows:

theme('picture',
   array(
      'style_name' => 'banner',
      'uri' => $vars['node']->field_banner_image['und'][0]['uri'],
      'breakpoints' => $breakpoints,
   ));

Hope this helps others!