From 0f2316aed9bb1efce44817231b2a6d0cd94ca7a1 Mon Sep 17 00:00:00 2001 From: Can Rau Date: Mon, 25 Feb 2019 02:08:59 -0500 Subject: [PATCH 1/8] feat: add option.addAspectRatio option.addAspectRatio adds the aspect ratio of the image as `flex: value;` to the wrapperStyle --- packages/gatsby-remark-images/src/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index ebf4cea08ed1b..75e1bbc20f056 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -234,6 +234,9 @@ module.exports = ( } const ratio = `${(1 / fluidResult.aspectRatio) * 100}%` + const wrapperStyle = options.addAspectRatio + ? `${options.wrapperStyle}flex:${_.round(fluidResult.aspectRatio, 2)};` + : options.wrapperStyle // Construct new image node w/ aspect ratio placeholder const showCaptions = options.showCaptions && node.title @@ -241,7 +244,7 @@ module.exports = ( +
${rawHTML}
${node.title}
From f338732030ba7e1d5dc7014929b800043e4e5edb Mon Sep 17 00:00:00 2001 From: Can Rau Date: Mon, 25 Feb 2019 02:20:23 -0500 Subject: [PATCH 2/8] docs: add note about addAspectRatio option --- packages/gatsby-remark-images/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gatsby-remark-images/README.md b/packages/gatsby-remark-images/README.md index c9d9b1b314c0a..74542555b2f3d 100644 --- a/packages/gatsby-remark-images/README.md +++ b/packages/gatsby-remark-images/README.md @@ -55,6 +55,7 @@ plugins: [ | `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. | +| `addAspectRatio` | `false` | Adds the aspect ratio of the image as `flex` value to allow images to scale to equal heights in a flex container `display: flex;` | [1]: https://jmperezperez.com/medium-image-progressive-loading-placeholder/ [2]: https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/ From c9f7df3006ca8869ebb8344f79d46fb50ccf9670 Mon Sep 17 00:00:00 2001 From: Can Rau Date: Mon, 25 Feb 2019 12:28:15 -0500 Subject: [PATCH 3/8] feat: make it customizable using a function like @wardpeet suggested, instead of hard coding the aspectRatio stuff we allow the user to provide a function which receives all necessary information --- packages/gatsby-remark-images/src/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index 75e1bbc20f056..129d38a7ea045 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -234,8 +234,9 @@ module.exports = ( } const ratio = `${(1 / fluidResult.aspectRatio) * 100}%` - const wrapperStyle = options.addAspectRatio - ? `${options.wrapperStyle}flex:${_.round(fluidResult.aspectRatio, 2)};` + + const wrapperStyle = typeof options.wrapperStyle === 'function' + ? options.wrapperStyle(fluidResult) : options.wrapperStyle // Construct new image node w/ aspect ratio placeholder From 53bcd170a4e5f8fe7dbfb640db4aceb89a2aaac7 Mon Sep 17 00:00:00 2001 From: Can Rau Date: Mon, 25 Feb 2019 12:38:44 -0500 Subject: [PATCH 4/8] docs: update readme to reflect function option --- packages/gatsby-remark-images/README.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-remark-images/README.md b/packages/gatsby-remark-images/README.md index 74542555b2f3d..33fd6f9f1d2b7 100644 --- a/packages/gatsby-remark-images/README.md +++ b/packages/gatsby-remark-images/README.md @@ -50,12 +50,23 @@ 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.

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. | -| `addAspectRatio` | `false` | Adds the aspect ratio of the image as `flex` value to allow images to scale to equal heights in a flex container `display: flex;` | + +## dynamic wrapperStyle example + +``` +{ + resolve: `gatsby-remark-images`, + options: { + maxWidth: 800, + wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`, + }, +} +``` [1]: https://jmperezperez.com/medium-image-progressive-loading-placeholder/ [2]: https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/ From 97e601906810e4d817c54f4bc76d55ce6445dd1f Mon Sep 17 00:00:00 2001 From: Can Rau Date: Mon, 25 Feb 2019 12:42:43 -0500 Subject: [PATCH 5/8] style: change to backticks --- packages/gatsby-remark-images/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index 129d38a7ea045..f318ffdd9d143 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -235,7 +235,7 @@ module.exports = ( const ratio = `${(1 / fluidResult.aspectRatio) * 100}%` - const wrapperStyle = typeof options.wrapperStyle === 'function' + const wrapperStyle = typeof options.wrapperStyle === `function` ? options.wrapperStyle(fluidResult) : options.wrapperStyle From 653359ff3fde7675b401fc8a77d91c3b3a018162 Mon Sep 17 00:00:00 2001 From: Can Rau Date: Mon, 25 Feb 2019 12:51:01 -0500 Subject: [PATCH 6/8] style: fix linting --- packages/gatsby-remark-images/src/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index f318ffdd9d143..e12de2a0888cf 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -234,10 +234,11 @@ module.exports = ( } const ratio = `${(1 / fluidResult.aspectRatio) * 100}%` - - const wrapperStyle = typeof options.wrapperStyle === `function` - ? options.wrapperStyle(fluidResult) - : options.wrapperStyle + + 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 From a6385120e92e808463c1583a05aa79920c4177d4 Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Mon, 11 Mar 2019 08:19:15 +0100 Subject: [PATCH 7/8] fix linting --- packages/gatsby-remark-images/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/gatsby-remark-images/README.md b/packages/gatsby-remark-images/README.md index 3d4ae0d77f069..4d6a4d6dfae1b 100644 --- a/packages/gatsby-remark-images/README.md +++ b/packages/gatsby-remark-images/README.md @@ -56,7 +56,6 @@ plugins: [ | `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 ``` From f6a4562b7916c23ea66ad3910f6aaf8292ed7fb2 Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Mon, 11 Mar 2019 08:59:28 +0100 Subject: [PATCH 8/8] circle please work