Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 10 commits into from
Mar 11, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0f2316a
feat: add option.addAspectRatio
CanRau Feb 25, 2019
f338732
docs: add note about addAspectRatio option
CanRau Feb 25, 2019
c9f7df3
feat: make it customizable using a function
CanRau Feb 25, 2019
53bcd17
docs: update readme to reflect function option
CanRau Feb 25, 2019
97e6019
style: change to backticks
CanRau Feb 25, 2019
653359f
style: fix linting
CanRau Feb 25, 2019
867e28d
Merge branch 'master' into CanRau-patch-1
CanRau Mar 11, 2019
377340b
Merge branch 'master' into pr/12060
wardpeet Mar 11, 2019
a638512
fix linting
wardpeet Mar 11, 2019
f6a4562
circle please work
wardpeet Mar 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion packages/gatsby-remark-images/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
9 changes: 7 additions & 2 deletions packages/gatsby-remark-images/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down