Image and image gallery media items

[nrsa222]

Issue

Currently the image gallery shows up to 5 images with a "more" button that users need to click to load 4 more images, and then an "all" button appears and a user must click the all button to view the rest of the images.

If a user is in the [lity] image viewer modal, they are able to browse through all the items. Each item that the user views, in the modal gets added to the list of thumbnails in the accordion component but there is no way for a user to know how many items there are in a gallery.

The user should know from a glance how many images are in a collection in a component, and can have a preview of the items in the collection. They should also be able to navigate the whole collection without clicking twice.

There needs to be a balance between loading all images on page load vs hiding information from the user. Currently a placeholder "loading" image is displayed before full image load. Image thumbnails can be handled with a lazy load and full sized images in the viewer can be handled with an async. All images do not have to load on initial page load to optimize load times and user experience

The viewer controls don't have a visible focus.

Example of "more" and "all" buttons:

Success Criteria

• thumbnail images have lazy loading attribute
• users are able to tell how many images are in a gallery without any interaction
• user can browse full image gallery without any interaction
• page load times are not increased
• image viewer controls have visible focus