I cannot add CSS classes to non frontmatter images

[donaldboulton]

I have a lot of markdown files,"taken form a Jekyll Blog", that have variables on links and images that Gatsby does not recognize, similar to below
![image](./image.jpg){.some-class}
[Link](https://linktosomething.com){:"rel="noreferrer"}

Most all of them do not have the same classes or link variables, which are scattered through lots of pages, and posts, and are not in front matter.

I was hoping for a simple conversion for my posts to Gatsby

This issue was raised in #3882, but it was never addressed.

Several days of extensive searching and nothing on a answer,

Using Gatsby 2.1 with.

"gatsby-remark-images": "^3.0.5",
"gatsby-remark-relative-images": "^0.2.1",
"gatsby-source-filesystem": "^2.0.23",
"gatsby-transformer-remark": "^2.3.0",

which should address the markdown variables in my pages.

repo

Page Example

[danboyle8637]

When you query on the files... what does the html look like? Is it formatted correctly there?

[DSchau]

Interesting - yeah!

So I haven't used Jekyll a ton, but that curly brace syntax (not sure what it's called) isn't currently supported by our gatsby-transformer-remark plugin.

However - this is totally something that could be implemented with a custom remark plugin.

A remark plugin has an index.js that is invoked with the markdownAST. You can then mutate this AST to do whatever you want, which in this case would be custom Jekyll functionality. You can see some examples in our repo, e.g. this package

I think the idea here is you would traverse for links and images (or whatever content you desire), and then depending on the type of content in the curly brace, would apply attributes to the nodes.

Hopefully this helps! I'll label this as a feature request, but we'd happily help out or assist on this, e.g. with a pairing session.

[donaldboulton]

The output html has the link and the raw variable add at the end {rel="noreferrer"}
On the links I can use
{ resolve: "gatsby-remark-external-links", options: { target: "_blank", rel: "noreferrer" } },
But then all external links would have the same variables, something simulare for images would not work in my post files as there are alot of different classes.
I will play around with gatsby-remark-custom-blocks and see if I could make it work with images.
Thank You!

[DSchau]

@donaldboulton wasn't really my recommendation to try and go with that package, but if you have luck with that--that's great too!

I was just recommending it as the type of plugin you can write with our Remark plugin infrastructure.

[gatsbot]

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!

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

[donaldboulton]

Markdown has many different variables that are different from kramdown to marked to others.
Kramdown is built in Ruby or I would have already made a plugin to have full markdown processing, but with Ruby I get kind of lost and do not want to take the time to convert.
I Gatsby claims you can use markdown then what kind of Markdown needs to specified.
As it stands Gatsby's ability to use Markdown in Front Matter or in the .md page is very limited and it should be expanded to something like kramdown processing of Markdown if Gatsby's claims of markdown usage can be believed.
So how would you add styling or any variables to images or links in Gatsby non frontmatter .md pages??? Got me, and no info on how. = Very limited compared to any other CMS or web platform that uses Markdown

[gatsbot]

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.

Thanks again for being part of the Gatsby community!