Page History

Versions Compared

changes.mady.by.user GE-DevDoc-Bot

Saved on Oct 07, 2025

compared with

changes.mady.by.user GE-DevDoc-Bot

Saved on Oct 23, 2025

...

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".

[NO DATA AVAILABLE]

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.

Prefer intrinsic sizing when appropriate using widthAuto / heightAuto.
For fixed dimensions, pair resizeImageStrategy: "useStaticSize" with width and/or height.
Preserve aspect ratio with resizeImageStrategy: "fitToContainer"; reserve "fillWholeContent" for deliberate stretch.
Use paddingClass to add touch/click comfort around interactive images (ON_IMAGE_CLICK).
Manage overflow with disableScrollbar: keep it false when content may exceed bounds (e.g., useRealSize).

Enforce role/permission gating with visibilityPolicySetId.
Suppress empty/broken states with displayConditions (e.g., require non-empty imageUrl).
Expose stable hooks for automation via id and dataTestId.

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 imageryalt – Defines alternative text description for the image. This text is read by screen readers and shown if the image fails to load.