[gatsby-remark-responsive-image] Allow per-image responsivity

[Undistraction]

Currently when adding images to markup, there is no way to choose whether the image should be rendered as a 100% width responsive image or a fixed dimension responsive image (only updating its image for different pixel-densities). Both are possible using gatsby-image, but not when adding images to the markup.

For example: If I have a blog and I want to include both a responsive header at the top of a post and images within the post that are not 100% width, I don't have this option. I either choose to have responsive 100% images or completely non-responsive images. I think there needs to be a way to annotate the image in the markup to tell the plugin which strategy to use for the image.

[KyleAMathews]

I'm open to suggestions/PRs for how to do this.

[Undistraction]

I'm thinking all we really need a way for someone to specify the width of an image - you already handle pulling out the dimensions and aspect ratio for processed images, and if someone has added the plugin we can make the assumption that all images are 100% fully responsive images unless they are annotated with a width. If they are annotated with a width, the image is rendered out at that width (maintaining its aspect ratio), with higher resolution versions for hi-dpi screens.

The basic format of a markdown image is:

![Alt text](/path/to/img.jpg "Optional title")

We can't add anything within the () because that would break rendering, but we could add something within the []. That way someone could author in any markdown editor without noticing any difference. Perhaps something like:

![Alt text {w:400px}](/path/to/img.jpg "Optional title")
There is also a good argument for allowing even responsive images to have widths aswell - For example an image that is 50% width at all sizes, maintains aspect ratio and has text that flows around it. To do something like that we would need to allow the image to be classed as well:

![Alt text {w:400px, c:'image--pull-right'}](/path/to/img.jpg "Optional title")

I guess this is going further than my original issue, but it could be quite powerful, and it degrades gracefully, other than some jibberish in the alt tag

[KyleAMathews]

Interesting! Also perhaps add a query to the file path? E.g. path/to/image.jpg?w=400

[Undistraction]

Yep. That is also a good solution. There is something about keeping it as a part of the markup I quite like, but the nice thing with a query string is it is degrades gracefully. Only problem there would be using percentages for widths: would be pretty nasty to have to escape the percentages in the url - feels like that is crossing a line of complexity / simplicity maybe. It is also confusing as hell:

![Alt text](/path/to/img.jpg?w=25%25 "Optional title")

[KyleAMathews]

Yeah that's a good point — percentage widths would be weird. Though we could perhaps have two query strings, one for pixels and the other for percentages.

[Undistraction]

That's true enough. Maybe worth thinking on this a bit more. How do you feel about allowing classes to be defined as well as widths? Would open up lots of possibilities for layout and styling of images. I could image specifying a short list of classes for different positioning and allowing the author to use them to control layout.

[KyleAMathews]

For classes, etc. we should make a general solution that works with all markdown. I don't like the idea of adding class support just to images.

This is a frequent request so it'd be good to figure out a good solution.

[Undistraction]

FWIW This is how kramdown does dimensions:

Here is an inline ![Alt text](/path/to/img.jpg){:height="36px" width="36px"}

And it annotates elements with classes using {:.example}:

 ![Alt text](/path/to/img.jpg){:height="36px" width="36px" .example}

[KyleAMathews]

Yeah, if there's a remark plugin that does something like that, this would be great.

This would work well for image processing too — if height/width is set then process the image to that, otherwise assume full width.

[KyleAMathews]

A previous discussion about supporting custom classes in markdown #1736

[fk]

Good to see you guys discussing this @Undistraction @KyleAMathews!

Back when I put together using-remark I ran into an issue where bits of Markdown were not rendered as expected. It turned out this happened because I copy pasta'd Markdown examples from around the interwebs which used a slightly different syntax that Remark didn't support (and correctly did so AFAIR).

This brought back awareness of and made me wonder how many different flavors/extensions had been added since the last time I checked 🙈 🙉 😉…
After browsing around and getting a little nostalgic with PHP Markdown Extra, RedCloth, Textile, BlueCloth, Redcarpet, Kramdown and probably 5 more, but also https://github.com/github/markup and https://github.com/gjtorikian/commonmarker …

So I eventually thankfully stumbled upon CommonMark, and was quite happy to discover that the foundation of Gatsby's Markdown solution has a CommonMark mode and that Gatsby (of course! ;-)) uses it:

gatsby/packages/gatsby-transformer-remark/src/extend-node-type.js

Lines 54 to 58 in d220fca

	let remark = new Remark().data(`settings`, {
	commonmark: true,
	footnotes: true,
	pedantic: true,
	})

Just having seen all those Markdown implementations, I had adding attributes to images and classes/ID's like in Textile in mind, too. I wondered basically the same as @KyleAMathews just mentioned:

Yeah, if there's a remark plugin that does something like that, this would be great.

I also wondered if CommonMark might have settled on something in regards to a syntax for setting attributes. So I did a quick search for both, didn't find anything, got distracted … fast forward to today, here's the

TL;DR 😅

• https://github.com/commonmark/CommonMark/wiki/Generic-Directive-Extension-List
• https://talk.commonmark.org/t/generic-directives-plugins-syntax/444
• https://github.com/medfreeman/remark-generic-extensions 🎉 🎉 🎉

PS: remarkjs/remark#306

[fk]

Btw., here's a CodeSandbox demo of remark-generic-extensions.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[janosh]

This issue appears to have been closed without a resolution. Just to make sure I'm not missing something, specifying a width or adding classes to markdown images is currently unsupported in Gatsby (or rather any of its Remark plugins), correct?

[Undistraction]

@janosh probably best you look at mapping custom html elements to your own components, or at MDX.

[janosh]

That seems like a lot of manual setup for a very common use case. I'll probably take the MDX route for now but I'd say this issue is worth reopening in the future.

[TheFirstMe]

Why is this still not solved?

[henrikwirth]

I also would love to have this feature. It is vital for our documentation, that consists of different sized images. Using gatsby-remark-image all the images get stretched to full width.

It would be great, if at least it would work to use simple html-img attributes like so:

<img src="smiley.png" alt="Smiley face" height="50" width="400">

Or:

<img src="smiley.png" alt="Smiley face" width="40%" style="maxWidth: 200px">

I actually already have something working with my custom version of gatsby-remark-image, but it would be great to have an official approach.

[piyushkantm]

Reading the messages above it seems like this was put on hold due to limited resources.

If this feature is still under consideration, I can try to provide a PR for this

[piyushkantm]

Also i like the way Grav has been doing this:

https://learn.getgrav.org/16/content/media#image-actions

[janosh]

Also i like the way Grav has been doing this:

Me too!

[LekoArts]

Please open a new feature request with a detailed outline how the Grav syntax should work in gatsby-remark-images. This is not the right place to continue this discussion as it's not aligned with the original request and is outdated.

[kejiweixun]

Looking forward to the solution to this issue.

[molx]

For anyone having problems with image styling, a workaround is to enclose your img in a div. You can then do most of the styling on this div (sizing and positioning) using either inline CSS or a class that you can reference on a global css. Make sure you also use the standard html <img> tag since the markdown inside the div will not be parsed:

<div class="blogimage" style="float:right;width:300px;padding:10px 0 10px 10px;">
    <img src="sampleimage.png"/>
</div>

[myl7]

Wraping with div works.

For anyone looking for less html and centering:

<div style="width: 560px; height: 1000px; margin-left: auto; margin-right: auto">

![Walkway among trees](images/zigong-2021-02-07/walkway-among-trees.jpg)

</div>

Ensure the blank lines.

[charitha93]

Wanted to check if this has been implemented or resolved in any way ? Could be in another issue. I am having trouble trying to trace it