Hide/show content on AMP pages

Many times, you will want to show some content only on the full HTML version of your page, or contrary to that, have some content specific to the AMP pages. weeblrAMP provides shortcodes you can use in your content to do just that. Here is an example of their usage:

Here is some text that will be displayed on all pages, AMP or not.

[wbamp-show start]
Here is a tweet, only displayed on AMP pages: https://twitter.com/weeblr/status/616276503786049536
[wbamp-show end]

Now this text will also be displayed on both AMP and non-AMP pages

[wbamp-hide start]
Here is a tweet, hidden on AMP pages, only shown on regular HTML pages: https://twitter.com/weeblr/status/616276503786049536
[wbamp-hide end]

[wbamp-show start] and [wbamp-show end]

Wrapping some content between wbamp-show shortcodes in your editor will cause that content to be hidden on HTML pages, and displayed (with the shortcodes themselves removed) on the Accelerated Mobile Pages version of the page.

With the input shown on the above screenshot, the

Here is a tweet, only displayed on AMP pages: https://twitter.com/weeblr/status/616276503786049536

text will be displayed on the Accelerated Mobile Pages version of that page, but not on the regular HTML page.

[wbamp-hide start] and [wbamp-hide end]

Likewise, using wbamp-hide tags will instruct weeblrAMP that some parts of your content should be hidden when the AMP version of your page is shown (but visible on the regular HTML page).

With the input shown on the above screenshot, the

Here is a tweet, hidden on AMP pages, only shown on regular HTML pages: https://twitter.com/weeblr/status/616276503786049536

text will be displayed on the regular version of that page, but not on the Accelerated Mobile Pages version.

A more real-life example

As already mentioned when discussing forms, wbamp-show/hide tags can be very useful for forms. At the time of writing, AMP does not support things like reCaptcha, and you may need, at least for a little while, to crate two versions of your forms, one with reCaptcha and one without, for AMP pages. You can then decide which one to display as follow:

Please provide your contact details in the form below:

[wbamp-show start]
[gravityform id="1" title="true" description="true"]
[wbamp-show end]
[wbamp-hide start]
[gravityform id="2" title="true" description="true"]
[wbamp-hide end]

Forms 1 and 2 can be identical, except that form #1 will not have reCaptcha or ajax submission (which are not OK with AMP), while the form with id = 2 can have all of that.

Please note that in this specific example while ajax submit should be disabled in Gravity Forms options, the actual AMP form submission will indeed happen using ajax, as this is the only way AMP knows.