Skip to content

VMediaOutputBox

About

The VMediaOutputBox.vue is used to display images and videos in the frontend. It is based on the package “Vue It Bigger” from Haiafara. You can find a documentation for it on GitHub.

Example Output of Component in Exercise

When the user clicks on one of the images or video thumbnails the lightbox opens in full window size: Example Output of the Lightbox

Example

To use the component you use the classical HTML based syntax for Vue components like this:

<v-media-output-box :media=""></v-media-output-box>

Info

How the media prop should be structured is described down in the section MediaProp.

Providing media

Media (images and videos) can be provided using the :media property of the component. The property is required and has to be an array, structured as a JSON.

For Images

[{

    thumb: 'URL to the thumbnail',
    src: 'URL to the source',
    caption: 'shown in lightbox mode under the image'

}]

For Videos

[{

    thumb: 'URL to the thumbnail',
    sources: [
                {
                    src:  'URL to the source',
                    type: 'video/mp4',
                },
            ],
    type: 'video',
    caption: 'shown in lightbox mode under the video',
    width: 800,
    height: 600,

}]

Warning

If you work with media coming from the SpatieMediaLibrary, you need to use the getTemporaryUrl() function, to create a link to the image, due to privacy setting in the S3 bucket. You find information and how to call the function on this site: MediaLibrary Documentation