Set up an image style for each breakpoint under Configuration > Media > Image Styles. For general use, it's not really necessary. If you have some image style effects you want to apply everywhere (desaturate, perhaps?), this can be a handy time saver. This is an optional step provided by the Breakpoints module it's essentially a wizard which makes copies of a preexisting image style, one for each selected breakpoint.
Note that once a breakpoint has been added to a group, it cannot be edited. The ordering on this screen will match the order defined by weights in the previous step. GroupsĬlick 'Add a new group' to define a Breakpoint Group. Make sure you get this order right once you pull these breakpoints into a group, their order cannot be edited you'd need to delete the breakpoints and their group and start over.
If a breakpoint query fails (if the screen width is below the minimum), the next breakpoint down the line will be checked. The example configuration uses minimums in decreasing order, which is preferable for responsive image design. The order in which the breakpoints appear is the order your breakpoint group will check their media queries. This ensures that arbitrarily small screen sizes will be accommodated. Note that the smallest breakpoint is set to a 0px minimum. Optionally, you can enable Retina display handling for each breakpoint. Each breakpoint needs a name and a media query. (In the above commands, -y just tells drush to assume "yes" for any requests for confirmation.) Setting Up Breakpointsīreakpoints can be found under Configuration > Media > Breakpoints. The Chaos Tool Suite, which gives us lots of handy development tools and APIsĭrush will handle the dependencies for you just navigate to your site root and type:.The Breakpoints module, which will keep its eye on the browser window size.
We'll use Drush, a Drupal cli, to install the modules and their dependencies, and to enable them. This happens in real time, so a user resizing their window should see the image rescale to fit their new window size instantaneously. Once an image is associated with a responsive style, the Picture module will check the page dimensions, look at the breakpoint group, find the first breakpoint that applies to those dimensions (we'll come back to this point.), look at the picture mapping to find the associated image style, and apply that style to the image.