-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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
Allow specifying image width via attribute in gatsby-remark-images #19439
Comments
Let me know if you think this would be a useful change and I'll make it into a proper PR :) |
For my taste this is a bit too much magic and not really straightforward for other people to figure out. Take this as an example: Theme A/Starter A uses this plugin, the end user doesn't know that it's in there and wants to use the You can also read previous discussions here: #2609 I'd prefer syntax like that. |
Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here. Thanks for being a part of the Gatsby community! 💪💜 |
Hey again! It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Thanks again for being part of the Gatsby community! 💪💜 |
I believe this implementation is more than valid. Surely it would be nice to have a The I'd be very happy, if that makes it into the main plugin. |
Thank you!! |
This sounds amazing! Definitely need it ! |
Absolutely! |
I would like this. Really hard to work around it, if anyone knows how to make dynamic maxWidth possible, please let me know |
Is there any solution here at present? How to specify the size of the picture in markdown? |
+1 wondering if theres a solution to this? |
@henrikwirth you could also consider adding support for width like Mou or Marked 2 does it |
I'm stuggling with this also. |
Summary
I've forked gatsby-remark-images and added the ability to specify a width for individual images: https://github.com/Bonobolabs/gatsby-remark-image-custom-widths
Basic example
Old:
New:
This passes in 500px to the plugin's
maxWidth
option (so generated responsive images are 0.25x, 0.5x, 1x, 2x, 3x of 500px), and also styles the image wrapper class tomax-width: 500px
so it's displayed at that size.I'm currently using this with
mdx
, but it can be used anywheregatsby-remark-images
is used.gatsby-config
:(I went with a
width
attribute in HTML as a first version since it's an existing spec, will render nicely in Github, and is supported by MDX/etc. This is also easier than agreeing on which syntax to use from all the different flavours of markdown, and ensuring that the markdown renderer will parse this consistently etc).Motivation
At the moment, markdown images are always displayed at the full width of the page. This is a pretty simple change that adds support for images to be displayed at a custom width - e.g. for portrait orientation images, image galleries, or even just displaying two images side by side:
Alternatives
I think another way to achieve this would be with a custom image component (MDX/remark-component/etc), but I think that'd be quite difficult to implement (e.g. given that there's no support for dynamic graphql queries), wouldn't be as well supported by other plugins/sources, and adds a fair bit of complexity (a second way of processing/resizing/caching images).
The text was updated successfully, but these errors were encountered: