Use Drupal Responsive image styles with Acquia DAM (Widen): Image media to deliver optimized images for different devices and screen densities. Responsive image styles map Drupal breakpoints to image styles and render an <img> tag with responsive attributes such as srcset and often sizes to allow browsers to load the best image for the current viewport.

This integration is supported for image assets only. Other DAM asset types such as video, documents, and archives do not use image styles or responsive images.

Prerequisites

Before you begin, confirm that:

• Acquia DAM (Widen) is configured with the Media Library, and users can browse DAM assets in the Media Library.
• Breakpoint, Responsive Image module is enabled and works.
• You have the required breakpoints available, typically provided by your theme through breakpoint groups.
• You have the required Drupal image styles, and they are allowed for Acquia DAM (Widen).

For general Drupal background on responsive design and breakpoints, you can reference Drupal.org official website.

Configure image styles for responsive images

Responsive image styles select image styles per breakpoint, you must define the image styles first.

1. Go to Configuration → Media → Image styles.
2. Create or review the image styles needed for responsive output such as hero_480w, hero_768w, hero_1024w, or hero_1440w.
3. Allow the image styles for Acquia DAM (Widen), visit Configure image styles for more details.

Create a responsive image style

1. Go to Configuration → Media → Responsive image styles.
2. Click + Add responsive image style.
3. Enter Label, Breakpoint group, and Fallback image style.

4. Under Responsive image style mappings, map each breakpoint to the appropriate Drupal image style.

   
5. Click Save.

The Drupal site now has a responsive image style that can be selected in field formatter settings.

Apply the responsive image formatter to Acquia DAM (Widen) media

To apply the formatter on the Acquia DAM (Widen) image media type and/or specific media view modes used by content fields:

1. Go to Structure → Media types.
2. Edit the Acquia DAM (Widen): image media type.
3. Go to Manage display.
4. Locate the field that displays the image, such as On-site stored asset image or Asset reference.
   • If the site uses Embed
     • Configure the Asset reference field to use the Acquia DAM (Widen) responsive image formatter.

     • Open the formatter settings and choose your Responsive image style.

       
   • If the site uses Download and sync
     • Configure the on-site stored asset image/file field to use the Responsive image formatter.
     • Open the formatter settings and choose your Responsive image style.
5. Select Save.

Repeat for additional media view modes such as Teaser, Card, and Hero if your site uses multiple view modes.

Use responsive DAM images in content

Once the media type display uses the responsive image formatter:

1. Add a Media reference field to a content type or reuse an existing one.
2. On the content type Manage display, set the media reference field to render the media entity using the view mode that you configured, such as Hero.
3. Create or edit content and select an Acquia DAM (Widen) image through the Media Library.

Verify output

To confirm correct responsive render:

• Inspect the frontend HTML and confirm Drupal renders an <img> element with srcset and typically sizesfor the image field.
• Resize the browser or use device emulation and confirm the selected image resource changes by breakpoint.
• Confirm the content type display renders the media using the view mode you configured for responsive output.
• If changes do not appear, clear the caches, then re-check the media display formatter settings.

Integrate Acquia DAM with Responsive images