How to implement simple AMP support in Drupal 8

Adding AMP (Accelerated Mobile Pages) support could be very tricky and complex depending on your project needs. In this blog post I won't be using AMP module. Instead I created something more simpler and easier to use for AMP integration. The Simple AMP module is still using Lullabot's AMP PHP library. The module is a starter module and most likely won't be very useful out of the box, but it can get you going very fast. You may need to extend it and this shouldn't as hard as in other modules.

Download Simple AMP

Installation

First thing you need to do is install composer require lullabot/amp, the module won't work without it.

How to Use

• Create new Display Mode for your entity that will support AMP. New View modes can be created via /admin/structure/display-modes/view.
• Enable newly created View mode on entity Manage Display page. Example path: /admin/structure/types/manage/article/display
• Open Entity Types page and enable entity type that supports AMP and choose Display Mode for it. /admin/config/services/simple-amp.
• Open Components page and and enable default components. /admin/config/services/simple-amp/components.
• Enable Access AMP pages permission.
• Hit Save configuration and you're all set.

URL alias

If you would like to have URL alias in the path /node-alias/amp instead of /node/[nid]/amp please install Sub-pathauto (Sub-path URL Aliases)

Theming

Easy to extend and alter AMP templates per content type: amp--[ENTITY_TYPE].html.twig or amp--[ENTITY_TYPE]--[BUNDLE].html.twig

Extend Simple AMP module

The module is extendable, there are two components: AmpComponent and AmpMetadata. I built them using Drupal 8 plugin system which will let anyone extend it to match your project needs.

AmpComponent

• All plugins stored in src/Plugin/AmpComponent/*. currently the module doesn't support all available AMP components, but can be easily extended from your own module.

Here is example:

The key variables here are:

• name - plugin name
• description - plugin description.
• regexp - array of regular expressions to match in HTML body.

<?php

namespace Drupal\simple_amp\Plugin\AmpComponent;

use Drupal\simple_amp\AmpComponentBase;

/**
 * Youtube AMP component.
 *
 * @AmpComponent(
 *   id = "amp-youtube",
 *   name = @Translation("YouTube"),
 *   description = @Translation("YouTube Component"),
 *   regexp = {
 *     "/<amp\-youtube.*><\/amp\-youtube>/isU",
 *   }
 * )
 */
class Youtube extends AmpComponentBase {

  /**
   * {@inheritdoc}
   */
  public function getElement() {
    return '<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>';
  }

}

AmpMetadata

• All plugins stored in src/Plugin/AmpMetadata/*. provide Metadata for specific entity.

Here is example:

The key variables here are:

• entity_types - array of entity type names. This will tell the module to generate AMP Metadata for entity types specified in this variable.

<?php

namespace Drupal\simple_amp\Plugin\AmpMetadata;

use Drupal\simple_amp\AmpMetadataBase;
use Drupal\simple_amp\Metadata\Metadata;
use Drupal\simple_amp\Metadata\Author;
use Drupal\simple_amp\Metadata\Publisher;
use Drupal\simple_amp\Metadata\Image;

/**
 * Example AMP metadata component.
 *
 * @AmpMetadata(
 *   id = "default",
 *   entity_types = {
 *     "example_article"
 *   }
 * )
 */
class ExampleEntity extends AmpMetadataBase {

  /**
   * {@inheritdoc}
   */
  public function getMetadata($entity) {
    $metadata = new Metadata();
    $author = (new Author())
      ->setName('Test Author');
    $logo = (new Image())
      ->setUrl('http://url-to-image')
      ->setWidth(400)
      ->setHeight(300);
    $publisher = (new Publisher())
      ->setName('MyWebsite.com')
      ->setLogo($logo);
    $image = (new Image())
      ->setUrl('http://url-to-image')
      ->setWidth(400)
      ->setHeight(300);
    $metadata
      ->setDatePublished($entity->getCreatedTime())
      ->setDateModified($entity->getChangedTime())
      ->setDescription('test')
      ->setAuthor($author)
      ->setPublisher($publisher)
      ->setImage($image);
    return $metadata->build();
  }

}

Support

Feel free to create pull requests, help is always appreciated.

Comments Not Loading?

Due to some temporarily SSL cert issue please refresh the page using this link in order to be able to leave comments.