PHPackages heimrichhannot/contao-amp-bundle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. heimrichhannot/contao-amp-bundle ActiveContao-bundle[Utility & Helpers](/categories/utility) heimrichhannot/contao-amp-bundle ================================ This bundle offers functionality concerning "Accelerated Mobile Pages" (AMP) for the Contao CMS. 0.4.5(3y ago)03031[1 issues](https://github.com/heimrichhannot/contao-amp-bundle/issues)LGPL-3.0-or-laterPHPPHP ^7.4 || ^8.0 Since Feb 27Pushed 3y ago4 watchersCompare [ Source](https://github.com/heimrichhannot/contao-amp-bundle)[ Packagist](https://packagist.org/packages/heimrichhannot/contao-amp-bundle)[ RSS](/packages/heimrichhannot-contao-amp-bundle/feed)WikiDiscussions master Synced today READMEChangelog (7)Dependencies (10)Versions (19)Used By (0) Contao AMP Bundle ================= [](#contao-amp-bundle) This bundle offers functionality concerning [Accelerated Mobile Pages (AMP)](https://www.ampproject.org) for the Contao CMS. Features -------- [](#features) - offer an alternative AMP version for an ordinary Contao page (GET-Parameter `amp=1` must be set) - offer AMP templates for the supported content elements and modules - custom inline CSS can be added via... - static file - webpack/encore integration via [heimrichhannot/contao-encore-bundle](https://github.com/heimrichhannot/contao-encore-bundle) - manually in fe\_page\_amp.html5 Setup ----- [](#setup) ### Installation [](#installation) 1. Install via composer: `composer require heimrichhannot/contao-amp-bundle` 2. Update your database. 3. Prepare your page template for [Contao Head Bundle](https://github.com/heimrichhannot/contao-head-bundle) (needed for the amphtml link element). ### First steps [](#first-steps) 1. Create an ordinary layout and assign `fe_page_amp.html5` as template. Click `Add AMP support`. 2. Navigation to the root page where you want to add AMP support, set AMP support to active and choose the layout created in step 1. 3. In order to show your website in AMP mode simply append the GET parameter `amp=1` to your URL, i.e. `https://www.example.org/article` → `https://www.example.org/article?amp=1` Usage ----- [](#usage) ### Menu/Navigation [](#menunavigation) This bundle comes with an custom frontend module for navigation. It renders the menu as sidebar and add the option to render sub pages as accordions. We recommend to use it for the navigation on your amp page. Since amp-sidebar must sit directly within the body element, put the navigation module into the header section of your template (we removed container elements for header section in our template). ### Support custom templates [](#support-custom-templates) 1. To create an amp version for any template, create a new template file with the same name and add `_amp` as suffix, e.g. `ce_my_content_element_amp.html5` or `ce_my_content_element_amp.html.twig`. 2. Register the template in your project config ``` # /config/config.yaml huh_amp: templates: ce_my_content_element: ~ ``` 3. If your template/element needs amp components to work, update your configuration accordingly: ``` # /config/config.yaml huh_amp: templates: ce_my_content_element: components: ['accordion','youtube'] ``` If you need more control about template context or components, use the [`PrepareAmpTemplateEvent`](#events). If the element template is amp compatible without modifications or your element will be only used in amp context, you can set `huh_amp.template.[template].amp_template` to true, see [configuration](#configuration) section. ### Encore Bundle [](#encore-bundle) If you use encore bundle, just create an amp encore entry and add it to your amp layout. Only css assets from the layout will be added. Templates --------- [](#templates) This section will give some hints for creating amp valid templates. ### Images [](#images) AMP Bundle ship with an image template, that can be included. If you already use the utils bundle image template, you just need to replace the template name: ``` {# Before #} {{ include('@HeimrichHannotContaoUtils/image.html.twig', images.singleSRC) }} {# After #} {{ include('@HeimrichHannotAmp/image/image_amp.html.twig', images.singleSRC) }} ``` If you don't want the contao image container around, you can also include just the image element `{{ include('@HeimrichHannotAmp/picture/picture_amp.html.twig') }}`. ### Convert html code to amp-html [](#convert-html-code-to-amp-html) > Since bundle version 0.3 If you use the `convert_html` option for a registered template, the resulting html code after parsing the templates will be converted to amp-html code. This may come handy for example ce\_html or mod\_html templates. To use this feature, you must install [lullabot/amp](https://github.com/Lullabot/amp-library) library, otherwise a warning in thrown when set this option to true. This bundle extends the library functionality with additional svg-support for img tags. Keep in mind that an automatic conversation maybe not complete or good as a manual conversation. Developers ---------- [](#developers) ### Events [](#events) ClassDescriptionPrepareAmpTemplateEventPrepare template, add/change amp components, change the template name.### Supported content elements [](#supported-content-elements) Contao content elementContao templateAMP componentNotes`ContentAccordion``ce_accordionSingle.html5`accordionsingle element accordions`ContentAccordionStart``ce_accordionStart.html5`accordion`ContentAccordionStop``ce_accordionStop.html5`accordion`ContentImage``ce_image.html5`image`ContentMedia``ce_player.html5`audio or videoaka "Audio/Video"; if `isVideo` is set in the template, the amp component "video" is used`ContentYouTube``ce_youtube.html5`youtubecore content element or [heimrichhannot/contao-youtube-bundle](https://github.com/heimrichhannot/contao-youtube-bundle)`ContentSlick``ce_slick.html5`carousel[heimrichhannot/contao-slick-bundle](https://github.com/heimrichhannot/contao-slick-bundle)### Supported modules [](#supported-modules) Contao moduleContao templateAMP component`ModuleNavigation``mod_navigation.html5`sidebar + accordion### AMP Validation [](#amp-validation) You can validate your AMP page by appending `#development=1` to your url. Things to consider: - If you do that in dev mode, you'll get validation errors concerning the position of custom CSS tag and that custom JS is not allowed. Both of the errors are due to the symfony debug toolbar and should disappear in production mode. - When developing a website you might do that in localhost or some kind of custom domain. So you can ignore the error "The attribute 'href' in tag 'base' is set to the invalid value \[...\]" becuase in production mode it will disappear. - Take care of your generated CSS: it shouldn't contain any source map files, because these will significantly increase the size of the CSS ### Meta-Tag handling in fe\_page [](#meta-tag-handling-in-fe_page) The meta tags are handled using [heimrichhannot/contao-head-bundle](https://github.com/heimrichhannot/contao-head-bundle) and rendered as follows: ``` ``` *Hint: If you use `fe_page_amp.html5` in your AMP layout, you won't have to take care of this.* ### Override templates [](#override-templates) #### HTML5 templates [](#html5-templates) These can be overridden as usual by putting a file with the same name into your project's `templates` directory or in the `templates` directory of one of your modules. #### Twig templates [](#twig-templates) These can be overridden by putting a file with the same name into your project's `app/Resources/views` directory or in the `src/Resources/views` directory of one of your bundles (these bundles must load after the `contao-amp-bundle`; you can specify this in your bundle's `Plugin.php`). ### Responsive images: Contao vs. AMP [](#responsive-images-contao-vs-amp) Keep in mind: If you didn't specify image sizes in Contao, you can skip this chapter. In Contao responsive images are built with "archives" (`tl_image_size` and `tl_image_size_item`). In tl\_image\_size you can define a default image size and in `tl_image_size_item` instances more sizes depending on a given media query. In AMP on the other hand there's no such thing as a default case, so you need to create it **explicitly**. Also you have to add media-queries for each and every `tl_image_size_item` so that you don't have duplicates. So you have 2 options: 1. Assign an image size with **no** child elements to your image, i.e. only `tl_image_size`. 2. Create `tl_image_size_item` instances so that you have one for every situation that can happen. Example: [![alt text](docs/image-sizes.png)](docs/image-sizes.png) ### SVG images [](#svg-images) If you use svg-images ensure that they have assigned `width` and `height` attributes on the `` element. Otherwise they wont have dimensions in their amp-version and the lazy loading component requires width and height for aspect ratio padding. For non-amp version simply add the following css rules and attach `.img-fluid` css class to make svg responsive again: ``` .img-fluid { max-width: 100%; height: auto; } ``` Documentation ------------- [](#documentation) [Configuration](docs/configuration.md) - The complete configuration and examples Known limitations ----------------- [](#known-limitations) - currently AMP pages without a non-AMP layout are not supported ### Health Score 30 — LowBetter than 64% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity13 Limited adoption so far Community12 Small or concentrated contributor base Maturity64 Established project with proven stability Bus Factor1 Top contributor holds 96.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~89 days Recently: every ~66 days Total 17 Last Release 1199d ago PHP version history (3 changes)0.1.0PHP ^7.1 0.4.0PHP ^7.1 || ^8.0 0.4.2PHP ^7.4 || ^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/28ad3224d8727b622ebd229840eea6b9dbcb83eb0bd609e6ce65b614830ff538?d=identicon)[digitales@heimrich-hannot.de](/maintainers/digitales@heimrich-hannot.de) --- Top Contributors [![koertho](https://avatars.githubusercontent.com/u/12064642?v=4)](https://github.com/koertho "koertho (26 commits)")[![vvohh](https://avatars.githubusercontent.com/u/75325799?v=4)](https://github.com/vvohh "vvohh (1 commits)") ### Embed Badge ![Health badge](/badges/heimrichhannot-contao-amp-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/heimrichhannot-contao-amp-bundle/health.svg)](https://phpackages.com/packages/heimrichhannot-contao-amp-bundle) ``` ### Alternatives [sulu/sulu Core framework that implements the functionality of the Sulu content management system 1.3k1.3M151](/packages/sulu-sulu)[contao/core-bundle Contao Open Source CMS 1231.6M2.3k](/packages/contao-core-bundle)[civicrm/civicrm-core Open source constituent relationship management for non-profits, NGOs and advocacy organizations. 728272.9k17](/packages/civicrm-civicrm-core)[drupal/core-recommended Locked core dependencies; require this project INSTEAD OF drupal/core. 6939.5M340](/packages/drupal-core-recommended)[codefog/contao-haste haste extension for Contao Open Source CMS 42650.8k139](/packages/codefog-contao-haste)[codefog/contao-news_categories News Categories bundle for Contao Open Source CMS 3183.3k6](/packages/codefog-contao-news-categories) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)