tobiaswillmann.de

AMP Stories from galleries. Automated!

2019-11-01

At blick.ch we thought about “How to get into the AMP Stories topic?” with limited resources. In our case, especially editorial resources were blocked to create an AMP Story frequently and not just as a test.

At the same time, we wanted to get our feet wet with AMP Stories and real content.

Our idea was simple:

  • We have great galleries.
  • Our Gallery content could work in some cases as an AMP Story, too
  • It should be possible to automatically create an AMP Story out of an gallery

Here’s our prototype & process

1) Find a great article with a gallery

which you could imagine as an AMP Story, too. E.g. this gallery about the Samsung Galaxy Fold.

https://www.blick.ch/digital/smartphone/galaxy-fold-im-grossen-alltags-test-darum-versagt-das-tolle-falt-handy-im-alltag-id15571398.html

2) Use the our custom AMP Story Slackbot

Input the needed information

  • Gallery ID
  • Catchword
  • Title
  • Related story

3) Download the AMP Story code created by the Slackbot

Check on your local machine. Each image from the gallery is displayed as a page of the AMP Story.

The final slide links to the article on mobile web

4) Maybe do some fine tuning

Sometimes the cropping of automated stories isn’t perfect. Sometimes you want to change some text. So we don’t publish the AMP-HTML without review for now.

  • We validate the story.
  • We do minor edits to the text.

In this case I added the hint that we have a test video to the final slide of the AMP Story:

5) Publish the AMP Story

For now, we upload the code manually to a server to release the AMP Story to the wild.

You can find the Story at hand here:

https://www.blick.ch/digital/smartphone/galaxy-fold-im-grossen-alltags-test-darum-versagt-das-tolle-falt-handy-im-alltag-id15571398.html

How it works technically (simplified)

  • We designed an AMP Story template, which fits our brand.
  • There is a lambda to do the image URL collection from our CMS (which powers blick.ch) and processing of images and image captions into the template.
  • As mentioned, we use a Slackbot for the user interface. A CMS integration would have been possible, but more effort. For now with a prototype and just a few people generating AMP Stories a Slackbot works best for us.
  • The AMP-HTML generated by the lambda is hosted in S3

What’s next?

We’ll do some experimentation with this simple process. Next steps could be a deeper integration into our CMS, a wider variety of AMP templates with the inclusion of video and more text-heavy slides. With this, it gave us the great opportunity to get to dive into AMP Stories without investing too much time. Let’s see what the future holds.

More examples

https://www.blick.ch/digital/smartphone/galaxy-fold-im-grossen-alltags-test-darum-versagt-das-tolle-falt-handy-im-alltag-id15571398.htmlhttps://www.blick.ch/digital/smartphone/galaxy-fold-im-grossen-alltags-test-darum-versagt-das-tolle-falt-handy-im-alltag-id15571398.htmlhttps://www.blick.ch/digital/smartphone/galaxy-fold-im-grossen-alltags-test-darum-versagt-das-tolle-falt-handy-im-alltag-id15571398.htmlhttps://www.blick.ch/digital/smartphone/galaxy-fold-im-grossen-alltags-test-darum-versagt-das-tolle-falt-handy-im-alltag-id15571398.html

© 2020 Tobias Willmann