project_theme_amp

License: GNU GPL, Version 2

TYPO3 version: >=7.6

Installation / Integration

First install the extension and activate it in the Extension-Manager.

TypoScript integration

  • Include the TypoScript in TypoScript/Setup.ts in your theme.

About

With this extension you can designate your pages to be AMP ready. These pages are then rendered correctly to be AMP valid.

Configuration

To make all of your FAQ pages AMP ready, follow these steps:

Alt text

(1) Go to the Page Module in your TYPO3 Backend

(2) Select your FAQ homepage

(3) Click the Edit Button

Now you are in your Page Settings. Here you find options to enable/disable your AMP rendering:

Alt text

(1) Select the tab General

(2) This option will enable AMP rendering only for this page.

(3) If this is selected, the current page will not be AMP ready. Since we only want the subpages of the faq homepage to be AMP ready, we select this option.

(4) Finally, you can enable AMP rendering for all subpages of the current page. This normally includes the ccurrent page as well, except when (2) is selected. We want this option to be active, so that all faq pages are AMP ready.

Pages that have been designated to be amp ready are marked in the backend page tree with a green lightning icon:

Alt text

Testing your pages

Calling the amp version of your page

To call the AMP version of your page, simply append amp.html to your url. If the page is not marked as an AMP page in its settings, you will be instantly redirected to the normal page again.

Validating your AMP page

There are two essential tools for val idating your html:

The official validator, enables you to paste your source code into an editor and validate it.

In this example your html is valid as indicated by the green PASS message on the bottom:

Alt text

Below you can see a failed validation and how the validator displays an error with your html:

Alt text

Another way to validate your AMP html, is to use the Google Chrome extension.

This tool allows you to validate your html directly with the Chrome Developer Tools:

Alt text

(1) The extension icon on the top right has 3 possible states: green = valid AMP html, red = errors have been found with your markup or blue = you are currently on a page that has a corresponding AMP page.

(2) If you have errors in your markup you will see them in the console, in the same fashion as the official validator displays them.

Developers Guide

Upgrading

4.0.0

The `container` div wrapping the footer content has been removed, so you need to adapt your CSS if you upgrade from 3.X.

New typeNum

This extension defines a new typeNum with the value 6. If you already use this value, you need to change it accordingly in the Typoscript/Setup.ts file (don't forget the [globalVar = GP:type = 6] checks!. Also you will need to change your RealUrl Configuration (see below).

Overwritten Extension Templates

To implement valid AMP html for the faq pages, the following extensions needed to have some changes to their Templates:

  • SgNews
  • SgTwitter
  • FluidStyledContent

You can find the overwritten templates in their respective folders: typo3conf/ext/project_theme_amp/Resources/Private/Extensions/Templates

If you need to add AMP functionality to pages other than faq pages, you might need to overwrite templates of other extensions as well. Here is a quick example how to do it in the Typoscript/Setup.ts file:

[globalVar = GP:type = 6]
...
# overwrite extension templates
plugin.tx_sgnews {
    view {
        templateRootPath = EXT:project_theme_amp/Resources/Private/Extensions/Templates/SgNews
        partialRootPath = EXT:project_theme_amp/Resources/Private/Extensions/Partials/SgNews
    }
}

routeEnhancer Configuration

Insert this into your routeEnhancer configuration to enable amp pages.

routeEnhancers:
  PageTypeSuffix:
    type: PageType
    default: /
    index: ''
    map:
      amp.html: 6