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

[gatsby-image] Allow specifying HTML tag for gatsby-image wrapping elements #4022

Merged
merged 2 commits into from
Feb 13, 2018
Merged

[gatsby-image] Allow specifying HTML tag for gatsby-image wrapping elements #4022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38c224f
Allow specifying which html tag will be used for gatsby-image wrappers
dannywils Feb 13, 2018
2486ade
Update gatsby-image README.md to include new Tag prop
dannywils Feb 13, 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
11 changes: 6 additions & 5 deletions packages/gatsby-image/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Gatsby's GraphQL queries. It combines
[Gatsby's native image processing](https://image-processing.gatsbyjs.org/)
capabilities with advanced image loading techniques to easily and completely
optimize image loading for your sites. `gatsby-image` uses
[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)
[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)
to power its image transformations.

_Warning: gatsby-image is **not** a drop-in replacement for `<img/>`. It's
Expand Down Expand Up @@ -250,15 +250,16 @@ 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 div. Object is needed to support Glamor's css prop |
| `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |
| `style` | `object` | Spread into the default styles in the wrapper div |
| `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 |
| `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. |
| `Tag` | `string` | Which HTML tag to use for wrapping elements. Defaults to `div`. |

## Image processing arguments
[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like
[gatsby-plugin-sharp](/packages/gatsby-plugin-sharp) supports many additional arguments for transforming your images like
`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.

## Some other stuff to be aware of
Expand Down
25 changes: 14 additions & 11 deletions packages/gatsby-image/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,7 @@ class Image extends React.Component {
sizes,
resolutions,
backgroundColor,
Tag,
} = convertProps(this.props)

let bgColor
Expand All @@ -207,7 +208,7 @@ class Image extends React.Component {

// The outer div is necessary to reset the z-index to 0.
return (
<div
<Tag
className={`${
outerWrapperClassName ? outerWrapperClassName : ``
} gatsby-image-outer-wrapper`}
Expand All @@ -217,7 +218,7 @@ class Image extends React.Component {
position: style.position === `absolute` ? `initial` : `relative`,
}}
>
<div
<Tag
className={`${className ? className : ``} gatsby-image-wrapper`}
style={{
position: `relative`,
Expand All @@ -228,7 +229,7 @@ class Image extends React.Component {
ref={this.handleRef}
>
{/* Preserve the aspect ratio. */}
<div
<Tag
style={{
width: `100%`,
paddingBottom: `${100 / image.aspectRatio}%`,
Expand Down Expand Up @@ -259,7 +260,7 @@ class Image extends React.Component {

{/* Show a solid background color. */}
{bgColor && (
<div
<Tag
title={title}
style={{
backgroundColor: bgColor,
Expand Down Expand Up @@ -298,8 +299,8 @@ class Image extends React.Component {
__html: noscriptImg({ alt, title, ...image }),
}}
/>
</div>
</div>
</Tag>
</Tag>
)
}

Expand Down Expand Up @@ -327,7 +328,7 @@ class Image extends React.Component {

// The outer div is necessary to reset the z-index to 0.
return (
<div
<Tag
className={`${
outerWrapperClassName ? outerWrapperClassName : ``
} gatsby-image-outer-wrapper`}
Expand All @@ -337,7 +338,7 @@ class Image extends React.Component {
position: style.position === `absolute` ? `initial` : `relative`,
}}
>
<div
<Tag
className={`${className ? className : ``} gatsby-image-wrapper`}
style={divStyle}
ref={this.handleRef}
Expand Down Expand Up @@ -366,7 +367,7 @@ class Image extends React.Component {

{/* Show a solid background color. */}
{bgColor && (
<div
<Tag
title={title}
style={{
backgroundColor: bgColor,
Expand Down Expand Up @@ -409,8 +410,8 @@ class Image extends React.Component {
}),
}}
/>
</div>
</div>
</Tag>
</Tag>
)
}

Expand All @@ -421,6 +422,7 @@ class Image extends React.Component {
Image.defaultProps = {
fadeIn: true,
alt: ``,
Tag: `div`,
}

Image.propTypes = {
Expand All @@ -440,6 +442,7 @@ Image.propTypes = {
position: PropTypes.string,
backgroundColor: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
onLoad: PropTypes.func,
Tag: PropTypes.string,
}

export default Image