Digital-119: Configure images

[cathybaptista]

Jira ticket

DIGITAL-119

Purpose

Acceptance Criteria:

• Allow reference media fields to be edited media_library_edit easily, all media fields need to have an edit link now, not just an x.
• Allow WYSIWYG images to be edited edit_media_modal. When adding media image via WYSIWYG, there should be an edit button on the image.
• Enable the Responsive Image module
• Add the following image styles:
• 16x16: Scale and crop to 16x16 tiny icon, convert to webp
• 250x250: Scale and crop to a 250x250 logo, convert to webp
• w800: Scale down to 800 width max., convert to webp
• w1200: Scale down to 1200 width max., convert to webp
• Add the following responsive image set that does the following: (Use your w800 & w1200 image styles)
  <img src="https://s3.amazonaws.com/digitalgov/woman-touching-the-virtual-future-interface_w1200.jpg" alt="Woman touching a virtual interface." srcset="https://s3.amazonaws.com/digitalgov/woman-touching-the-virtual-future-interface_w800.jpg 800w,https://s3.amazonaws.com/digitalgov/woman-touching-the-virtual-future-interface_w1200.jpg 1200w " sizes="(max-width: 800px) 100vw, (max-width: 1200px) 100vw, 100vw">

Local Setup

1. Pull branch
2. Drush CIM
3. lando rebuild && lando si
4. Go to modules and make sure media library edit module and edit media modal are enabled.

QA/Testing instructions

1. After pulling branch, create a piece of test content, basic page is fine.
2. Insert an image into the large text field. Any image will work.
3. Save page.

Test responsive images:

1. With web inspector on, reduce the size of the window. Ensure breakpoints occur at 1200 and 800 pixels.
2. Edit the page.
3. Ensure for both images (the one in the ckeditor and the one inserted) both have edit buttons when hovered over and the images can be replaced.
4. Ensure all image types are available and configured as set out in the P.R.

Checklist for the Developer

• A link to the JIRA ticket has been included above.
• No merge conflicts exist with the target branch.
• Automated tests have passed on this PR.
• A reviewer has been designated.
• Deployment and testing steps have been documented above, if applicable.

Checklist for the Peer Reviewers

• The file changes are relevant to the task objective.
• Code is readable and includes appropriate commenting.
• Code standards and best practices are followed.
• QA/Test steps were successfully completed, if applicable.
• Applicable logs are free of errors.

[mattsqd]

Looks great, only thing I see is that 'Media Library Edit' is not configured for all fields. For example, I went to basic page and there was no edit button on the Primary Image.
How do you configure? It's every media field we have, so go to http://digitalgov.lndo.site/admin/reports/fields and look for 'Reference type: Media', then go to 'Manage form display' for each content type and each media field, and click the little gear:

[cathybaptista]

@mattsqd this is in 5387c11. :)