From 731f4b3235ed1b7e373878d20ad02f39b22225b7 Mon Sep 17 00:00:00 2001 From: Sriram Thiagarajan Date: Sat, 17 Feb 2018 16:40:02 +0530 Subject: [PATCH 1/7] make gatsby-image more configurable Added a new prop `imgStyle` which is now spread into default styles of img element. --- packages/gatsby-image/src/index.js | 46 ++++++++++++++++-------------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 94b485d52662f..194561933664f 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -103,7 +103,7 @@ const noscriptImg = props => { } const Img = props => { - const { opacity, onLoad, transitionDelay = ``, ...otherProps } = props + const { style, onLoad, ...otherProps } = props return ( { top: 0, left: 0, transition: `opacity 0.5s`, - transitionDelay, - opacity, width: `100%`, height: `100%`, objectFit: `cover`, objectPosition: `center`, + ...style }} /> ) } Img.propTypes = { - opacity: PropTypes.number, - transitionDelay: PropTypes.string, + style: PropTypes.object, onLoad: PropTypes.func, } @@ -184,6 +182,7 @@ class Image extends React.Component { className, outerWrapperClassName, style = {}, + imgStyle = {}, sizes, resolutions, backgroundColor, @@ -197,6 +196,18 @@ class Image extends React.Component { bgColor = backgroundColor } + const imagePlaceholderStyle = { + opacity: this.state.imgLoaded ? 0 : 1, + transitionDelay: `0.25s`, + ...imgStyle + } + + const imageStyle = { + opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0, + transitionDelay: `0.25s`, + ...imgStyle + } + if (sizes) { const image = sizes @@ -211,7 +222,7 @@ class Image extends React.Component { )} @@ -253,8 +263,7 @@ class Image extends React.Component { alt={alt} title={title} src={image.tracedSVG} - opacity={!this.state.imgLoaded ? 1 : 0} - transitionDelay={`0.25s`} + style={imagePlaceholderStyle} /> )} @@ -283,9 +292,7 @@ class Image extends React.Component { srcSet={image.srcSet} src={image.src} sizes={image.sizes} - opacity={ - this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0 - } + style={imageStyle} onLoad={() => { this.state.IOSupported && this.setState({ imgLoaded: true }) this.props.onLoad && this.props.onLoad() @@ -331,7 +338,7 @@ class Image extends React.Component { )} @@ -360,8 +366,7 @@ class Image extends React.Component { alt={alt} title={title} src={image.tracedSVG} - opacity={!this.state.imgLoaded ? 1 : 0} - transitionDelay={`0.25s`} + style={imagePlaceholderStyle} /> )} @@ -388,9 +393,7 @@ class Image extends React.Component { height={image.height} srcSet={image.srcSet} src={image.src} - opacity={ - this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0 - } + style={imageStyle} onLoad={() => { this.setState({ imgLoaded: true }) this.props.onLoad && this.props.onLoad() @@ -439,6 +442,7 @@ Image.propTypes = { PropTypes.object, ]), style: PropTypes.object, + imgStyle: PropTypes.object, position: PropTypes.string, backgroundColor: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), onLoad: PropTypes.func, From a3f4fb5f08b1abbae98e3baba0ca4e00c865432b Mon Sep 17 00:00:00 2001 From: Sriram Thiagarajan Date: Sat, 17 Feb 2018 16:53:23 +0530 Subject: [PATCH 2/7] fix noscript img style --- packages/gatsby-image/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 194561933664f..3baa5d5c5bf1c 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -99,7 +99,7 @@ const noscriptImg = props => { height = ``, transitionDelay = ``, } = props - return `${alt}` + return `${alt}` } const Img = props => { From 874074bd427110a7c0823fdcb3a7677103930c3a Mon Sep 17 00:00:00 2001 From: Sriram Thiagarajan Date: Sat, 17 Feb 2018 18:16:37 +0530 Subject: [PATCH 3/7] add imgStyle prop to gatsby-image doc --- packages/gatsby-image/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index 0bba09e5b3ec9..a944934484153 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -253,6 +253,7 @@ prop. e.g. `` | `className` | `string\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop | | `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop | | `style` | `object` | Spread into the default styles in the wrapper element | +| `imgStyle` | `object` | Spread into the default styles in the `img` element | | `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned | | `backgroundColor` | `string\|bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. | | `onLoad` | `func` | A callback that is called when the full-size image has loaded. | From f79791e68a1037435f4a51f57688b490045d0e76 Mon Sep 17 00:00:00 2001 From: Sriram Thiagarajan Date: Sat, 17 Feb 2018 18:22:20 +0530 Subject: [PATCH 4/7] remove unnecessary \ for escaping | --- packages/gatsby-image/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index a944934484153..ce5271fc00c89 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -250,12 +250,12 @@ prop. e.g. `` | `fadeIn` | `bool` | Defaults to fading in the image on load | | `title` | `string` | Passed to the `img` element | | `alt` | `string` | Passed to the `img` element | -| `className` | `string\|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop | -| `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop | +| `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop | +| `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop | | `style` | `object` | Spread into the default styles in the wrapper element | | `imgStyle` | `object` | Spread into the default styles in the `img` element | | `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned | -| `backgroundColor` | `string\|bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. | +| `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. | | `onLoad` | `func` | A callback that is called when the full-size image has loaded. | | `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. | From a3588402b0bfcdfe0e53474591784042e0533b62 Mon Sep 17 00:00:00 2001 From: Sriram Thiagarajan Date: Sat, 17 Feb 2018 18:26:49 +0530 Subject: [PATCH 5/7] make eslint happy :smile: --- packages/gatsby-image/src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 3baa5d5c5bf1c..9b145b0b1314f 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -117,7 +117,7 @@ const Img = props => { height: `100%`, objectFit: `cover`, objectPosition: `center`, - ...style + ...style, }} /> ) @@ -199,13 +199,13 @@ class Image extends React.Component { const imagePlaceholderStyle = { opacity: this.state.imgLoaded ? 0 : 1, transitionDelay: `0.25s`, - ...imgStyle + ...imgStyle, } const imageStyle = { opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0, transitionDelay: `0.25s`, - ...imgStyle + ...imgStyle, } if (sizes) { From f25494aa1f89bd8abfcb1694ad771c86dcd0ce0e Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Sat, 17 Feb 2018 09:17:33 -0800 Subject: [PATCH 6/7] Update README.md --- packages/gatsby-image/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index ce5271fc00c89..f05727a4057ae 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -253,7 +253,7 @@ prop. e.g. `` | `className` | `string|object` | Passed to the wrapper element. Object is needed to support Glamor's css prop | | `outerWrapperClassName` | `string|object` | Passed to the outer wrapper element. Object is needed to support Glamor's css prop | | `style` | `object` | Spread into the default styles in the wrapper element | -| `imgStyle` | `object` | Spread into the default styles in the `img` element | +| `imgStyle` | `object` | Spread into the default styles for the actual `img` element | | `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned | | `backgroundColor` | `string|bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. | | `onLoad` | `func` | A callback that is called when the full-size image has loaded. | From 4094817b938d24372182ff5929c5cb6444f1dc21 Mon Sep 17 00:00:00 2001 From: Sriram Thiagarajan Date: Sun, 18 Feb 2018 11:37:35 +0530 Subject: [PATCH 7/7] remove transition delay from image style This got added by mistake during refactor. We originally had transitionDelay only for image placeholders. Removing this from actual image style now. --- packages/gatsby-image/src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js index 9b145b0b1314f..42c339646266e 100644 --- a/packages/gatsby-image/src/index.js +++ b/packages/gatsby-image/src/index.js @@ -204,7 +204,6 @@ class Image extends React.Component { const imageStyle = { opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0, - transitionDelay: `0.25s`, ...imgStyle, }