mustacheamp-htmlamp-list

Return entire images via AMP-List?


We are attempting to return the entire image tag via AMP-List, rather than just the source URL.

Example:

AMP-List Markup: {{{amp_image}}}
JSON Returned: {"amp_image":"<img src='example-img.png' />"}

However, with this example and many variations - no image seems to be returned. Is what we're doing possible, or is there some limitation where images cannot be displayed after the fact?

The main reason we're attempting to return the entire image rather than just the source, is that some of our AMP pages are being 'flagged' (via SEMRush and others) as having 404's. It seems that they see rather than the actual src, since it's returned via JS - which results in the 404.

Thanks in advance for any input here!


Solution

  • What you're looking for is a way to return unescaped HTML from a mustache templates. Per Mustache documentation the way to do this is using "triple-mustache" syntax, i.e. {{{unescaped HTML}}}.

    AMP, however, places some restrictions on this (from Restrictions section of amp-mustache documentation):

    The output of "triple-mustache" is sanitized to only allow the following tags: a, b, br, caption, colgroup, code, del, div, em, i, ins, li, mark, ol, p, q, s, small, span, strong, sub, sup, table, tbody, time, td, th, thead, tfoot, tr, u, ul.

    So the syntax you're using is valid, but amp-img is not among the tags allowed in "triple-mustache" templates.