Photo (Widget)


The Alexa photo template (AlexaPhoto) displays an image with a header and caption. You can specify the caption text as primary and secondary text.

AlexaPhoto truncates the two text strings you provide to a single line each, and displays the caption text over the image. To display a longer caption with the option to use a separate box below the image instead, use the Alexa Image Caption template.

Compatibility

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

  • Widget Medium (@hubWidgetMedium)

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

Import the alexa-layouts package

To use AlexaPhoto, import the alexa-layouts package.

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

AlexaPhoto parameters

The following table shows the AlexaPhoto 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

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, AlexaPhoto 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 photo 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

imageAccessibilityLabel

string

A string describing the image. Voice over reads this string when the user selects the image component.

Medium

1.7.0

imageHideScrim

Boolean

false

When true, display a scrim over the image to improve readability of the text. When false, don't display the scrim.

Medium

1.5.0

imageSource

String

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 for the caption, displayed in a single line.

Medium

1.5.0

secondaryText

String

Secondary text for the caption, displayed in a single line below the primaryText.

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 styling the button, see Button appearance.

Medium

1.5.0

AlexaPhoto example

The following example shows AlexaPhoto with the header, primary text, and secondary text.



Was this page helpful?

Last updated: Dec 06, 2023