Image Caption (Widget) (1.6.0)

---

(This is not the most recent version of AlexaImageCaption. Use the Other Versions option to see the documentation for the most recent version of AlexaImageCaption)

The Alexa image caption template AlexaImageCaption displays an image with a header and caption. You can specify the caption text as primary and secondary text. The template can display the caption over the image, or display the caption in a solid color box below the image.

Compatibility

AlexaImageCaption is designed to work with the following widget viewport profiles in the alexa-viewport-profiles package:

• Widget Medium (@hubWidgetMedium)

If you use AlexaImageCaption on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.

Import the alexa-layouts package

To use AlexaImageCaption, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaImageCaption was introduced in version 1.5.0.

AlexaImageCaption parameters

The following table shows the AlexaImageCaption properties that work with the widget viewport profiles. Not all parameters apply to all viewport profiles. The "Widget support" column indicates the widget viewport profiles that support each parameter. For details about viewport profiles, see Viewport Profiles.

All parameters except type, imageSource, and primaryText are optional.

Name	Type	Default	Description	Widget support	Version added
accessibilityLabel	String	—	A string describing the footer action button. Voice over reads this string when the user selects the button. Applies when buttonText contains a value.	Medium	1.5.0
attributionImage	String	—	URL for attribution image source. The image displays below the primaryText. When you provide both attributionImage and secondaryText, the attributionImage displays and the secondaryText doesn't display.	Medium	1.5.0
buttonStyle	String	contained	The style to use for the footer action button. Applies when buttonText contains a value. Set to contained or ingress. For details about which styles to use, see Button appearance. The theme determines the button colors.	Medium	1.5.0
buttonText	String	—	When provided, include a footer action button with the specified text. This text should indicate the purpose of the button. When not set, AlexaImageCaption doesn't include the footer action button.	Medium	1.5.0
entities	Array	—	Array of entity data to bind to this component.	Medium	1.5.0
headerTitle	String	—	Primary text to render in the header.	Medium	1.5.0
headerTitleCanUseTwoLines	Boolean	false	When true, long headerTitle text in a widget can wrap to two lines when needed. Applies to widget viewport profiles only. Ignored when displayed on a standard APL viewport.	Medium	1.5.0
imageScrim	Boolean	true	When true, display the caption text directly over the image with a gradient scrim to increase the text readability. When false, display the text over a solid background after the image.	Medium	1.5.0
imageSource	String	—	Uniform Resource Identifier (URI) for the image to display.	Medium	1.5.0
lang	String	${environment.lang}	The language for the text displayed in the template. This language determines the default font used for the text. For example, when set to ar-SA, the component uses Arabic fonts when available on the device. Set to a BCP-47 string. For more details about language-specific fonts for responsive components, see Language-specific fonts in the components and templates.	Medium	1.5.0
layoutDirection	String	${environment.layoutDirection}	Specifies the layout direction for the content. Set this property to either LTR (left-to-right) or RTL (right-to-left). This property doesn't inherit the layoutDirection from the component's parent container. Therefore, explicitly set this property when needed. For more details about support for right-to-left languages in the responsive components, see Support for Right-to-left Languages.	Medium	1.5.0
primaryAction	Array of commands	—	The action to trigger when the user selects the footer action button. Applies when buttonText contains a value.	Medium	1.5.0
primaryText	String	—	Primary text to display.	Medium	1.5.0
secondaryText	String	—	Secondary text to display below the primaryText. When you provide both secondaryText and attributionImage, the secondaryText doesn't display.	Medium	1.5.0
theme	String	dark	Set the dark or light color theme. The selected theme controls the colors used for the component.	Medium	1.5.0
touchForward	Boolean	false	When true, use the 'touch-forward' text style for the footer action button text. This style displays the button text without italics. When false, use the default text style. For details about how to style the button, see Button appearance.	Medium	1.5.0

AlexaImageCaption example

The following example shows AlexaImageCaption with imageScrim set to true. This example also includes attributionImage. Therefore, the secondaryText doesn't display.

Example document: AlexaImageCaption with imageScrim  

The following example shows AlexaImageCaption with imageScrim set to false. The text displays in a solid colored box below the image. The example doesn't include attributionImage. Therefore, a single line of secondaryText displays.

Example document: AlexaImageCaption with imageScrim set to false  

Related topics

• Photo
• Responsive Templates

---

---

Last updated: Nov 28, 2023