Using modules on AMP pages

What's special about modules?

In the process of automatically creating AMP versions of your pages, wbAMP does not include any of the modules that you may have used in the regular pages of your site. The reason is that most of them are not compatible with the AMP specification (login/register form, newsletter sign-up, image slideshows,...).

But sometimes you put regular content in modules, and it's not uncommon to see pages that are fully constructed from modules. It's however quite easy to include selected modules in your AMP pages, and there are 2 methods:

Assign modules to AMP special positions

wbAMP adds 2 specific module positions to your site: wbamp-top and wbamp-bottom.

By assigning modules to one of those positions, they will be displayed on AMP pages, just before and just after the main content, respectively.

Those positions are not rendered on normal pages, only on AMP pages.

These are normal positions, and the Joomla module management operates almost normally. This means you can assign modules only on some AMP pages (with menu item assignment). You can also:

• display the module title or hide it
• select an HTML tag to wrap the title
• assign a CSS class to the title

All those options are to be set using Joomla normal modules options.

Be sure to only include modules that will render properly on AMP pages. Publishing a module with a lot of javascript won't be very useful, as wbAMP will strip all that to be AMP compatible.

Using Joomla loadmodule/loadposition

Including one or more modules on an AMP page can be done with one of Joomla standard features: loadposition or loadmodule.

Assuming we have a Custom module, with some text and images about a product maybe, and this module is titled Our product:

1. Open the Joomla article corresponding to the desired page of the site
2. Set the cursor at the location you want the module content to appear
3. Insert the following code:

{wbamp-show start}
{loadmodule custom,Our product}
{wbamp-show end}

With this snippet of code included in the article, the module will be displayed on the AMP version of the page.

Note that we have wrapped the loadmodule code between {wbamp-show} tags, so that the module is only displayed on AMP pages.

If you want the module to be displayed on both the regular HTML page and the AMP version, remove the {wbamp-show} tags, only keeping the {loadmodule} one.