Revert 5b1441b + fix background color

tsriram · Oct 7, 2017 · 76cda50 · 76cda50
1 parent 94186bc
commit 76cda50
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 19 deletions.
diff --git a/examples/using-gatsby-image/src/pages/background-color.js b/examples/using-gatsby-image/src/pages/background-color.js
@@ -8,6 +8,8 @@ const BlurUp = ({ data }) => (
     <h1>Viribus quid</h1>
     <h2>Hippason sinu</h2>
     <Img
+      backgroundColor
+      style={{ display: `inherit` }}
       css={{
         marginBottom: rhythm(options.blockMarginBottom),
         marginLeft: rhythm(options.blockMarginBottom),
@@ -21,13 +23,15 @@ const BlurUp = ({ data }) => (
       resolutions={data.reddImageMobile.resolutions}
     />
     <Img
+      backgroundColor
+      style={{ display: `inherit` }}
       css={{
         marginBottom: rhythm(options.blockMarginBottom),
         marginLeft: rhythm(options.blockMarginBottom),
         float: `right`,
         display: `none`,
         "@media (min-width: 500px)": {
-          display: `block`,
+          display: `inline-block`,
         },
       }}
       backgroundColor={`lightgray`}

diff --git a/examples/using-gatsby-image/src/pages/blur-up.js b/examples/using-gatsby-image/src/pages/blur-up.js
@@ -8,25 +8,29 @@ const BlurUp = ({ data }) => (
     <h1>Viribus quid</h1>
     <h2>Hippason sinu</h2>
     <Img
+      style={{ display: `inherit` }}
       css={{
         marginBottom: rhythm(options.blockMarginBottom),
         marginLeft: rhythm(options.blockMarginBottom),
         float: `right`,
-        "@media (min-width: 500px)": {
-          display: `none`,
+        "&": {
+          "@media (min-width: 500px)": {
+            display: `none`,
+          },
         },
       }}
       title={`Photo by Redd Angelo on Unsplash`}
       resolutions={data.reddImageMobile.resolutions}
     />
     <Img
+      style={{ display: `inherit` }}
       css={{
         marginBottom: rhythm(options.blockMarginBottom),
         marginLeft: rhythm(options.blockMarginBottom),
         float: `right`,
         display: `none`,
         "@media (min-width: 500px)": {
-          display: `block`,
+          display: `inline-block`,
         },
       }}
       title={`Photo by Redd Angelo on Unsplash`}

diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md
@@ -160,6 +160,7 @@ Pass in the data returned from the `sizes` object in your query via the `sizes`
 | `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 |
-| `style`           | `object`        | Spread into the default styles in the outer div |
+| `style`           | `object`        | Spread into the default styles in the wrapper div |
+| `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. |
 
diff --git a/packages/gatsby-image/src/index.js b/packages/gatsby-image/src/index.js
@@ -139,7 +139,7 @@ class Image extends React.Component {
       title,
       alt,
       className,
-      style,
+      style = {},
       sizes,
       resolutions,
       backgroundColor,
@@ -148,21 +148,29 @@ class Image extends React.Component {
     let bgColor
     if (typeof backgroundColor === `boolean`) {
       bgColor = `lightgray`
+    } else {
+      bgColor = backgroundColor
     }
 
     if (sizes) {
       const image = sizes
+      console.log(image)
       // The outer div is necessary to reset the z-index to 0.
       return (
         <div
-          style={{ zIndex: 0, position: `relative`, ...style }}
-          className={`${className ? className : ``} gatsby-image-wrapper`}
+          style={{
+            zIndex: 0,
+            // Let users set component to be absolutely positioned.
+            position: style.position === `absolute` ? `initial` : `relative`,
+          }}
         >
           <div
+            className={`${className ? className : ``} gatsby-image-wrapper`}
             style={{
               position: `relative`,
               overflow: `hidden`,
               zIndex: 1,
+              ...style,
             }}
             ref={this.handleRef}
           >
@@ -195,6 +203,7 @@ class Image extends React.Component {
                   top: 0,
                   bottom: 0,
                   opacity: !this.state.imgLoaded ? 1 : 0,
+                  transitionDelay: `0.35s`,
                   right: 0,
                   left: 0,
                 }}
@@ -223,21 +232,32 @@ class Image extends React.Component {
 
     if (resolutions) {
       const image = resolutions
+      const divStyle = {
+        position: `relative`,
+        overflow: `hidden`,
+        display: `inline-block`,
+        zIndex: 1,
+        width: image.width,
+        height: image.height,
+        ...style,
+      }
+
+      if (style.display === `inherit`) {
+        delete divStyle.display
+      }
+
       // The outer div is necessary to reset the z-index to 0.
       return (
         <div
-          style={{ zIndex: 0, position: `relative`, ...style }}
-          className={`${className ? className : ``} gatsby-image-wrapper`}
+          style={{
+            zIndex: 0,
+            // Let users set component to be absolutely positioned.
+            position: style.position === `absolute` ? `initial` : `relative`,
+          }}
         >
           <div
-            style={{
-              position: `relative`,
-              overflow: `hidden`,
-              display: `inline-block`,
-              zIndex: 1,
-              width: image.width,
-              height: image.height,
-            }}
+            className={`${className ? className : ``} gatsby-image-wrapper`}
+            style={divStyle}
             ref={this.handleRef}
           >
             {/* Show the blury base64 image. */}
@@ -247,7 +267,7 @@ class Image extends React.Component {
                 title={title}
                 src={image.base64}
                 opacity={!this.state.imgLoaded ? 1 : 0}
-                transitionDelay={`0.25s`}
+                transitionDelay={`0.35s`}
               />
             )}
 
@@ -259,6 +279,7 @@ class Image extends React.Component {
                   backgroundColor: bgColor,
                   width: image.width,
                   opacity: !this.state.imgLoaded ? 1 : 0,
+                  transitionDelay: `0.25s`,
                   height: image.height,
                 }}
               />
@@ -303,6 +324,7 @@ Image.propTypes = {
   alt: PropTypes.string,
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), // Support Glamor's css prop.
   style: PropTypes.object,
+  position: PropTypes.string,
   backgroundColor: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 }