You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am rendering a page with some additional content coming in by XHR (via amp-render) depending on the user's level of permissions.
Parsing this content with an amp-mustache template, everything works fine except amp-img. These are delivered as a whole AMP HTML element and rendered (supposedly) directly through the mustache triple braces, except the layout attribute is being forcibly rewritten from intrinsic to fixed, so the images are not scaling and correctly responsive for mobile devices.
A typical question object from that JSON response is as follows:
{
"question": "11. Which of these is NOT the title of an episode of <em>The Burkiss Way</em>?",
"options": [
{
"optNumber": 1,
"number": 11,
"option": "Wave Goodbye To Knighthoods The Burkiss Way"
},
{
"optNumber": 2,
"number": 11,
"option": "Not The Burkiss Way"
},
{
"optNumber": 3,
"number": 11,
"option": "Make Short Comedy Programmes The Burkiss Way"
},
{
"optNumber": 4,
"number": 11,
"option": "Ignore These Programme Titles The Burkiss Way"
},
{
"optNumber": 5,
"number": 11,
"option": "Write Extremely Long Titles With Lots And Lots Of Words In, Like This, So Radio Times Will Have To Allot More Space..."
}
],
"image": "<amp-img src=\"https://cdn.comedy.co.uk/images/library/comedies/900x450/b/burkiss_way.jpg\" width=\"900\" height=\"450\" alt=\"The Burkiss Way\" title=\"The Burkiss Way\" class=\"quiz-image\" layout=\"intrinsic\"><div fallback>The Burkiss Way</div></amp-img>"
}
However, the resulting amp-img element is rendered thus, fixed not intrinsic as specified:
I have the same issue. amp-img elements delivered by xhr-response will be stripped of its layout attribute and are rendered as "fixed".
but since this is an open issue for quite some time now and no one is assigned, i guess i have to fall back to fixed-sized/centered images in combination with multiple viewports defined in the srcset attribute, but thats no clean solution and adds a lot of unnecessary code to our amp page.
Edit:
when implementing the srcset solution i stumbled upon a possible solution. If the amp-img tag has a sizes attribute with a valid value, the layout attribute won't be omitted anymore. In my case i used sizes="100%".
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.
Description
I am rendering a page with some additional content coming in by XHR (via
amp-render
) depending on the user's level of permissions.Parsing this content with an
amp-mustache
template, everything works fine exceptamp-img
. These are delivered as a whole AMP HTML element and rendered (supposedly) directly through the mustache triple braces, except thelayout
attribute is being forcibly rewritten fromintrinsic
tofixed
, so the images are not scaling and correctly responsive for mobile devices.Reproduction Steps
The full template is as follows:
A typical question object from that JSON response is as follows:
However, the resulting
amp-img
element is rendered thus, fixed not intrinsic as specified:The
amp-render
being used is version 1.0, whilstamp-mustache
is 0.2.Relevant Logs
No response
Browser(s) Affected
No response
OS(s) Affected
No response
Device(s) Affected
No response
AMP Version Affected
2111060251009
The text was updated successfully, but these errors were encountered: