16. Component Request - Media Gallery - Flexible Page Block

[jendiamond]

Component Description

This component is used to create of a gallery using any combination of video, audio and image files. The user can choose whether to hide the gallery behind a single image, or display all of the gallery images. When a user clicks on media in a gallery, they go into a light box view.

If only one image is in the Media Gallery, there is no dropdown behavior.

This component is used in these entries:

General Content Page	Workshop
Event Series	Article
Landing Page	Event
Resource	Exhibit
Endowment	-

Design

Please also see attached screenshots for quick reference.

• Figma: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=568%3A1153
• Airtable: https://dl.airtable.com/.attachmentThumbnails/d466303a96d06e64cfffbf7abdb210df/b4e084b7

Design System:

• Gallery: https://www.figma.com/file/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=677%3A12831
• Modal Lightbox: https://www.figma.com/file/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=508%3A12524

Props

The fields the block object takes. ( the fields in gray are required )
block: { image: { image, altText, captionTitle, captionText, },
video: { videoFile, externalVideo, captionTitle, captionText, coverImage },
audio: { audio, captionTitle, captionText, coverImage }

Audio file" "` }

props: {
    block: {
        type: Object,
        default: () => {}
    },
}

Developer Tips

Create a component called: components/Flexible/MediaGallery.vue

<template lang="html">
    build this here
</template>

<script>
export default {
    props: {
        // TODO Shape props here
    },
}
</script>

<style lang="css" scoped>
.media-gallery {
    // Styles
}
</style>

Add case here: components/FlexibleBlocks.vue

function convertName(typeHandle) {
    let output = `flexible-${typeHandle}`
    switch (typeHandle) {
        case "ctaBlockContentWidth":
            output = "flexible-cta"
            break

        case "mediaGallery":
            output = "flexible-media-gallery"
            break
    }
    return _kebabCase(output)
}

Screenshots