• Fig Leaf Software - News

The Fig Leaf Blog

AMP Pages and Drupal 7

Posted by Etienne Stettler on Nov 3, 2016 9:06:00 AM
Etienne Stettler
Find me on:

Recently one of our clients requested that we provide them with the ability to deploy Accelerated Mobile Pages (AMP) on their Drupal 7 platform. To get more information on this open source project sponsored by Google, please read more here. In short, this technology’s aim is to provide a speedy mobile experience by providing alternate pages for mobile devices. In practice this means that there is one page for mobile and one page for non-mobile.  The rules for AMP pages are very strict, and if the page fails validation the AMP page will not be displayed by Google. These rules include the structure of HTML, limited CSS selectors and no inline or third party JavaScript

When initially researching this task we found that there is a contributed AMP module and theme to address this functionality, but the future of the project seems in doubt with only maintenance fixes being implemented.

Because of this, Fig Leaf designed a custom AMP solution which required the following:

  • Creation of a sub-theme based off the AMP Theme mentioned above
  • Creation of a new content type called “AMP Page”
  • Installation of the contributed ThemeKey and Meta tags quick modules
The AMP Page content type contained the following fields:
  • Title
  • Body
  • Canonical URL (this field is used to create the <link rel="canonical" /> tag required by an AMP page and is added by the Meta tags quick module).

We also altered our existing content types to add the Canonical URL field. The purpose of this field is to have the non-AMP pages use the canonical URL to point to the AMP pages and vice-versa.

Using the ThemeKey module, a custom Theme Switching Rule Chain was created with the following configuration:

Property

Operator

Value

Theme

node:type

=

amp_page

amp_theme


This rule states that when an instance of the AMP page content type is displayed, the AMP theme will be used.

The AMP Theme is a stripped down theme which follows the strict HTML rules required of AMP pages. The only JavaScript used is AMP related. We brought over a very limited subset of our default theme’s CSS. Most of the theming work involved building the mobile and footer menus used by the responsive main theme. While we were not able to exactly duplicate this functionality because of the limited toolset provided by the AMP components and tags, our client was very happy with the result.

This solution provided a quick fix to meet our customer’s demand. There are some negatives to this approach because it requires the maintenance of some duplicate content. Overall though, these sacrifices are relatively minor when compared to how lightweight the solution proved to be. We were able to rapidly prototype, test and move to production in about two weeks.

Topics: Drupal 7, Drupal, Web Developer, Government

"We've Got You Covered"

Sign up to receive updates on new events, new classes, discounted promotions, monthly schedules, and more.

Posts by Topic

see all