responsive image in drupal 8

info@agiledrop.com • +442081442189 • www.agiledrop.com

Responsive Images in Drupal

8Tina Panzalovic

Agiledrop

info@agiledrop.com • +442081442189 • www.agiledrop.com

The days of fixed-width websites are long behind us, and with fluid widths came fluid images

In many cases, we don’t want to display the same image size on a mobile and on a desktop, because we truly don't need a 2000px wide image on a 480px device

Or we want to display a completely different image at some breakpoint

info@agiledrop.com • +442081442189 • www.agiledrop.com

For this we have a HTML5 <picture> element which can contain a multiple <source> elements with srcset and media attributesThe browsers choose the right source based on a media queryIn my case, I had to show completely different image sizes on mobile vs. desktop

info@agiledrop.com • +442081442189 • www.agiledrop.com

info@agiledrop.com • +442081442189 • www.agiledrop.com

There are two core modules in Drupal 8 that allow you to do exactly thatThe first one is BreakpointIt manages breakpoints and breakpoint groups for responsive design and because it doesn't have a user interface you have to define these breakpoints in your theme.breakpoints.yml file (For more information about the Breakpoint module see the online documentation)

info@agiledrop.com • +442081442189 • www.agiledrop.com

theme.mobile: label: mobile mediaQuery: '' weight: 0 multipliers: - 1xtheme.desktop: label: desktop mediaQuery: 'all and (min-width: 1024px)' weight: 2 multipliers: - 1x

info@agiledrop.com • +442081442189 • www.agiledrop.com

The second module is Responsive ImageMake sure you enable it before you start as it's not enabled by defaultThis module provides an image formatter and breakpoint mappings to output responsive images using the HTML5 picture tagAfter you define the "normal" image styles for different breakpoints you can create a new Responsive image style and set the appropriate image styles for each breakpoint

info@agiledrop.com • +442081442189 • www.agiledrop.com

info@agiledrop.com • +442081442189 • www.agiledrop.com

It's time for the last stepSelect the Responsive image formatter for your field in "Manage Display" section of your content type and choose the newly created responsive image style

info@agiledrop.com • +442081442189 • www.agiledrop.com

info@agiledrop.com • +442081442189 • www.agiledrop.com

There you have itAn image that has been specifically sized for the screen has been successfully loaded