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(gatsby-remark-images): allow default max-width to be overwritten with wrapperStyle #23854

Merged
merged 3 commits into from
May 7, 2020
Merged

Conversation

birjj
Copy link
Contributor

@birjj birjj commented May 6, 2020

Description

Currently gatsby-remark-images enforces a max-width on each image equal to the presentationWidth returned by gatsby-plugin-sharp. Any user-specified max-width in the wrapperStyle is simply ignored.
Use case for custom max-width is described in #15578.

This PR adds support for specifying a max-width in the wrapperStyle which will be used instead of the presentationWidth.

Previously submitted half a year ago in #15952, but abandoned by me. This PR uses the cleaner solution suggested by @pieh.

Related Issues

Fixes #15578.

This is useful when you e.g. want to use non-pixel units for max-width
Fix #15578
@birjj birjj requested a review from a team as a code owner May 6, 2020 22:43
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label May 6, 2020
@pieh pieh added status: needs core review Currently awaiting review from Core team member topic: media Related to gatsby-plugin-image, or general image/media processing topics and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels May 7, 2020
@pieh pieh assigned pieh and unassigned wardpeet May 7, 2020
@pieh pieh changed the title gatsby-remark-images: allow max-width to overwrite presentationWidth fix(gatsby-remark-images): allow default max-width to be overwritten with wrapperStyle May 7, 2020
Copy link
Contributor

@pieh pieh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, thanks!

@pieh pieh merged commit 02bd7ed into gatsbyjs:master May 7, 2020
@gatsbot
Copy link

gatsbot bot commented May 7, 2020

Holy buckets, @birjolaxew — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

  1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. We’ve got Gatsby t-shirts, stickers, hats, scrunchies, and much more. (You can also unlock even more free swag with 5 contributions — wink wink nudge nudge.) See gatsby.dev/swag for details.
  2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: needs core review Currently awaiting review from Core team member topic: media Related to gatsby-plugin-image, or general image/media processing topics
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[gatsby-remark-images] Can't specify max-width
3 participants