Asset

Description

The AEM Asset component is responsible for rendering media based on the Asset Model provided as a JSON. It determines whether the asset should be displayed as an image or a video based on the asset type and then delegates the rendering to React components (Image/Video). It ensures that the asset metadata is correctly interpreted to build the proper Scene7 image or video path(source), ensuring the right media source is used every time.

Properties

VideoData properties can be found VideoData.

ImageProperties properties can be found ImageProperties.

Prop	Type	Description	Optional
video	VideoData	The video data object.	✅
image	ImageProperties	The image object.	✅

Asset Examples

Image

import { Asset } from '@tmedxp/aem-react-components';

const AssetImageExample = () => (
  <Asset
    image={{
      altText: 'Sample Toyota vehicle image',
      enableHoverZoom: true,
      smartCropSelection: 'Landscape',
      clickBehaviour: 'default',
      className: 'my-custom-image-class',
      aspectRatio: 'is-9-16',
      decorative: false,
      lazyloadEnabled: false,
      damMetadata: {
        assetState: 'processed',
        type: 'Image',
        path: 'toyotaeuropetest/Hero-Image-2-3',
        domain: 'https://scene7.toyota.eu/',
        folder: 'toyotaeuropetest/qa-foundation/dam-asset-metadata/',
        title: 'Hero-Image-2-3',
        fileStatus: 'PublishComplete',
        status: 'Finished',
        altText: 'Alt',
        altLanguages: [],
        publishTimeStamp: 1_765_969_735_882,
        scene7FileAvs: '',
        fileReference:
          '/content/dam/qa-foundation/dam-asset-metadata/Hero-Image-2.png',
      },
    }}
  />
);

export { AssetImageExample };

Dam Video

import { Asset } from '@tmedxp/aem-react-components';

const DamVideo = () => (
  <Asset
    video={{
      type: 'DAM Video',
      overlayTitle: 'Title',
      externalVideo: {
        youtubeId: null,
        youtubeAutoplay: false,
        vimeoId: null,
        vimeoAutoplay: false,
        cookieVimeo: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: null,
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: null,
        },
        cookieYoutube: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: null,
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: null,
        },
        startTime: 0,
      },
      thumbnail: {
        assetState: 'processed',
        type: 'Image',
        path: 'toyotaeuropetest/Hero-Image-2-3',
        domain: 'https://scene7.toyota.eu/',
        folder: 'toyotaeuropetest/qa-foundation/dam-asset-metadata/',
        title: 'Hero-Image-2-3',
        fileStatus: 'PublishComplete',
        status: 'Finished',
        altText: 'Alt',
        altLanguages: [],
        publishTimeStamp: 1_765_969_735_882,
        scene7FileAvs: '',
        fileReference:
          '/content/dam/qa-foundation/dam-asset-metadata/Hero-Image-2.png',
      },
      damVideo: {
        dynamicEncodes: 'Encodes',
        altText: 'Alt',
        autoplay: true,
        loop: true,
        trackSrc: '/content/dam/subtitles/sample_sv.vtt',
        assetMetadata: {
          assetState: 'processed',
          type: 'Video',
          path: 'toyotaeuropetest/test-1-1',
          domain: 'https://scene7.toyota.eu/',
          folder: 'toyotaeuropetest/video-test/',
          title: 'test-1-1',
          fileStatus: 'PublishComplete',
          status: 'Finished',
          altText: '',
          altLanguages: [],
          publishTimeStamp: 1_765_969_735_882,
          scene7FileAvs: 'toyotaeuropetest/test-1-1-AVS',
          fileReference: '/content/dam/video-test/test-1.mp4',
        },
        decorative: false,
      },
    }}
  />
);

export { DamVideo };

Additional Resources

• Storybook for Image: View in Storybook
• Storybook for Video: View in Storybook

Figma

https://www.figma.com/design/KOETAQJsn4RCCBOaD4el7n/02-Assets?t=nchpv9ZglKkE6v7X-0