The Media app allows you to display image and video assets using a single block.
Configuration
- Add the
store-media
app to your theme's dependencies in themanifest.json
file:
_10 "dependencies ": {_10+ "vtex.store-media": "0.x"_10 }
Now, you are able to use all blocks exported by the store-media
app. Check out the full list below:
Block name | Description |
---|---|
media | This block is capable of displaying a single image or video. |
list-context.media-list | This block allows you to display a list of images and videos in your store with a higher degree of composability. You can use it along with other list-context or slider-layout blocks to create different sliders and layouts. |
media
block
The media
block inherits all props from image
and video
blocks. It's highly recommended you check out the docs for Image and Video blocks before using this block.
You can use props from both blocks, but media
will only consider the props from the block (image
or video
) that matches the current mediaType
, or, in the case of mediaType
being imageOrVideo
, that matches the type of the src
.
Prop name | Type | Description | Default value |
---|---|---|---|
mediaType | enum | Type of the media to be displayed. Possible values are: image (behaves as an image block no matter the src ), video (behaves as an video block no matter the src ), and imageOrVideo . Choosing imageOrVideo will make media automatically identify the type of the src based on its extension and behave accordingly. | imageOrVideo |
Use the admin's Site Editor to manage some props declared in the media
block. Using the Site Editor to provide the image or video src
will force you to choose between image
and video
.
Usage Example:
_10"media#mobile-phone": {_10 "props": {_10 "src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png",_10 "blockClass": "storePrint"_10 }_10}
list-context.media-list
block
The list-context.media-list
block acts just like the list-context.image-list
block and inherits a lot from image
and video
blocks, with a few key differences. It's highly recommended you check out the docs for Image and Video blocks before using this block.
list-context.media-list
accepts both images and videos, so you can mix them inside a single carousel, for example. Images can receive image
blocks' props and videos can receive video
blocks' props. If you pass props that don't match the media type, they will be ignored.
| Prop name | Type | Description | Default value |
| ----------- | ------------------ | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ----- |
| height
| string | number
| This value is used for the max-height
CSS property and is applied to images only. | 420
|
| mediaList
| [MediaListElement] | List of MediaListElement
that represents the media to be added to the list context. | []
|
MediaListElement
object
A MediaListElement
object has a very similar shape to the props accepted by the media
component, that is, you can specify the mediaType
of the asset you want to display and pass the props for image
and video
blocks. Read the docs for the media
block to better understand how that works.
Differently from the media
component, it does not use the src
prop to receive the assets. For images, it uses the image
and mobileImage
props, and, for video, it uses the video
and mobileVideo
props.
Prop name | Type | Description | Default value |
---|---|---|---|
image | string | URL to the image to be displayed. | undefined |
mobileImage | string | URL to the image to be displayed when the user is using a mobile device. If it's undefined, image will be used instead. | undefined |
video | string | URL to the video to be displayed. | undefined |
mobileVideo | string | URL to the video to be displayed when the user is using a mobile device. If it's undefined, video will be used instead. | undefined |
Usage Example:
_27"list-context.media-list#demo": {_27 "children": ["slider-layout#demo-media"],_27 "props": {_27 "height": 720,_27 "mediaList": [_27 {_27 "image": "https://storecomponents.vteximg.com.br/arquivos/banner-principal.png",_27 "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"_27 },_27 {_27 "video": "https://www.youtube.com/embed/JgkrlaF52WQ"_27 },_27 {_27 "image": "https://storecomponents.vteximg.com.br/arquivos/banner.jpg",_27 "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"_27 }_27 ]_27 }_27},_27"slider-layout#demo-media": {_27 "props": {_27 "itemsPerPage": 1,_27 "infinite": true,_27 "showNavigationArrows": "desktopOnly",_27 "blockClass": "carousel"_27 }_27}
Customization
In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.
Just like they do with props, all blocks from this app inherits all of image
and video
blocks' CSS Handles. You can find them in their respective docs.
Keep in mind that, for instance, applying CSS customizations to CSS Handles that came from image
won't have any effect if the mediaType
is set to video
or if the mediaType
is set to imageOrVideo
and the src
was identified as a video.