Figcaption not displaying

[bstuddard]

Describe the bug (edited on 1/5 after correcting spelling) I'm not seeing fig caption render (title or alt), even when showCaptions is set to true in the gatsby-config file, gatsby-remark-images section.

To Reproduce Steps to reproduce the behavior:

1. Add showCaptions with a true flag to gatsby-config file.
2. Add image to markdown post.
3. Run Gatsby develop and notice figcaption html element is not added as expected.

Expected behavior Figcaption html element rendered for an image markdown title or alt property.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome

[alxshelepenok]

@bstuddard Try showCaptions . This is most likely cause of the error https://www.gatsbyjs.org/packages/gatsby-remark-images/?=responsive#options

[bstuddard]

Oh ok, let me try that and verify my spelling. Will keep you posted on the results.

On Sun, Jan 5, 2020, 4:47 AM Alexander Shelepenok notifications@github.com wrote:

@bstuddard https://github.com/bstuddard Try showCaptions . This is most likely cause of the error https://www.gatsbyjs.org/packages/gatsby-remark-images/?=responsive#options

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/alxshelepenok/gatsby-starter-lumen/issues/525?email_source=notifications&email_token=AD7SEO5GVGO3O65IIJ6OWMLQ4G3D5A5CNFSM4KCZRNS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIDTWFY#issuecomment-570899223, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD7SEO6Y4BHNO27RMR7NHYTQ4G3D5ANCNFSM4KCZRNSQ .

[bstuddard]

@alxshelepenok - I got the spelling right, but still seeing some odd results. I'm able to hover over an image and see a caption pop up, but nothing under the image as a fig caption html element as I'd expect.

gatsby-config.js

{
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          'gatsby-remark-relative-images',
          {
            resolve: 'gatsby-remark-katex',
            options: {
              strict: 'ignore'
            }
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 960,
              showCaptions: true,
              withWebp: true,
              ignoreFileExtensions: [],
            }
          },
          {
            resolve: 'gatsby-remark-responsive-iframe',
            options: { wrapperStyle: 'margin-bottom: 1.0725rem' }
          },
          'gatsby-remark-autolink-headers',
          'gatsby-remark-prismjs',
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-smartypants',
          'gatsby-remark-external-links'
        ]
      }
    }

Using the normal markdown tag results in the first image. ![Test Image](/media/cpu.svg "Test Title")

Manually building the HTML ("desired" formatting) yields the second (figure element, with nested img and figcaption elements).

<figure>
  <img src="/media/cpu.svg" alt="Test Image">
  <figcaption>Test Title</figcaption>
</figure>

There is a piece of code in gatsby-remark-images which makes me think this should be rending a figure and nested figcaption.

// Wrap in figure and use title as caption
    if (imageCaption) {
      rawHTML = `
  <figure class="gatsby-resp-image-figure" style="${wrapperStyle}">
    ${rawHTML}
    <figcaption class="gatsby-resp-image-figcaption">${imageCaption}</figcaption>
  </figure>
      `.trim()
    }

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/index.js

I'm wondering if I'm doing something wrong/not expected (and if you get the same issue), or maybe there is a dependency conflict that I haven't been able to figure out yet.

[alxshelepenok]

@bstuddard gatsby-remark-images don't support svg. Therefore, only PNG and JPG will be processed. https://github.com/gatsbyjs/gatsby/issues/7317#issuecomment-412984851

[bstuddard]

Good point, should've used a png for the example, seeing the same behaviour:

[vlfig]

Seeing the same error. Lumen starter.

  npmPackages:
    gatsby: ^2.24.63 => 2.24.63
    gatsby-link: ^2.4.13 => 2.4.13
    gatsby-plugin-catch-links: ^2.3.11 => 2.3.11
    gatsby-plugin-feed: ^2.5.11 => 2.5.11
    gatsby-plugin-flow: ^1.3.11 => 1.3.11
    gatsby-plugin-google-gtag: ^2.1.10 => 2.1.10
    gatsby-plugin-manifest: ^2.4.18 => 2.4.18
    gatsby-plugin-netlify: ^2.3.11 => 2.3.11
    gatsby-plugin-netlify-cms: ^4.3.11 => 4.3.11
    gatsby-plugin-offline: ^3.2.18 => 3.2.18
    gatsby-plugin-optimize-svgs: ^1.0.4 => 1.0.4
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10
    gatsby-plugin-sass: ^2.3.12 => 2.3.12
    gatsby-plugin-sharp: ^2.6.36 => 2.6.36
    gatsby-plugin-sitemap: ^2.4.11 => 2.4.11
    gatsby-remark-autolink-headers: ^2.3.11 => 2.3.11
    gatsby-remark-copy-linked-files: ^2.3.11 => 2.3.11
    gatsby-remark-external-links: 0.0.4 => 0.0.4
    gatsby-remark-figure-caption: ^2.0.0 => 2.0.0
    gatsby-remark-images: ^3.3.30 => 3.3.30
    gatsby-remark-katex: ^3.3.10 => 3.3.10
    gatsby-remark-prismjs: ^3.5.10 => 3.5.10
    gatsby-remark-relative-images: ^0.3.0 => 0.3.0
    gatsby-remark-responsive-iframe: ^2.4.11 => 2.4.11
    gatsby-remark-smartypants: ^2.3.10 => 2.3.10
    gatsby-source-filesystem: ^2.3.19 => 2.3.19
    gatsby-transformer-remark: ^2.8.25 => 2.8.25
    gatsby-transformer-sharp: ^2.5.11 => 2.5.11

    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          'gatsby-remark-relative-images',
          {
            resolve: 'gatsby-remark-katex',
            options: {
              strict: 'ignore'
            }
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 960,
              linkImagesToOriginal: true,
              showCaptions: ['title', 'alt'],
              markdownCaptions: true,
            }
          },
          {
            resolve: 'gatsby-remark-responsive-iframe',
            options: { wrapperStyle: 'margin-bottom: 1.0725rem' }
          },
          'gatsby-remark-autolink-headers',
          'gatsby-remark-prismjs',
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-smartypants',
          'gatsby-remark-external-links'
        ]
      }
    }

![Alt](/media/image.jpg "title") is rendered as <img src="/media/image.jpg" alt="Alt" title="title">

I've tried different combinations of options.

Happy to provide more details.

[vlfig]

I take that back That was a byproduct of other errors. Linting fixed them which then fixed this. Carry on, sorry for the noise.

[ahmedhosny]

I am having this issue come up. As noted above, I see that gatsby-remark-images renders the svg but as standalone img not figure. That is usually fine, but it looses the figure caption in the process.

![foo](./bar.svg) gives: <img src="/2f57e0193d1780ac1fc932245c3fab89/bar.svg" alt="foo">

whereas ![foo](./bar.png) gives the expected:

<figure class="gatsby-resp-image-figure">
...
    <figcaption class="gatsby-resp-image-figcaption">foo</figcaption>
</figure>

This is what I have:

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              showCaptions: true,
              linkImagesToOriginal: false
            },
          },
          `gatsby-remark-copy-linked-files`,
        ],
      },
    },

And I also tried:

showCaptions: ['title', 'alt'],
markdownCaptions: true,