Starting our story
An entire story is represented by the
amp-story component, which serves as a container for all the pages in a story. The
amp-story component is also responsible for creating the UI shell, including handling gestures and navigation.
amp-story component is a custom AMP component, and like all custom components, you must add the associated script for the component to the AMP document.
pets.html file in your text editor, and in the
<head> section, add the following script:
<head> <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script> </head>
<amp-story> element to the
<body> of your document, and specify the mandatory
standalone attribute, like so:
<body> <amp-story standalone> </amp-story> </body>
It's important to note that to have a valid AMP story, the
<body> element must have only one child—the
<amp-story> component; all other elements are contained in the
Providing meta information
For stories to be discovered in the AMP stories ecosystem, certain metadata is required to provide mini details of the story, like:
- The title of the story, represented by the
titleattribute (e.g., "Joy of Pets").
- The name of the publisher, represented by the
publisherattribute (e.g., "AMP tutorials").
- The publisher's logo, represented by the
publisher-logo-srcattribute. This is a URL for a logo image, in square format with a 1x1 aspect ratio.
- A poster image of the story, represented by the
poster-portrait-srcattribute. This is a URL for the poster, and the image must be in portrait format with a 3x4 aspect ratio.
Let's add these attributes to our
<amp-story standalone title="Joy of Pets" publisher="AMP tutorials" publisher-logo-src="assets/AMP-Brand-White-Icon.svg" poster-portrait-src="assets/cover.jpg">
In addition to these required attributes, there are other attributes you can apply. To learn more, see the attributes section of the amp-story reference documentation.
At this point, we have a shell of a story without any content. Let's create that page.