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 |
---|---|---|---|---|---|
|
String |
— |
A string describing the footer action button. Voice over reads this string when the user selects the button. Applies when |
Medium |
1.5.0 |
|
String |
|
The style to use for the footer action button. Applies when |
Medium |
1.5.0 |
|
String |
— |
When provided, include a footer action button with the specified text. This text should indicate the purpose of the button. When not set, |
Medium |
1.5.0 |
|
Array |
— |
Array of |
Medium |
1.5.0 |
|
String |
— |
Primary text to render in the photo header. |
Medium |
1.5.0 |
|
Boolean |
|
When |
Medium |
1.5.0 |
|
string |
— |
A string describing the image. Voice over reads this string when the user selects the image component. |
Medium |
1.7.0 |
|
Boolean |
|
When |
Medium |
1.5.0 |
|
String |
— |
URI for the image to display. |
Medium |
1.5.0 |
|
String |
|
The language for the text displayed in the template. This language determines the default font used for the text. For example, when set to |
Medium |
1.5.0 |
|
String |
|
Specifies the layout direction for the content. Set this property to either |
Medium |
1.5.0 |
|
Array of commands |
— |
The action to trigger when the user selects the footer action button. Applies when |
Medium |
1.5.0 |
|
String |
— |
Primary text for the caption, displayed in a single line. |
Medium |
1.5.0 |
|
String |
— |
Secondary text for the caption, displayed in a single line below the |
Medium |
1.5.0 |
|
Boolean |
|
When |
Medium |
1.5.0 |
AlexaPhoto example
The following example shows AlexaPhoto
with the header, primary text, and secondary text.
Related topics
Last updated: Dec 06, 2023