Art Directed Normalized Responsive Images

The Art Directed Normalized Responsive Images recipe provides several sets of aspect ratio based responsive image styles and corresponding manual image crop types to display Normalized Image Styles.

Recipe Purpose

This recipe is designed to do the following:

• Install up to 20 sets of aspect ratio based image styles with normalized dimensions
• Install manually cropped art directed responsive image styles, one for each aspect ratio
• Install manual image crop types, one for each art directed responsive image style

Installing

• Start with a Drupal ^10.3 site.
• Install the 'Default' profile.
• Apply the recipe

The recipe can be applied via Drush ^13

To apply all 20 sets and a demo:

ddev drush recipe ../recipes/art_directed_normalized_image_styles/art_directed_normalized_image_styles

- or -

drush recipe ../recipes/art_directed_normalized_image_styles/art_directed_normalized_image_styles

To apply any individual set, such as "ART Landscape Anamorphic":

ddev drush recipe ../recipes/art_directed_normalized_image_styles/anri_landscape_anamorphic

- or -

drush recipe ../recipes/art_directed_normalized_image_styles/anri_landscape_anamorphic

Or by using ddev exec

ddev exec -d /var/www/html/web php core/scripts/drupal recipe ../recipes/art_directed_normalized_image_styles/art_directed_normalized_image_styles

If all goes well, you should see the following output:

 [OK] Art Directed Normalized Responsive Images applied successfully

Clear the cache after the recipe is applied. When going back to the site, all the recipe configuration and customization has been applied.

Usage

There are numerous ways to use Art Directed Normalized Responsive Images. See the included demo for sample use cases. Follow these basic steps for your custom use cases:

1. Set up a custom Responsive image style using a Breakpoint group
2. For any Breakpoint you select from the group, choose "Select multiple image styles and use the sizes attribute"
3. Select all the Image styles for a given aspect ratio, i.e., "ART Landscape 32:9"
4. Set the Sizes value initially to "100vw" (you can tweak this later)
5. Repeat for other Breakpoints using Images style aspect ratios that change to match your requirements (like "ART Landscape 16:9" and then "ART Portrait 4:5"), Save
6. On the form display for your image-based Media type, choose the ImageWidget crop widget and add the corresponding Crop Type(s) from your Breakpoints setup above ("ART Landscape 32:9", "Landscape 16:9" and "ART Portrait 4:5" in this example), Save
7. Now on the Edit form for that Media type, you will see your chosen image crops. Congratulations, you can now do Art Direction!