Creating the cover page
A page within an Web Story is represented by the
<amp-story-page> component. Within an
amp-story, you can have one or more
<amp-story-page> components, containing each of the individual screens of a story. The first page you specify in the document order is the first page that displays in the Web Story.
To create a page, add the
<amp-story-page> element as a child of
amp-story. Assign a unique id to the page. For our first page, which is the cover page, let's assign a unique id of
<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"> <amp-story-page id="cover"> </amp-story-page> </amp-story>
Now we have the shell for our cover page. However, our story still isn't valid. Within our page, we need to specify at least one layer.
Layers in a page
Like layers in graphics, you can use layers in AMP story pages to create visual effects. Layers are stacked on top of one another, so, the first layer is the bottom layer and the next layer is on top of that, and so on.
Our cover page is actually comprised of two layers:
- Layer 1: An image that serves as our backdrop
- Layer 2: The title and byline for the story
Creating layer 1
Let's add our first layer to our cover page. The layer contains an image that fills the screen.
Create the layer by adding the
<amp-story-grid-layer> element as a child of
<amp-story-page>. As we want the image to fill the screen, specify the
template="fill" attribute for the
amp-story-grid-layer. Inside the layer, add an
amp-img element for the
cover.jpg file, and make sure it's responsive (i.e.,
layout="responsive") with the image's dimensions of 720 x 1280 px. Here's what our layer looks like:
<amp-story-page id="cover"> <amp-story-grid-layer template="fill"> <amp-img src="assets/cover.jpg" width="720" height="1280" layout="responsive"> </amp-img> </amp-story-grid-layer> </amp-story-page>
Let's see how the page displays. Open the page in your browser: http://localhost:8000/pets.html.
Here's what it should look like:
Creating layer 2
So, we have our backdrop but now we need the second layer, which sits on top of the backdrop and contains our heading and byline. To add our second layer, let's complete the same tasks we performed for layer 1, but instead of using the
fill template, we'll use the
vertical template. However, before we go any further, let's learn about templates and how we can arrange AMP and HTML elements in an
Laying out elements with a template
<amp-story-grid-layer> element lays out its children elements in a grid (based off the CSS grid). To indicate how you want the children arranged, you need to specify one of the following layout templates:
|The fill template fills the screen with the first child element in the layer. Any other children in this layer aren't shown. The fill template works well for backgrounds, including images and videos. |
|The vertical template lays the children elements along the y-axis. The elements are aligned to the top of the screen, and take up the entire screen along the x-axis. The vertical template works well when you want to vertically stack elements one right after the other. |
|The horizontal template lays the children elements along the x-axis. The elements are aligned to the start of the screen, and take up the entire screen along the y-axis. The horizontal template works well when you want to horizontally stack elements one right after the other. |
The thirds template divides the screen into three equally-sized rows, and allows you to slot content into each area.
You can also specify a named
Completing our cover page
Now that you understand layer templates, let's complete our second layer for the cover page.
For layer 2, we want the heading and byline to be at the top, and we want the elements to follow one after the other, so we'll specify the
vertical template. Our second
amp-story-grid-layer follows the first, like so:
<amp-story-grid-layer> <!--our first layer --> </amp-story-grid-layer> <amp-story-grid-layer template="vertical"> <h1>The Joy of Pets</h1> <p>By AMP Tutorials</p> </amp-story-grid-layer>
Refresh your browser and review your work. Our cover page is complete.
Written by @bpaduch