Gatsby: Styling images in a blog post with markdown remark.

[orshick]

I am in the process of converting an old site with hand-coded articles. That means there are all sorts of unique styles for images in the blog (floated left and right, containing captions, etc).

Having converted the text portions of the articles to markdown in Gatsby I ran into a wall with styling the images. Was curious if it possible to do this, or if it would it be more fruitful to abandon the markdown idea and simply make each post as a regular page.

Thanks for reading, and hints for what to look into or example repos much appreciated!

[artbycrunk]

Do you have an example?
when you say hand-coded articles, I'm guessing you mean the data and presentation layers are combined?

If you have already converted your article text to markdown, and you want to target each image with different CSS styling, it's not currently supported, I would suggest using MDX instead, where your image tags can be React components that you can style as needed.

That being said, what your real benefit of converting hand-coded articles to markdown, instead of a hand-coded Gatsby pages?

[sidharthachatterjee]

Hey @orshick

Like @artbycrunk mentioned, if all the posts are fundamentally different in styling, you might want to _treat_ the differently styled sections as components and maybe use MDX then

On the other hand, if you can organise the different _hand styled_ pages into a couple of unique templates, then you can continue using Markdown and create pages for each template as shown in https://www.gatsbyjs.org/tutorial/part-seven/

[orshick]

Thanks guys, I will look into using MDX for the posts. It isn't terribly complicated what was 'handcoded', simply some images would be floated left or right, and some would be in the middle, things of that nature. Thing is I wanted these posts to be editable via Netlify CMS as well, so hopefully I will be able to integrate the two.

[gatsbot[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!

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

[gatsbot[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.

Thanks again for being part of the Gatsby community!