Templating

The AMP-Extension uses simple Fluid-Templates for rendering the AMP-Page. Normally you will only override the Partial-Rootpath when you create your own templates. Therefore you need to set the Partial-Rootpath TypoScript-Constant to your Partial-Folder:

In the Partial folder you will find a Header.html and a Footer.html. These two files are used for all AMP views. For example, if you insert your graphical header design into the Header.html file, the AMP-Extension will use it for all AMP views on your website (News, OpenImmo, ...). There are Partial files for every extension. The name of each Partial file is the extension-key of the related extension (upper-camel-case). These files contain formatting for the records of the extension and are displayed between the header.html and the Footer.html.

Header

The header usually contains the website logo with a link to the base site. The default header looks like this:

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
     xmlns:amp="http://typo3.org/ns/CodingMs/Amp/ViewHelpers">
    <f:section name="Default">

        <!-- Header:start -->
        <f:if condition="{settings.header.logo.main.file}">
            <a href="{settings.baseurl}" class="logo">
                <amp-img src="{f:uri.image(
                            src: settings.header.logo.main.file,
                            width: settings.header.logo.main.width,
                            height: settings.header.logo.main.height
                            )}"
                         width="{settings.header.logo.main.width}"
                         height="{settings.header.logo.main.height}"
                         class="logo"
                         layout="responsive"
                         alt="{settings.header.logo.main.title}"
                         title="{settings.header.logo.main.title}"></amp-img>
            </a>
        </f:if>
        <hr />
        <!-- Header:end -->

    </f:section>
</div>

This header can be configured by the following TypoScript-Constants:

themes.configuration {
    extension {
        amp {
            header {
                logo {
                    file =
                    width = 230
                    height = 71
                    title = TYPO3-AMP - Accelerated mobile pages for TYPO3
                    alt = TYPO3-AMP - Accelerated mobile pages for TYPO3
                }
            }
        }
    }
}

Footer

The footer usually contains a copyright notice and a link to the Web-Version of this view. This could look like this:

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
     xmlns:amp="http://typo3.org/ns/CodingMs/Amp/ViewHelpers">
    <f:section name="Default">

        <!-- Footer:start -->
        <hr />
        <a href="{f:cObject(typoscriptObjectPath: 'lib.amp.canonicalUrl')}">
            <f:translate key="tx_amp_label.display_web_version"/>
        </a>
        <!-- Footer:end -->

    </f:section>
</div>

Info:

Make sure that you're using a valid AMP source - check it easily here: https://validator.ampproject.org/

If you're using the AMP PRO-Version, you can insert a contact form related to the displayed record. Your visitors can use the form to easily create enquiries without leaving the view. An integration could look like this:

<!-- Footer-Form:start -->
<amp:extension.loaded extensionName="AmpPro">
    <f:if condition="{settings.amp.forms.contact.enabled}">
        <amp:render.template file="EXT:amp_pro/Resources/Private/Templates/Amp/Form.html"
                             variables="{form: settings.amp.forms.contact, settings: settings}"
                             paths="{amp:variable.typoscript(path: 'plugin.tx_amp.view')}" />
    </f:if>
</amp:extension.loaded>
<!-- Footer-Form:end -->

Info:

In order to get a smaller source, try using EXT:sourceopt. You will find this extension in TYPO3-TER: https://typo3.org/extensions/repository/view/sourceopt.