Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Twenty Seventeen featured image display #1677

Merged
merged 1 commit into from Nov 30, 2018

Conversation

@kienstra
Copy link
Contributor

@kienstra kienstra commented Nov 30, 2018

Steps to Reproduce

Thanks to @westonruter for reporting this.

  1. Activate Twenty Seventeen

  2. Create a post with a featured image

  3. Go to the AMP endpoint of the post

  4. Gradually expand the screen width

  5. Expected: The image doesn't stretch horizontally, and it eventually has a left and right margin:
    2017-not-stretching

  6. Actual: It stretches horizontally, and fills the width of the screen:

twenty-seventeen-image-streching

As Weston mentioned, this sometimes stretches to fill the entire screen width.
Part of the issue is that the AMP runtime sets an inline width
style based on the sizes attribute.
ampproject/amphtml#17053
Also, there's a style rule in twentyseventeen/style.css
that changes the <amp-img> to display: block
The typical display for an <amp-img> is inline-block.
So override that rule, and ensure it's centered.
* Removing the 'sizes' attribute is only a workaround, as it looks like it's not possible to override that inline style.
*
* @todo: remove when this is resolved: https://github.com/ampproject/amphtml/issues/17053
*/
unset( $attr['sizes'] );
Copy link
Contributor Author

@kienstra kienstra Nov 30, 2018

This isn't good for performance, as it can't optimize image sizes. But I couldn't find another workaround for this.

@kienstra
Copy link
Contributor Author

@kienstra kienstra commented Nov 30, 2018

Request For Review

Hi @westonruter,
Could you please review this PR, which addresses the issue you pointed out?

With this PR, the AMP display looks the same as the non-AMP display.

Thanks 😄

@kienstra kienstra requested a review from westonruter Nov 30, 2018
@kienstra kienstra added this to Ready for review in v1.0 Nov 30, 2018
@westonruter westonruter added this to the v1.0 milestone Nov 30, 2018
Copy link
Member

@westonruter westonruter left a comment

Thanks for the quick turnaround on this.

@westonruter westonruter merged commit 76b7e00 into 1.0 Nov 30, 2018
2 checks passed
@westonruter westonruter deleted the fix/twenty-seventeen-featured-image branch Nov 30, 2018
@kienstra kienstra moved this from Ready for review to Ready for Merging in v1.0 Nov 30, 2018
@kienstra kienstra moved this from Ready for Merging to In Production in v1.0 Dec 11, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
v1.0
In Production
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants