This one serves six different image files for six screen widths from a single paragraph, with no picture element written by hand.
Two bundles, two shapes
The sub-module installs Responsive Image Wide and Responsive Image Narrow. Both take a media image, a title, a link and a link title attribute; the difference is entirely in the derivatives they request. Wide is for banners in landscape; Narrow is square, for portraits, logos and thumbnails.
The derivatives it creates
- Wide — 420×280, 600×440, 992×610, 1280×750, 1339×820 and 1800×900.
- Narrow — 300×300, 500×500, 700×700, 900×900, 1100×1100 and 1300×1300.
The breakpoints those map to
Each derivative is tied to a breakpoint from the W3CSS Theme's own breakpoint group: the smallest has no media query, then 414px, 601px, 993px, 1281px and 1440px minimum widths. A phone downloads the small file; a desktop downloads the large one. The largest derivative in each set is also the fallback.
That mapping carries a real requirement worth stating plainly: the responsive image styles declare a configuration dependency on the W3CSS Theme, so the theme has to be present for the breakpoint group to exist. The sub-module also depends on core's Responsive Image module, which is not enabled by default in a standard install.
Setting it up
- Enable core's Responsive Image module.
- Enable the W3CSS Paragraphs Responsive Image sub-module.
- Allow the Wide or Narrow bundle on your paragraph field.
- Add the paragraph and pick a media image; the derivatives are generated on first request.
Everything else, including the rest of the image bundles, is on the W3CSS Paragraphs module page. The project supports Drupal 10, 11 and 12.
Would rather have this configured for you? That is Drupal development — or get in touch.
