[gatsby-image] Allow specifying HTML tag for gatsby-image wrapping el…

…ements (#4022) * Allow specifying which html tag will be used for gatsby-image wrappers * Update gatsby-image README.md to include new Tag prop
gatsbyjs · Feb 13, 2018 · 725c6e8 · 725c6e8
1 parent 8273ddf
commit 725c6e8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md
@@ -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
@@ -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

diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js
@@ -187,6 +187,7 @@ class Image extends React.Component {
       sizes,
       resolutions,
       backgroundColor,
+      Tag,
     } = convertProps(this.props)
 
     let bgColor
@@ -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`}
@@ -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`,
@@ -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}%`,
@@ -259,7 +260,7 @@ class Image extends React.Component {
 
             {/* Show a solid background color. */}
             {bgColor && (
-              <div
+              <Tag
                 title={title}
                 style={{
                   backgroundColor: bgColor,
@@ -298,8 +299,8 @@ class Image extends React.Component {
                 __html: noscriptImg({ alt, title, ...image }),
               }}
             />
-          </div>
-        </div>
+          </Tag>
+        </Tag>
       )
     }
 
@@ -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`}
@@ -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}
@@ -366,7 +367,7 @@ class Image extends React.Component {
 
             {/* Show a solid background color. */}
             {bgColor && (
-              <div
+              <Tag
                 title={title}
                 style={{
                   backgroundColor: bgColor,
@@ -409,8 +410,8 @@ class Image extends React.Component {
                 }),
               }}
             />
-          </div>
-        </div>
+          </Tag>
+        </Tag>
       )
     }
 
@@ -421,6 +422,7 @@ class Image extends React.Component {
 Image.defaultProps = {
   fadeIn: true,
   alt: ``,
+  Tag: `div`,
 }
 
 Image.propTypes = {
@@ -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