Creating responsive images in Drupal has never been easier. Simply install and enable the breakpoint and pictures modules and away you go. If cropped images need art direction add the image field focus module. You can follow these instructions to get set up in no time.

What about background image CSS?

The picture uses html5's, not yet startard, <picture> tag. So a responsive image in your html might look something like this:

<picture>
    <source srcset="/sites/default/files/style/thumb_picture-tv/example.jpg" media="(min-width: 1800px)">
    <source srcset="/sites/default/files/style/example.jpg" media="(min-width: 1100px)">
    <source srcset="/sites/default/files/style/thumb_picture-phablet/example.jpg" media="(min-width: 768px)">
    <source srcset="/sites/default/files/style/thumb_picture-tablet/example.jpg" media="(min-width: 480px)">
    <source srcset="/sites/default/files/style/thumb_picture-mobile/example.jpg" media="(min-width: 300px)">
    <source srcset="/sites/default/files/style/thumb_picture-base/example.jpg" media="(min-width: 0px)">
    <img srcset="/sites/default/files/style/thumb_picture-base/example.jpg">
</picture>

With a little bit of custom code you can use the same module to generate background CSS. Add the following function to a custom module and your reponsive background image generater is ready to go.

/**
 * Generate a responsive background image from a file object, picture set name and a selector.
 *
 * @param $file
 * @param $picture_set_name
 * @param $selector
 */
function my_module_bg_image_from_file($file, $picture_set_name, $selector) {
 $css = '';
 $breakpoints = breakpoints_breakpoint_load_all();
 $picture_mapping = picture_mapping_load($picture_set_name);
 if (!empty($picture_mapping)) {
   $pictureset_breakpoints = picture_get_mapping_breakpoints($picture_mapping);
   // Reverse the order for min-width media queries. 
   $reversed = array_reverse($pictureset_breakpoints);
   // Foreach breakpoint create a media query.
   foreach ($reversed as $key => $pictureset_breakpoint) {
     $media_query = $breakpoints[$key]->breakpoint;
     $style_name = $pictureset_breakpoint['1x']['image_style'];
     $img_url = image_style_url($style_name, $file->uri);
     $css .= '@media ' . $media_query . ' {';
     $css .= $selector . ' {';
     $css .= 'background-image: url(' . $img_url . ');';
     $css .= '}';
     $css .= '}';
   }
  } 
  // Add css to the header.
  drupal_add_css($css, array('type' => 'inline'));
}

To generate the CSS you need three parameters: The image file object, the picture set name and the CSS selector. Wherever you're need to the CSS (usually in a preprocessor function) simple call the function and CSS will be added to the <head> of the page.

my_module_bg_image_from_file($file, 'thumb', '#block_x_id');

The generated CSS would look something like this:

@media (min-width:120px) {
    #block-x-id {
        background-image: url(http://example.dev/sites/default/files/styles/thumb_base_1x/example.jpg);
    }
}
@media (min-width:480px) {
    #block-x-id {
        background-image:url(http://example.dev/sites/default/files/styles/thumb_mobile_1x/example.jpg);
    }
}
@media (min-width:680px) {
    #block-x-id {
        background-image:url(http://example.dev/sites/default/files/styles/thumb_tablet_1x/example.jpg);
    }
}
@media (min-width:1024px) {
    #block-x-id {
        background-image:url(http://example.dev/sites/default/files/styles/thumb_desktop_1x/example.jpg);
    }
}
@media (min-width:1360px) {
    #block-x-id{
        background-image:url(http://example.dev/sites/default/files/styles/thumb_xl_desktop_1x/example.jpg);
    }
}

That's it. Any questions please leave a comment below.

Tags:

Drupal 7 Responsive design

Comments:

Get in touch

Contact form

Please enter your name
Please enter a valid email address

I'll be in touch shortly.

Contact details

Contact Info

Feel free to get in touch about your next project

Office address

If you have any questions or queries, please send me an email or give me a call!

Email

hi@danbyrne.me