React

Some properties extend the base AEM model to provide additional features such as hover zoom and custom CSS classes.

Properties

AssetMetadata

Prop	Type	Description	Optional	From AEM Image/Video Model
`type`	`AssetType`	The asset type: e.g., `Image`, `Video`.	✅	✅
`path`	`string`	The asset path exported from the backend.	✅	✅
`domain`	`string`	The Scene7 domain used to build the final asset URL.	✅	✅
`folder`	`string`	The folder path where the asset has been placed.	✅	✅
`title`	`string`	The asset name.	✅	✅
`fileStatus`	`Scene7FileStatus`	The scne7 status: e.g., `PublishComplete`, `PublishIncomplete`,`PublishFailed` etc .	✅	✅
`status`	`AssetStatus`	Indicates the asset’s state, `Finished`, `InProgress`,`Failed` etc .	✅	✅
`assetState`	`AssetStatus`	Indicates the asset’s state, `Finished`, `InProgress`,`Failed` etc .	✅	✅
`altText`	`string`	Alternative text for accessibility.	✅	✅
`altLanguages`	`string[]`	Localized alt text values for different languages.	✅	✅
`publishTimeStamp`	`number`	Timestamp of the asset’s last publish event.	✅	✅
`scene7FileAvs`	`string`	Scene7 Adaptive Video Set or rendition identifier used to build the encodes video path.	✅	✅
`fileReference`	`string`	The original DAM file reference path.	✅	✅

ImageProperties

Prop	Type	Description	Optional	From AEM Image Model
`altText`	`string`	Alternative text for accessibility.	✅	✅
`smartCropSelection`	`CROP_SELECTION`	Smart crop selection: e.g., `landscape`, `portrait`, or `none`.	✅	✅
`damMetadata`	`AssetMetadata`	The asset metadata exported from BE.	❌	✅
`decorative`	`boolean`	If true, the image is decorative and ignored by assistive tech.	❌	✅
`clickBehaviour`	`CLICK_BEHAVIOUR`	Defines click behavior: `ENLARGE` (overlay), `LINK` (navigate), or `DEFAULT`.	✅	❌
`link`	`AssetLinkModel`	Link model associated with the image.	✅	❌
`className`	`ClassValue`	Additional CSS class(es) for the image.	✅	❌
`enableHoverZoom`	`boolean`	Enables zoom-on-hover functionality.	✅	❌
`usePlaceholder`	`boolean`	Renders a simple placeholder instead of loading the actual image.	✅	❌
`loading`	`LOADING`	Enable or disable the lazy loading. Enabled by default.	✅	❌
`sizeVariant`	`SIZE_VARIANT`	Defines size calculation variant, BREAKPOINT or UI. BREAKPOINT by default.	✅	❌

Example Usage

import { Image } from '@tmedxp/aem-react-components/atoms/image';

const ImageAEMExample = () => (
  <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 { ImageAEMExample };