Responsive Image Component

[evanmwillhite]

This PR adds the ability to use responsive images in a component-driven manner without affecting previous projects.

Usage is noted in themes/emulsify/components/_patterns/01-atoms/04-images/00-image/responsive-image.md

To Test:

• Open the images section in Pattern Lab and verify markup looks accurate
• Inside a fresh Drupal site, Create an Article and add an image. Ensure everything looks as usual.
• Enable the Responsive Images module
• Manage the display of the Article and select responsive images and one of the defaults (narrow, wide). These use srcset.
• Save and verify the new markup is correct.
• Add a new responsive image style and select Emulsify for the breakpoint group (will use picture element). In the next step, for whatever breakpoints you want select Select a single image style. and select an image style. Save this form to save the new style.
• Go back to manage the display of the Article and select your new style and save. Verify the markup is accurate.

[ModulesUnraveled]

@evanmwillhite The steps to review work as expected, but none of them included using the new files in an Emulsify-based theme... So, how can I verify that the new PL component will get used?

[ModulesUnraveled]

@evanmwillhite Why did you reverse the order of these? I thought they had to be largest to smallest in order for things to work correctly...

[evanmwillhite]

my experience was the opposite. It didn't work until I did this. Can you confirm in your testing?

[ModulesUnraveled]

Looks like Core updated, and automatically inverts the breakpoints you list here. Thanks for the info!

[ModulesUnraveled]

Looks like Core updated, and automatically inverts the breakpoints you list here. Thanks for the info!

[ModulesUnraveled]

@evanmwillhite