Image Text Wrapping in Markdown with Gatsby Transform Remark - image

Question

I'm trying to figure out a solution to wrap text around images within a markdown document using Gatsby. I have tried the wrapperStyle option but not entirely sure how to get it to work. I've seen on Gatsby's website using the following code:
wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
But I am very novice to coding and am unsure how to read this (I'm a technical writer by trade). Also, adding this makes my images disappear when I build the repo.
Here is a condensed snippet from my gatsby-config.js file in case someone is unsure of where I'm talking about in gatsby-config.js.
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
},

Answer 1

I think you are looking for showCaptions or markdownCaptions option of gatsby-remark-images plugin. Use it like:
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images',
options: {
showCaptions: true
}
}
]
}
}
Or customize the element of the caption like:
{
resolve: 'gatsby-remark-images',
options: {
showCaptions: ['title', 'alt']
}
}
}
Note: with this configuration, if you set the title, it will be used as the caption. Otherwise, if you set the alt attribute, it will be used instead
You can find the result of the configuration in this GitHub thread:
Related articles:
https://medium.com/#sgpropguide/customising-image-display-in-gatsby-3b027d783dce
https://codeconcisely.com/posts/how-to-add-markdown-image-captions-in-gatsby/