feat(gatsby-remark-images): set wrapperStyle as a function to enable dynamic css

[CanRau]

Description

User can provide a function as wrapperStyle which receives the fluidResult containing image information like the aspectRatio which allows dynamic and customizable image styling

Old Description

Providing the new option addAspectRatio to the package settings, this PR will add the already available aspect ratio of the image to the wrapperStyle as flex property. Which allows images of different aspect ratios to adjust their sizes to match heights of siblings in a display: flex; container

like this

instead of this

live example: https://www.gaiama.org/15 (you'll have to scroll a little bit for images with differing aspect ratios)

I'm of course open to feedback and changes or other approaches 👍
IMHO it's a small change no one would ever notice not using it, but would help me a lot and maybe even open others the possibility of (in my opinion) beautiful inline image galleries 😀
I thought about a plugin running after gatsby-remark-images as well, yet that would mean recalculating the aspect ratios which are already present here.

By the way I'm currently running a small custom remark-plugin afterwards to wrap multiple images in the same paragraph in a flex enabled container. Link to old version where I overcomplicated things a little 🤦‍♂️https://github.com/GaiAma/gaiama.org/blob/master/packages/gatsby-remark-wrap-images/index.js so lines 31-41 is not necessary anymore.. new approach will be to just wrap images in a div with a customizable class, I could package that one up of course

Wish y'all a great monday 🙏

[wardpeet]

Thank you for opening a PR! 💖 I'm not sure we want to introduce this functionality as this issue lies on the app level and not gatsby itself.

I would suggest making the wrapperStyle a function which gets the image information so it can be used to export a dynamic css string.

if (typeof options.wrapperStyle === 'function') {
  options.wrapperStyle = options.wrapperStyle(fluidResult);
}

unsure what the rest of @gatsbyjs/core thinks.

[sidharthachatterjee]

Not sure if this belongs in gatsby-remark-images

@CanRau Have you tried styling the images using imageWrapperClass?

[CanRau]

I would suggest making the wrapperStyle a function which gets the image information so it can be used to export a dynamic css string.

I like that 👍

UPDATE not yet sure why but it's only running the function on one image (first probably) then using that value for all others 🤔 so they all end up with the same aspectRatio
I use functions like this in other plugins successfully though

@CanRau Have you tried styling the images using imageWrapperClass

I need the image dimensions so it's not sufficient as far as I know. And as gatsby-remark-images already has all information necessary it would save a lot of processing.

[wardpeet]

@CanRau If I need to take a look why you can't get it executed more than once, just let me know.

[CanRau]

@wardpeet thank you I already figured it out and fixed it, the new commits reflect all my changes
Had to declare a new variable otherwise it would override the pluginOptions overriding the function..

EDIT: let me know if the readme isn't clear enough or should follow another style, or any other feedback/changes 😉

[wardpeet]

This looks solid! Thank you for your patience.

[CanRau]

Yay 🎉 😁 glad you like it, thanks for approving, and thanks to me traveling the last ~2 weeks 😉

[sidharthachatterjee]

Published in [email protected]

[CanRau]

Thanks for posting the release version, very useful!! 👍 🙏