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

…dynamic css (#12060) ## 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 ![bildschirmfoto 2019-02-25 um 02 27 35](https://user-images.githubusercontent.com/5196971/53321007-4c289c80-38a5-11e9-99ad-8579a21225c7.png) instead of this ![bildschirmfoto 2019-02-25 um 02 28 33](https://user-images.githubusercontent.com/5196971/53321022-56e33180-38a5-11e9-84f7-58a31e3bb859.png) 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 🙏 Co-authored-by: Ward Peeters <[email protected]>
gatsbyjs · Mar 11, 2019 · d83f212 · d83f212
1 parent 2a3dbbb
commit d83f212
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/packages/gatsby-remark-images/README.md b/packages/gatsby-remark-images/README.md
@@ -50,12 +50,24 @@ plugins: [
 | `linkImagesToOriginal` | `true`  | Add a link to each image to the original image. Sometimes people want to see a full-sized version of an image e.g. to see extra detail on a part of the image and this is a convenient and common pattern for enabling this. Set this option to false to disable this behavior.                                                                                                                                                                                             |
 | `showCaptions`         | `false` | Add a caption to each image with the contents of the title attribute, when this is not empty. Set this option to true to enable this behavior.                                                                                                                                                                                                                                                                                                                              |
 | `sizeByPixelDensity`   | `false` | Analyze images' pixel density to make decisions about target image size. This is what GitHub is doing when embedding images in tickets. This is a useful setting for documentation pages with a lot of screenshots. It can have unintended side effects on high pixel density artworks.<br /><br />Example: A screenshot made on a retina screen with a resolution of 144 (e.g. Macbook) and a width of 100px, will be rendered at 50px.                                    |
-| `wrapperStyle`         |         | Add custom styles to the div wrapping the responsive images. Use the syntax for the style attribute e.g. `margin-bottom:10px; background: red;`.                                                                                                                                                                                                                                                                                                                            |
+| `wrapperStyle`         |         | Add custom styles to the div wrapping the responsive images. Use the syntax for the style attribute e.g. `margin-bottom:10px; background: red;` or a function returning a style string which receives the information about the image you can use to dynamically set styles based on the aspectRatio for example.                                                                                                                                                           |
 | `backgroundColor`      | `white` | Set the background color of the image to match the background image of your design.                                                                                                                                                                                                                                                                                                                                                                                         |
 | `quality`              | `50`    | The quality level of the generated files.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `withWebp`             | `false` | Additionally generate WebP versions alongside your chosen file format. They are added as a srcset with the appropriate mimetype and will be loaded in browsers that support the format. Pass `true` for default support, or an object of options to specifically override those for the WebP files. For example, pass `{ quality: 80 }` to have the WebP images be at quality level 80.                                                                                     |
 | `tracedSVG`            | `false` | Use traced SVGs for placeholder images instead of the "blur up" effect. Pass `true` for traced SVGs with the default settings (seen [here][3]), or an object of options to override the defaults. For example, pass `{ color: "#F00", turnPolicy: "TURNPOLICY_MAJORITY" }` to change the color of the trace to red and the turn policy to TURNPOLICY_MAJORITY. See [`node-potrace` parameter documentation][4] for a full listing and explanation of the available options. |
 
+## dynamic wrapperStyle example
+
+```
+{
+  resolve: `gatsby-remark-images`,
+  options: {
+    maxWidth: 800,
+    wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
+  },
+}
+```
+
 ## Supported Formats
 
 This plugin will support the following formats:

diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
@@ -235,13 +235,18 @@ module.exports = (
 
     const ratio = `${(1 / fluidResult.aspectRatio) * 100}%`
 
+    const wrapperStyle =
+      typeof options.wrapperStyle === `function`
+        ? options.wrapperStyle(fluidResult)
+        : options.wrapperStyle
+
     // Construct new image node w/ aspect ratio placeholder
     const showCaptions = options.showCaptions && node.title
     let rawHTML = `
   <span
     class="${imageWrapperClass}"
     style="position: relative; display: block; ${
-      showCaptions ? `` : options.wrapperStyle
+      showCaptions ? `` : wrapperStyle
     } max-width: ${presentationWidth}px; margin-left: auto; margin-right: auto;"
   >
     <span
@@ -270,7 +275,7 @@ module.exports = (
     // Wrap in figure and use title as caption
     if (showCaptions) {
       rawHTML = `
-  <figure class="gatsby-resp-image-figure" style="${options.wrapperStyle}">
+  <figure class="gatsby-resp-image-figure" style="${wrapperStyle}">
     ${rawHTML}
     <figcaption class="gatsby-resp-image-figcaption">${node.title}</figcaption>
   </figure>