ampproject / ampproject/amphtml
Bug: amp-img forced to fixed with XHR source and amp-render
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### 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 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.
### Reproduction Steps
The full template is as follows:
```
{{{blurb}}}
{{#questions}}
{{{question}}}
{{{extra}}}
{{{image}}}
{{#options}}
{{{option}}}
{{/options}}
{{/questions}}
```
A typical question object from that JSON response is as follows:
```
{
"question": "11. Which of these is NOT the title of an episode of The Burkiss Way?",
"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": "
}
```
However, the resulting `amp-img` element is rendered thus, fixed not intrinsic as specified:
```
```
The `amp-render` being used is version 1.0, whilst `amp-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
Contributor guide
Research direction
Start by reproducing the supplied amp-render and amp-mustache example with the embedded amp-img, then trace how the rendered element's layout attribute is handled. The issue is resolved when layout="intrinsic" remains intrinsic after XHR rendering and the image stays responsive on mobile.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100