ampproject / ampproject/amphtml

Bug: amp-img forced to fixed with XHR source and amp-render

Open
#37,062 4 comments 0 reactions 0 assignees View on GitHub
Stale Type: Bug WG: components
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:

```

Bonus questions loading...



{{{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": "

The Burkiss Way
"
}
```

However, the resulting `amp-img` element is rendered thus, fixed not intrinsic as specified:

```

The Burkiss Way
The Burkiss Way
```

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.