Loading...
Skip navigation
Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.

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:

TypoScript-Constants-Override-Partial-Rootpath

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.

Contact request

You can contact us at any time

Stop! Playing in the meantime?
Stop! Playing in the meantime?
Stop! Playing in the meantime?

Stop! Playing in the meantime?

Break the highscore

Press Start
Contact request
Screenreader label
Security question
PR4_________29K______
A______R____O_A___KDW
NN1___M47___JD4______
__T____8____N_8___UX7
RYW_________KYH______