wrapperStyle adds styles to different elements (gatsby-remark-images)

[mayumih387]

Hi!

1. When I insert an image in markdown with markdown style: ![my image](../images/image01.jpg)
   wrapperStyle adds styles to <figure class="gatsby-resp-image-figure"> element.

2. When I insert an image in markdown with <img> tag: <figure><img src="../images/image01.jpg" alt="my image"></figure>
   wrapperStyle adds styles to <span class="gatsby-resp-image-wrapper"> element which is just under <figure> tag.

I prefer 2 above; I'd like wrapperStyle to add styles always to <span class="gatsby-resp-image-wrapper">. Is there any way to do so without using <img> ?

I'd appricate any advice!

gatsby-config.js

{
  resolve: `gatsby-remark-images`,
  options: {
    wrapperStyle: fluidResult => `aspect-ratio: ${fluidResult.aspectRatio}`,
  },
},

• gatsby 5.9.0
• gatsby-remark-images 7.9.0

[gh640]

I tried to reproduce the problem with the same versions but failed. The custom style with wrapperStyle was applied to the wrapper <span> in both cases in my environment. I may have missed something. FYI, I used gatsby-remark-images as a plugin for gatsby-transformer-remark.

Could you share a minimal reproduction?

[mayumih387]

Thank you so much for testing it.

After re-checking the problem, I found that it (no.1 of my previous post) happens when the showCaptions option runs with gatsby-remark-images.

{
  resolve: `gatsby-remark-images`,
  options: {
    wrapperStyle: (fluidResult) => `aspect-ratio: ${fluidResult.aspectRatio}`,
    showCaptions: ["alt"],
  },
},

These are the codes;
https://github.com/mayumih387/gatsby-test/blob/main/src/content/test-post.md

and the following is the production.
https://644baae9ea867e02b625f45e--cheery-mousse-46a941.netlify.app/test-post/

When there is no figcaption, wrapperStyle adds styles to span because there isn't figure.
When there is figcaption, wrapperStyle adds styles to figure instead. (But I want to add styles to span )

Thanks again for keeping an eye out!

[gh640]

@mayumih387

Thank you for your detailed explanation and resources. I could reproduce the issue.

I read gatsby-remark-images and found there's no simple way to manage it. It's impossible to avoid wrapperStyle from being added to <figure> when showCaptions is set.

The related lines:

    rawHTML = `
    <span
      class="${imageWrapperClass}"
      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: ${presentationWidth}px; ${
      imageCaption ? `` : wrapperStyle
    }"
    >
      ${rawHTML}
    </span>
    `.trim()

    // 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()
    }

gatsby/packages/gatsby-remark-images/src/index.js

Lines 400 to 419 in 6feee5d

	rawHTML = `
	<span
	class="${imageWrapperClass}"
	style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: ${presentationWidth}px; ${
	imageCaption ? `` : wrapperStyle
	}"
	>
	${rawHTML}
	</span>
	`.trim()
	// 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()
	}

I see that fluidResult.aspectRatio is useful only if the wrapperStyle is added to the <span>. I think we have some options:

• A) Make a custom for gatsby-transformer-remark. Disable showCaptions in gatsby-remark-images and instead add <figure> and <figcaption> with the custom plugin after gatsby-remark-images plugin processes the Markdown tree.
• B) Patch gatsby-remark-images so that it works as you expect.

But I have no idea to cleanly solve this. I'm sorry :(

[mayumih387]

Thanks for checking the resources. I understood how gatsby-remark-images works!

I'll see if I can hack the plugin in some way... but I'll close the thread as solved for now. If I could, I'd reopen it to share the solution :)

[gh640]

It'd be nice to be able to add separate styles to <figure> and <span>… Anyway, thanks!