Drupal Amp

 
Drupal amp theme

Google’s AMP is an open source project that stands for Accelerated Mobile Pages. As the name implies, this project aims to serve mobile pages instantly without long load times. You can get a feel for AMP by searching for anything on your mobile on Google and clicking on links with a lightning sign beside them. Speed is an important factor for any website as it has a number of benefits including making a massive impact on a site’s SEO. In this post, let’s take a look at AMP for Drupal 8 and a brief overview of its implementation on the CMS.

Drupal is now responsive out of the box. However, if you are wondering how to further improve Drupal’s performance for mobile devices, Google has got the perfect answer in the form of Accelerated Mobile Pages (AMP) that allows instant delivery of web pages. In this tutorial, I will show you how to implement AMP on your Drupal powered website.

There’s a module for that!

The Drupal AMP theme produces the mark up required by these standards for websites looking to perform well in the mobile world. Also, AMP theme allows creation of custom-made AMP pages. AMP PHP Library: Consisting of the AMP base theme and the ExAMPle sub-theme, the Drupal AMP PHP Library handles the final corrections. Bitnami Drupal Stack Installers Bitnami native installers automate the setup of a Bitnami application stack on Windows, Mac OS and Linux. Each installer includes all of the software necessary to run out of the box (the stack). The process is simple; just download, click next-next-next and you are done!

As always, there’s a module for integrating AMP on both Drupal 7 and Drupal 8. However, we will only be focusing on Drupal 8 in this post. Do keep in mind though that the steps for both versions aren’t that different. Simply download the module named AMP module and install it on your site.

AMP configuration

Drupal Amp Form

Drupal Amp

Navigate to admin/config/content/amp to access the AMP configuration page. Here, the type of contents for which AMP will be enabled can be configured as the fields that will be displayed using AMP. Note that AMP is best suited to web pages that are content heavy, so in the context of Drupal, that would translate over to nodes like blog posts and articles.
To enable AMP for the content type you want, click ‘Enable AMP in Custom Display Settings’ link beside the content type you wish to enable AMP for. Now click ‘Custom Display Settings’, click the AMP checkbox and press save.
To select which fields should be shown and what field formatters should be used, click the ‘Configure AMP view mode’ link. Some recommended fields which you should format to AMP field formatters are:

  • Body
  • Images
  • iFrames
  • Videos

That rounds off the main settings and configuration of AMP for our Drupal site. Now, we need a way to display the AMP pages in a way suited to our needs, which brings us to the AMP themes.

Drupal Amp Price

AmpDrupal

AMP Theme

Amp

You may remember from the first step in this article that while downloading the amp module, we also downloaded an amp theme. This is a sub-theme for AMP named exAMPle theme. Having a dedicated subtheme for AMP pages is important as it changes markup necessary for AMP to run. This is all handled by the AMP base theme, which is again based on the Drupal core’s BASE theme to keep it as simple as possible.
Note that in most cases it is recommended to use a custom theme for your site’s AMP pages in order to match the look of a website. While the exAMPle theme allows for quick and easy testing of your AMP pages, it is a very basic and barebones theme. To get an idea of how to create a custom AMP theme, take a look at the exAMPle theme.

Conclusion

That’s all there is to AMP for Drupal. The modules make implementation of AMP on Drupal a pretty straight-forward process. Again, make sure you know what types of pages AMP is suited for and you’ll be golden.

Having difficulty with implementing a particular piece of functionality to your Drupal site? We can help you with that! Contact us and let’s talk!