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

Make Gatsby Image more configurable #4105

Merged
merged 8 commits into from
Feb 19, 2018
Merged

Make Gatsby Image more configurable #4105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
731f4b3
make gatsby-image more configurable
tsriram Feb 17, 2018
a3f4fb5
fix noscript img style
tsriram Feb 17, 2018
874074b
add imgStyle prop to gatsby-image doc
tsriram Feb 17, 2018
f79791e
remove unnecessary \ for escaping |
tsriram Feb 17, 2018
a358840
make eslint happy :smile:
tsriram Feb 17, 2018
f25494a
Update README.md
KyleAMathews Feb 17, 2018
4094817
remove transition delay from image style
tsriram Feb 18, 2018
240a77c
Merge branch 'gatsby-image-props' of github.com:tsriram/gatsby into g…
tsriram Feb 18, 2018
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
7 changes: 4 additions & 3 deletions packages/gatsby-image/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,11 +250,12 @@ prop. e.g. `<Img sizes={sizes} />`
| `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 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. |
| `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`. |

Expand Down
47 changes: 25 additions & 22 deletions packages/gatsby-image/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,11 @@ const noscriptImg = props => {
height = ``,
transitionDelay = ``,
} = props
return `<img width=${width} height=${height} src="${src}" srcset="${srcSet}" alt="${alt}" title="${title}" sizes="${sizes}" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;objectPosition:center"/>`
return `<img width=${width} height=${height} src="${src}" srcset="${srcSet}" alt="${alt}" title="${title}" sizes="${sizes}" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/>`
}

const Img = props => {
const { opacity, onLoad, transitionDelay = ``, ...otherProps } = props
const { style, onLoad, ...otherProps } = props
return (
<img
{...otherProps}
Expand All @@ -113,20 +113,18 @@ const Img = props => {
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,
}

Expand Down Expand Up @@ -184,6 +182,7 @@ class Image extends React.Component {
className,
outerWrapperClassName,
style = {},
imgStyle = {},
sizes,
resolutions,
backgroundColor,
Expand All @@ -197,6 +196,17 @@ 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,
...imgStyle,
}

if (sizes) {
const image = sizes

Expand All @@ -211,7 +221,7 @@ class Image extends React.Component {
<Tag
className={`${
outerWrapperClassName ? outerWrapperClassName : ``
} gatsby-image-outer-wrapper`}
} gatsby-image-outer-wrapper`}
style={{
zIndex: 0,
// Let users set component to be absolutely positioned.
Expand Down Expand Up @@ -242,8 +252,7 @@ class Image extends React.Component {
alt={alt}
title={title}
src={image.base64}
opacity={!this.state.imgLoaded ? 1 : 0}
transitionDelay={`0.25s`}
style={imagePlaceholderStyle}
/>
)}

Expand All @@ -253,8 +262,7 @@ class Image extends React.Component {
alt={alt}
title={title}
src={image.tracedSVG}
opacity={!this.state.imgLoaded ? 1 : 0}
transitionDelay={`0.25s`}
style={imagePlaceholderStyle}
/>
)}

Expand Down Expand Up @@ -283,9 +291,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()
Expand Down Expand Up @@ -331,7 +337,7 @@ class Image extends React.Component {
<Tag
className={`${
outerWrapperClassName ? outerWrapperClassName : ``
} gatsby-image-outer-wrapper`}
} gatsby-image-outer-wrapper`}
style={{
zIndex: 0,
// Let users set component to be absolutely positioned.
Expand All @@ -349,8 +355,7 @@ class Image extends React.Component {
alt={alt}
title={title}
src={image.base64}
opacity={!this.state.imgLoaded ? 1 : 0}
transitionDelay={`0.35s`}
style={imagePlaceholderStyle}
/>
)}

Expand All @@ -360,8 +365,7 @@ class Image extends React.Component {
alt={alt}
title={title}
src={image.tracedSVG}
opacity={!this.state.imgLoaded ? 1 : 0}
transitionDelay={`0.25s`}
style={imagePlaceholderStyle}
/>
)}

Expand All @@ -388,9 +392,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()
Expand Down Expand Up @@ -439,6 +441,7 @@ Image.propTypes = {
PropTypes.object,
]),
style: PropTypes.object,
imgStyle: PropTypes.object,
position: PropTypes.string,
backgroundColor: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
onLoad: PropTypes.func,
Expand Down