Use Cases

Set image layout
Change image src
Change css class name
Remove tag attributes
Remove tag
Change logo size

Set image layout

AMP supports a bunch of image layouts.

Our AMP module automatically sets the layout of every image to responsive, except for the small images.

Sometimes you may want to manually set the layout to use for the images inside product description, or some CMS pages.

Here is an example of how to do that and do not affect desktop theme output:

<img src=".." data-swissupamp-layout="fixed"/>

Where data-swissupamp-layout will be converted in layout attribute, when AMP is active only.

Change image src

Sometimes you may want to use AMP specific image for AMP visitors.

Here is an example of how to do that and do not affect desktop theme:

<img src=".." data-swissupamp-src=".."/>

Where data-swissupamp-src will override src attribute, when AMP is active.

Change css class name

Sometimes you may want to change css class name of existing element.

Here is an example of how to do that and do not affect desktop theme:

<ul class="desktop-class-that-will-be-removed" data-swissupamp-class="list-unstyled">
    <li>...</li>
</ul>

Where list-unstyled - is a AMP supported css class name.

Please do not forget to clear Magento cache.

Remove tag attributes

Available since 1.3.0

Sometimes you may want to remove some attributes from existing element.

Here is an example of how to do that and do not affect desktop theme:

<div attribute="value" another_one="value" data-swissupamp-remove="attribute,another_one">
    ...
</div>

Remove tag

Available since 1.3.0

Sometimes you may want to completely remove some element.

Here is an example of how to do that and do not affect desktop theme:

<div data-swissupamp-remove="!">
    ...
</div>

Change logo size

To change logo size on AMP follow the next steps:

change logo block size in styles setting logo size variables in custom scss file
create layout xml file Swissup_Amp/layout/swissupamp_default.xml in your active theme folder with the following content:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_width" xsi:type="number">322</argument>
                <argument name="logo_height" xsi:type="number">64</argument>
            </arguments>
        </referenceBlock>
    </body>
</layout>