O'Reilly logo

Drupal 8: Enterprise Web Development by Chaz Chumley, Matt Glaman, Richard Jones, Nick Abbott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using the Responsive Image module

The Responsive Image module provides a field formatter for image fields that use the HTML5 picture tag and source sets. Utilizing the Breakpoint module, mappings to breakpoints are made to denote an image style to be used at each breakpoint.

The responsive image field formatter works with using a defined responsive image style. Responsive image styles are configurations that map image formats to specific breakpoints and modifiers. First, you need to define a responsive image style, and then you can apply it to an image field.

In this recipe, we will create a responsive image style set called Article image and apply it to the Article content type's image field.

Getting ready

You will need to enable the Responsive Image ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required