Container Queries Responsive Image
This module enhances Drupal's responsive image functionality by allowing images to adapt to the size of their containing element, rather than the browser viewport. This is particularly useful for layouts created with tools like Layout Builder, where the structure of the page determines the image's display size. The module introduces a new image style formatter that uses container queries to select the appropriate image sizes.
This module extends the capabilities of the Core's Responsive Image by adding the ability to react to the size of the container (DOM element) in which the image is displayed, rather than the size of the view-port.
This approach is best suited to page construction based on the Layout Builder like in Sobki or Drupal "starshot" CMS, because it is the structuring of the section that determines the size of the containers.
Features
The module provides:
- a breakpoint group "Container Queries Responsive Images", based on Core's "Responsive Image"
- a "Container Queries Responsive Images" formatter for image fields which is designed to use only the responsive image styles using the provided breakpoint.
These elements are to be used in the same way as the classic responsive image style, with the exception that we only focus on the size of the container and no longer on the size of the window (view-port/media).
Installation requirements
See installation instructions.
Configuration
You can now use the "Container Queries Responsive Images" breakpoint in your responsive image styles.
Configure this breakpoint like with the "Responsive Image" breakpoint from Core.
Then on your image fields, use the new "Container queries responsive image" formatter and select one responsive image style using the new breakpoint.
Technical Notes
This module is based on a JavaScript script (in active development too) that attempts to enable "picture" tags to be used not in "media" mode but with a "container" mode.
How picture element work:
<picture>
<source srcset="/path/to/img/size1.png 1x"
media="(min-width: 1000px)"
type="image/png" width="300" height="300">
<source srcset="/path/to/img/size2.png 1x"
media="(min-width: 500px)"
type="image/png" width="100" height="100">
<img loading="lazy" src="/path/to/img/default.png"
width="300" height="300" alt="default_image">
</picture>
In this case, the image is selected according to the view-port (page width) and not the block containing the image.
What we are trying to make:
<picture>
<source srcset="/path/to/img/size1.png 1x"
container="(min-width: 300px)"
type="image/png" width="300" height="300">
<source srcset="/path/to/img/size2.png 1x"
container="(min-width: 100px)"
type="image/png" width="100" height="100">
<img loading="lazy" src="/path/to/img/default.png"
width="300" height="300" alt="default_image">
</picture>
In this approach, it is no longer the size of the view-port that defines the size of the image, but rather the block that restricts it.
The mechanism is reversed: it's the size of the frame that selects the image to be displayed.