Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

How to implement simple AMP support in Drupal 8

Parent Feed: 

Amp and 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.
<\/amp\-youtube>/isU",
 *   }
 * )
 */
class Youtube extends AmpComponentBase {

  /**
   * {@inheritdoc}
   */
  public function getElement() {
    return '';
  }

}

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

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web