Create your first AMP Story

Learn how to build a wordpress website from scratch
How to build a WordPress website from scratch
December 5, 2019
How to become a Google partner
How to become a Google Partner
December 11, 2019
Show all

Create your first AMP Story

Create your first AMP Story

Create your first AMP Story

Learn how to create your first AMP Story in this tutorial by AMP.dev, we’ll introduce you to the amp-story component, which you can use to create visually engaging stories in AMP. By the end of this tutorial, you’ll have created a story about “The Joy of Pets” that provides bite-sized information and visuals to entertain and engage readers.

You will learn to:

  • Create a multi-page story by using the amp-story component
  • Create visual effects with multiple layers in a page
  • Lay out elements in a page by using layer templates
  • Add audio that plays while a page is viewed
  • Animate elements on a page
  • Keep readers engaged with your content by adding related links to the end of the story

Prerequisites

Before starting this tutorial, you’ll need the following:

  • A basic knowledge of HTML, CSS, and JavaScript
  • A basic understanding of AMP’s core concepts (see “Convert your HTML to AMP” tutorial)
  • A browser of your choice
  • A text editor of your choice

Set up your development environment

Step 1. Download the code

  1. Download the code for the tutorial, which is compressed as a zip file from the following URL: https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zip
  2. Extract the contents of the zip file. In the amp-pets-story directory are the images, video, audio, and data files that we’ll use to create our story. The pets.html file is our starting point for the story. The completed version of the story can be found in the pets-completed.html file.

Step 2. Run the sample page

To test our sample story, we need to access the files from a web server. There are several ways to create a temporary local web server for the purposes of testing. Here are some options, choose the one that works best for you:

After setting up your local web server, have a look at what our completed story will look like by the end of this tutorial by accessing the following URL:

http://localhost:8000/pets-completed.html

IMPORTANT – Make sure the URL serves from localhost otherwise the AMP story might not load correctly, and you may encounter errors like "source" "must start with "https://" or "//" or be relative and served from either https or from localhost.

Click through the completed story and get a sense of what we’ll be creating.

Understanding the parts of an AMP story

An AMP story is a full-screen visual storytelling experience that conveys information with images, videos, graphics, audio, and more. It’s perfect for users who want bite-sized, visually-rich content.

The basic ingredients that go into an AMP story are individual pages. These pages, in turn, are composed of individual layers that contain basic HTML and AMP elements.

The basic ingredients that go into an AMP story

Each of those ingredients are translated into AMP components, where the story is represented by amp-story, the page is represented by amp-story-page, and the layers are represented by amp-story-grid-layer.

Code example of amp-story-page, and amp-story-grid-layer.

Let’s start creating our story with the amp-story container.

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.

The 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.

Open the 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>

Add the <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 amp-story.

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 title attribute (e.g., “Joy of Pets”).
  • The name of the publisher, represented by the publisher attribute (e.g., “AMP tutorials”).
  • The publisher’s logo, represented by the publisher-logo-src attribute. This is a URL for a logo image, in square format with a 1×1 aspect ratio.
  • A poster image of the story, represented by the poster-portrait-src attribute. This is a URL for the poster, and the image must be in portrait format with a 3×4 aspect ratio.

Let’s add these attributes to our amp-story tag:

<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.

NOTE – These metadata attributes supplement and do not replace any Structured Data (e.g. JSON-LD) on the page. To ensure your AMP pages are discovered across all platforms, you should add Structured Data to all your AMP pages, including AMP stories.

At this point, we have a shell of a story without any content. Let’s create that page.

Creating the cover page

A page within an AMP 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 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 cover:

<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.

cover page has two layers
Example Cover Page

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:

AMP Story Example Cover Page
AMP Story Example Cover Page

Continue Reading this article here: Creating AMP Stories | AMP.dev

Would like us to create AMP Stories for you? Get in touch here.

Leave a Reply

Your email address will not be published. Required fields are marked *