Image caption didn't show

[codewithnathan97]

Hello!

Thank you Sara for this wonderful template!

I just tried to add a caption to an image today, but I can't seem to have it visible on the development site. I tried adding showCaptions to the gatsby-remark-images option:

{
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 590,
        showCaptions: true,
      },
 },

The code for the image looks like this:

![Cat here](./cat.jpg "Cat here" )

But I still can't render the caption:

Can anyone help me find out what's wrong? is this a problem with the gatsby-remark-image itself?

Thanks again!

[codewithnathan97]

I was able to solve this. Will leave the solution here for anyone interested:

The image is rendered through react-markdown, so to add a caption to the image, you will need to add a custom renderer for images. You will find some info here

Basicallty, add an image renderer like this in index.js:

function imgBlock({src, title, alt}) {
  return (
    <figure>
      <img alt={alt} src={src} />
      <figcaption class="img-caption">{alt}</figcaption>
    </figure>
  );
}

Then for the renderers:

const renderers = {
  code: codeBlock,
  heading: headingRenderer,
  root: RootRenderer,
  image: imgBlock,
}

[SaraVieira]

Hey!

Oh, you closed as I was answering, I will add that as an option if the user has an image today :)

I'm sorry you had to look in the deep ends of react markdown like I had several times ahah

[codewithnathan97]

Ah sorry! I was still tweaking the code after I posted the issue haha.

I will add that as an option if the user has an image today :)

That would be great! Thanks a lot for sharing this :)

[SaraVieira]

Done in this commit: https://github.com/SaraVieira/starter-book/commit/fc4784860055e0c55b31b4e428eb204ba6972610

Thank you for the good request :)