Error message

User warning: The following module is missing from the file system: imagcache_actions. For information about how to fix this, see the documentation page. in _drupal_trigger_error_with_delayed_logging() (line 1143 of /www/advantagelabs/releases/drupal-7/advantagelabs-7.59-1/drupal/includes/

Responsive Images and Drupal

Friday, 3:45pm - 4:45pm
Site Building
Experience Level: 

One of the challenges posed by fluid, responsive designs is how to provide quality images that download quickly. We’ll look at the challenges at finding a good solution, and the problems with some of the solutions available.

The primary solution we will look at is the proposed picture element, which allows us to provide several images at various sizes and resolutions, with the appropriate image selected with media queries.

We will also examine how to determine the sizes for the images you use in the picture element and touch on how to make video appear at the correct aspect ratio no matter the size of its container, using padding.

Most importantly, we’ll look at options for how to implement responsive images in Drupal, particularly through the Picture and Breakpoint modules. We’ll also look at ways to use responsive images in conjunction with the Media module and with WYSIWYG editors.

Collaborative notes link:

Learning Objectives & Outcomes: 
  • Understand the challenges posed by responsive images, and the advantages and disadvantages of various approaches.
  • Examine the proposed syntax for the picture element as well as the srcset attribute, and the use cases for each approach
  • Determine how to select image sizes at various breakpoints
  • Look at how to use the Breakpoint and Picture elements to implement responsive images within Drupal, both with image fields and in conjunction with the Media module and with WYSIWYG editors

Platinum Sponsors

Gold Sponsors