Gatsby: Allow specifying image width via attribute in gatsby-remark-images

[alexlouden]

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:

![My image](./image.jpg)

New:

<img src="./image.jpg" alt="My image" width="500px"/>

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 to max-width: 500px so it's displayed at that size.

I'm currently using this with mdx, but it can be used anywhere gatsby-remark-images is used.
gatsby-config:

    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        extensions: ['.mdx', '.md'],
        plugins: [
          '@bonobolabs/gatsby-remark-images-custom-widths',
        ],
        gatsbyRemarkPlugins: [
          {
            resolve: '@bonobolabs/gatsby-remark-images-custom-widths',
            options: {
              maxWidth: 740,
              linkImagesToOriginal: false,
              quality: 80,
            }
          },
          ...

(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:

<div class="side-by-side">
<img src="image1.png" alt="Image one" width="300px"/>
<img src="image2.png" alt="Image two" width="300px"/>
</div>

.side-by-side: {
    display: flex;
    justify-content: space-evenly;
}
.side-by-side > span {
   flex: 1;
}

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).

[alexlouden]

Let me know if you think this would be a useful change and I'll make it into a proper PR :)

[LekoArts]

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 <img /> tag instead of ![]() - but the person will then be surprised that it doesn't behave like expected.

You can also read previous discussions here: https://github.com/gatsbyjs/gatsby/issues/2609

I'd prefer syntax like that.

[github-actions[bot]]

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.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

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.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[henrikwirth]

I believe this implementation is more than valid. Surely it would be nice to have a ![alt](src){attributes} syntax too, but as that is not a standard it would mess around with markdown that people write for different systems.

The <img /> approach instead is basic html and will be interpreted just fine in most cases. The magic from width to maxWidth is only hapening because of gatsby-image's wrapper that needs to be sized down. If gatsby-image is not in place, most other markdown parsers will just render the image with the given width.

I'd be very happy, if that makes it into the main plugin.

[zaeyeon]

Thank you!!

[lookdeceline]

This sounds amazing! Definitely need it !