Page History

Versions Compared

Link to Figma: tba

The Dynamic Image Displayer component shows images on a page.
It supports different sizing and display strategies.
Developers can set custom dimensions or let the component auto-size.
Events allow interactions such as clicks and lifecycle handling.
Visibility and authorization settings control when and for whom the image is shown.

...

visibilityPolicySetId – Determines whether the component is displayed based on a policy set. This allows showing the image only to users with specific permissions. Example: "contentViewerPolicy".

Bind visual content with imageUrl (template expressions allowed) and always provide an appropriate alt.
Choose an explicit sizing mode via resizeImageStrategy:
fitToContainer for aspect-preserving photos/illustrations.
useStaticSize with width/height for predictable thumbnails.
useRealSize for pixel-accurate assets.
fillWholeContent only when distortion is acceptable.
Control when the component renders with displayConditions; restrict access with visibilityPolicySetId.

...

Provide meaningful alt for informative images; use empty alt ("") for decorative content.
Use enableAsHotspot with localized guidedTourHotSpotTitle and guidedTourHotSpotDescription for guided tours.
Keep displayName descriptive for authoring clarity (non-user-facing).

Do	Don’t	Article setting(s)
Use `fitToContainer` to preserve aspect ratio for photos/illustrations.	Stretch photos with `fillWholeContent` unless distortion is intentional.	`resizeImageStrategy: "fitToContainer"` / `"fillWholeContent"`
Provide concise, descriptive alternative text.	Omit `alt` or reuse file names like `IMG_1234`.	`alt`
Keep scrollbars enabled when content may overflow.	Hide scrollbars and clip content users need to see.	`disableScrollbar`, `resizeImageStrategy`
Use `useStaticSize` with `width`/`height` for consistent thumbnails.	Set `width`/`height` without the static-size strategy and expect fixed results.	`resizeImageStrategy: "useStaticSize"`, `width`, `height`
Render only when a valid URL is present.	Show empty/broken placeholders.	`displayConditions`, `imageUrl`
Make imagery actionable via the click event.	Depend on other surfaces to handle image interactions.	`events.ON_IMAGE_CLICK`
Let content define dimensions when appropriate.	Force sizes outside the component’s tokens.	`widthAuto`, `heightAuto`, `paddingClass`
Localize guided tour copy for hotspots.	Ship English-only guidance.	`enableAsHotspot`, `guidedTourHotSpotTitle`, `guidedTourHotSpotDescription`

Text alternatives: define alt text ascordingly.
For interactive images, align alt phrasing with the ON_IMAGE_CLICK outcome (e.g., “Opens larger view”).
Overflow access: set disableScrollbar: false when content may exceed bounds (e.g., with useRealSize).
Aspect integrity: prefer resizeImageStrategy: "fitToContainer" when distortion would harm comprehension.
Localization for guidance: when enableAsHotspot is true, supply translated guidedTourHotSpotTitle / guidedTourHotSpotDescription.
Prevent empty graphics from being announced by gating display with displayConditions when imageUrl is missing.
Improve hit comfort on touch by adding paddingClass around clickable imagery.