gatsby-image - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

index.js

@@ -17,2 +17,6 @@ "use strict";
 
+var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
 var _extends2 = require("babel-runtime/helpers/extends");
@@ -22,6 +26,2 @@
 
-var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
 var _react = require("react");
@@ -37,2 +37,33 @@
 
+// Handle legacy names for image queries.
+var convertProps = function convertProps(props) {
+  var convertedProps = (0, _extends3.default)({}, props);
+  if (convertedProps.responsiveResolution) {
+    convertedProps.resolutions = convertedProps.responsiveResolution;
+    delete convertedProps.responsiveResolution;
+  }
+  if (convertedProps.responsiveSizes) {
+    convertedProps.sizes = convertedProps.responsiveSizes;
+    delete convertedProps.responsiveSizes;
+  }
+
+  return convertedProps;
+};
+
+// Cache if we've seen an image before so we don't both with
+// lazy-loading & fading in on subsequent mounts.
+var imageCache = {};
+var inImageCache = function inImageCache(props) {
+  var convertedProps = convertProps(props);
+  // Find src
+  var src = convertedProps.sizes ? convertedProps.sizes.src : convertedProps.resolutions.src;
+
+  if (imageCache[src]) {
+    return true;
+  } else {
+    imageCache[src] = true;
+    return false;
+  }
+};
+
 var io = void 0;
@@ -63,3 +94,5 @@ var listeners = [];
       onLoad = props.onLoad,
-      otherProps = (0, _objectWithoutProperties3.default)(props, ["opacity", "onLoad"]);
+      _props$transitionDela = props.transitionDelay,
+      transitionDelay = _props$transitionDela === undefined ? "" : _props$transitionDela,
+      otherProps = (0, _objectWithoutProperties3.default)(props, ["opacity", "onLoad", "transitionDelay"]);
 
@@ -73,2 +106,3 @@ return _react2.default.createElement("img", (0, _extends3.default)({}, otherProps, {
       transition: "opacity 0.5s",
+      transitionDelay: transitionDelay,
       opacity: opacity,
@@ -85,2 +119,3 @@ width: "100%",
   opacity: _propTypes2.default.number,
+  transitionDelay: _propTypes2.default.string,
   onLoad: _propTypes2.default.func
@@ -103,3 +138,7 @@ };
 
-    if (typeof window !== "undefined" && window.IntersectionObserver) {
+    // If this image has already been loaded before then we can assume it's
+    // already in the browser cache so it's cheap to just show directly.
+    var seenBefore = inImageCache(props);
+
+    if (!seenBefore && typeof window !== "undefined" && window.IntersectionObserver) {
       isVisible = false;
@@ -129,3 +168,3 @@ imgLoaded = false;
 
-    if (window.IntersectionObserver && ref) {
+    if (this.state.IOSupported && ref) {
       listenToIntersections(ref, function () {
@@ -140,102 +179,122 @@ _this2.setState({ isVisible: true, imgLoaded: false });
 
-    var _props = this.props,
-        title = _props.title,
-        alt = _props.alt,
-        className = _props.className,
-        style = _props.style,
-        responsiveSizes = _props.responsiveSizes,
-        responsiveResolution = _props.responsiveResolution,
-        backgroundColor = _props.backgroundColor;
+    var _convertProps = convertProps(this.props),
+        title = _convertProps.title,
+        alt = _convertProps.alt,
+        className = _convertProps.className,
+        style = _convertProps.style,
+        sizes = _convertProps.sizes,
+        resolutions = _convertProps.resolutions,
+        backgroundColor = _convertProps.backgroundColor;
 
+    var bgColor = void 0;
+    if (typeof backgroundColor === "boolean") {
+      bgColor = "lightgray";
+    }
 
-    if (responsiveSizes) {
-      var image = responsiveSizes;
+    if (sizes) {
+      var image = sizes;
+      // The outer div is necessary to reset the z-index to 0.
       return _react2.default.createElement(
         "div",
-        {
-          className: (className ? className : "") + " gatsby-image-wrapper",
-          style: (0, _extends3.default)({
-            position: "relative",
-            overflow: "hidden"
-          }, style),
-          ref: this.handleRef
-        },
-        _react2.default.createElement("div", {
-          style: {
-            width: "100%",
-            paddingBottom: 100 / image.aspectRatio + "%"
-          }
-        }),
-        image.base64 && _react2.default.createElement(Img, {
-          alt: alt,
-          title: title,
-          src: image.base64,
-          opacity: !this.state.imgLoaded ? 1 : 0
-        }),
-        backgroundColor && _react2.default.createElement("div", {
-          title: title,
-          style: {
-            backgroundColor: backgroundColor,
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            right: 0,
-            left: 0
-          }
-        }),
-        this.state.isVisible && _react2.default.createElement(Img, {
-          alt: alt,
-          title: title,
-          srcSet: image.srcSet,
-          src: image.src,
-          sizes: image.sizes,
-          opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
-          onLoad: function onLoad() {
-            return _this3.state.IOSupported && _this3.setState({ imgLoaded: true });
-          }
-        })
+        { style: { zIndex: 0, position: "relative" } },
+        _react2.default.createElement(
+          "div",
+          {
+            className: (className ? className : "") + " gatsby-image-wrapper",
+            style: (0, _extends3.default)({
+              position: "relative",
+              overflow: "hidden",
+              zIndex: 1
+            }, style),
+            ref: this.handleRef
+          },
+          _react2.default.createElement("div", {
+            style: {
+              width: "100%",
+              paddingBottom: 100 / image.aspectRatio + "%"
+            }
+          }),
+          image.base64 && _react2.default.createElement(Img, {
+            alt: alt,
+            title: title,
+            src: image.base64,
+            opacity: !this.state.imgLoaded ? 1 : 0,
+            transitionDelay: "0.25s"
+          }),
+          bgColor && _react2.default.createElement("div", {
+            title: title,
+            style: {
+              backgroundColor: bgColor,
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              opacity: !this.state.imgLoaded ? 1 : 0,
+              right: 0,
+              left: 0
+            }
+          }),
+          this.state.isVisible && _react2.default.createElement(Img, {
+            alt: alt,
+            title: title,
+            srcSet: image.srcSet,
+            src: image.src,
+            sizes: image.sizes,
+            opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
+            onLoad: function onLoad() {
+              return _this3.state.IOSupported && _this3.setState({ imgLoaded: true });
+            }
+          })
+        )
       );
     }
 
-    if (responsiveResolution) {
-      var _image = responsiveResolution;
+    if (resolutions) {
+      var _image = resolutions;
+      // The outer div is necessary to reset the z-index to 0.
       return _react2.default.createElement(
         "div",
-        {
-          className: (className ? className : "") + " gatsby-image-wrapper",
-          style: (0, _extends3.default)({
-            position: "relative",
-            overflow: "hidden",
+        { style: { zIndex: 0, position: "relative" } },
+        _react2.default.createElement(
+          "div",
+          {
+            className: (className ? className : "") + " gatsby-image-wrapper",
+            style: (0, _extends3.default)({
+              position: "relative",
+              overflow: "hidden",
+              display: "inline-block",
+              zIndex: 1,
+              width: _image.width,
+              height: _image.height
+            }, style),
+            ref: this.handleRef
+          },
+          _image.base64 && _react2.default.createElement(Img, {
+            alt: alt,
+            title: title,
+            src: _image.base64,
+            opacity: !this.state.imgLoaded ? 1 : 0,
+            transitionDelay: "0.25s"
+          }),
+          bgColor && _react2.default.createElement("div", {
+            title: title,
+            style: {
+              backgroundColor: bgColor,
+              width: _image.width,
+              opacity: !this.state.imgLoaded ? 1 : 0,
+              height: _image.height
+            }
+          }),
+          this.state.isVisible && _react2.default.createElement(Img, {
+            alt: alt,
+            title: title,
             width: _image.width,
             height: _image.height,
-            background: "lightgray"
-          }, style),
-          ref: this.handleRef
-        },
-        _image.base64 && _react2.default.createElement(Img, {
-          alt: alt,
-          title: title,
-          src: _image.base64,
-          opacity: !this.state.imgLoaded ? 1 : 0
-        }),
-        backgroundColor && _react2.default.createElement("div", {
-          title: title,
-          style: {
-            backgroundColor: backgroundColor,
-            width: _image.width,
-            height: _image.height
-          }
-        }),
-        this.state.isVisible && _react2.default.createElement(Img, {
-          alt: alt,
-          title: title,
-          width: _image.width,
-          height: _image.height,
-          srcSet: _image.srcSet,
-          src: _image.src,
-          opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
-          onLoad: function onLoad() {
-            return _this3.setState({ imgLoaded: true });
-          }
-        })
+            srcSet: _image.srcSet,
+            src: _image.src,
+            opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
+            onLoad: function onLoad() {
+              return _this3.setState({ imgLoaded: true });
+            }
+          })
+        )
       );
@@ -258,2 +317,4 @@ }
   responsiveSizes: _propTypes2.default.object,
+  resolutions: _propTypes2.default.object,
+  sizes: _propTypes2.default.object,
   fadeIn: _propTypes2.default.bool,
@@ -264,6 +325,5 @@ title: _propTypes2.default.string,
   style: _propTypes2.default.object,
-  backgroundColor: _propTypes2.default.string,
-  wrapperClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]) // Support Glamor's css prop.
+  backgroundColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool])
 };
 
 exports.default = Image;

package.json

 {
   "name": "gatsby-image",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Lazy-loading React image component with optional support for the blur-up effect.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # gatsby-image
 
-Stub README
+Speedy, optimized images without the work.
+
+`gatsby-image` is a React component specially designed to work seamlessly with 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 in your sites.
+
+**[Demo](https://using-gatsby-images.gatsbyjs.org)**
+
+## Problem
+
+Huge, unoptimized images dramatically slow down your site.
+
+Creating optimized images for websites has long been a thorny problem. Ideally you would:
+
+* Resize large images to the size needed by your design
+* Generate multiple smaller images so smartphones and tablets don't download desktop-sized images
+* Strip all unnecessary metadata and optimize JPEG and PNG compression
+* Efficiently lazy load images to speed initial page load and save bandwidth
+* Use the "blur-up" technique to show a preview of the image while it loads
+* Hold the image position so your page doesn't jump while images load
+
+Doing this consistantly across a site feels like sisyphean labor. You manually optimize your images and then… several images are swapped in at the last minute or a design-tweak shaves 100px of width off your images.
+
+Most solutions involve a lot of manual labor and bookkeeping to ensure every image is optimized.
+
+This isn't ideal. Optimized images should be the default and very easy.
+
+## Solution
+
+With Gatsby, we can make images way *way* better.
+
+`gatsby-image` is designed to work seamlessly with Gatsby's native image processing capabilities powered by GraphQL and Sharp. To produce
+perfect images, you only need to:
+
+1) Import `gatsby-image` and use it in place of the built-in `img`
+2) Write a simple GraphQL query using one of the included GraphQL "fragments" which specify the fields needed by `gatsby-image`.
+
+This is what a component using `gatsby-images` looks like.
+
+```jsx
+import React from 'react
+import Img from 'gatsby-image'
+
+export default ({ data }) => (
+  <div>
+    <h1>Hello gatsby-image</h1>
+    <Img resolutions={data.file.childImageSharp.resolutions} />
+  </div>
+)
+
+export const query = graphql`
+  query GatsbyImageSampleQuery {
+    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg"}) {
+      childImageSharp {
+        # Specify the image processing steps right in the query
+        # Makes it trivial to update as your page's design changes.
+        resolutions(width: l25, height: 125) {
+          ...GatsbyImageSharpResolutions
+        }
+      }
+    }
+  }
+`
+```
+
+## Two types of responsive images
+
+There are two types of responsive images supported by gatsby-image.
+
+1) Images that have a *fixed* width and height
+2) Images that stretch across a fluid container
+
+In the first, you want to vary the image's size for different screen resolution. Or retina images in other words.
+
+For the second, you want to create multiple thumbnails for devices with widths stretching from smartphone to wide desktop monitors and give the browser "hints" about how to choose the right image.
+
+If that sounds complicated, well… it is. But luckily you (mostly) don't need to think about it with Gatsby.
+
+Instead, just ask yourself "do I know what size this image will be?" if yes, it's the first type. If no, or you're setting a `max-width: 100%;` on your image, then it's the second type.
+
+In Gatsby's GraphQL implementation, you query for the first type by querying a child object of an image called "resolutions" — which you can see in the sample component above. For the second type, you do a similar query but for a child object called "sizes".
+
+## Fragments
+
+GraphQL includes a concept called "query fragments". Which, as the name suggests, are parts of queries that can be reused in multiple queries. To ease building with `gatsby-image`, Gatsby image processing plugins which support `gatsby-image` ship with fragments which you can easily include in your queries. Note, [due to a limitation of GraphiQL](https://github.com/graphql/graphiql/issues/612), you can not currently use these fragments in the GraphiQL IDE.
+
+Plugins supporting `gatsby-image` currently include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-source-contentful](/packages/gatsby-source-contentful/).
+
+Their fragments are:
+
+### gatsby-transformer-sharp
+
+* `GatsbyImageSharpResolutions`
+* `GatsbyImageSharpResolutions_noBase64`
+* `GatsbyImageSharpSizes`
+* `GatsbyImageSharpSizes_noBase64`
+
+### gatsby-source-contentful
+
+* `GatsbyContentfulResolutions`
+* `GatsbyContentfulResolutions_noBase64`
+* `GatsbyContentfulSizes`
+* `GatsbyContentfulSizes_noBase64`
+
+If you don't want to use the blur-up effect, choose the fragment with `noBase64` at the end.
+
+## "Resolutions" queries
+
+### Component
+
+Pass in the data returned from the `resolutions` object in your query via the `resolutions` prop. e.g. `<Img resolutions={resolutions} />`
+
+### Query
+
+```graphql
+{
+  imageSharp {
+    # Other options include height (set both width and height to crop),
+    # grayscale, duotone, rotate, etc.
+    resolutions(width: 400) {
+      # Choose either the fragment including a small base64ed image or one without.
+      ...GatsbyImageSharpResolutions
+    }
+  }
+}
+```
+
+## "Sizes" queries
+
+### Component
+
+Pass in the data returned from the `sizes` object in your query via the `sizes` prop. e.g. `<Img sizes={sizes} />`
+
+### Query
+
+```graphql
+{
+  imageSharp {
+    # i.e. the max width of your container is 700 pixels.
+    #
+    # Other options include maxHeight (set both maxWidth and maxHeight to crop),
+    # grayscale, duotone, rotate, etc.
+    sizes(maxWidth: 700) {
+      # Choose either the fragment including a small base64ed image or one without.
+      ...GatsbyImageSharpSizes_noBase64
+    }
+  }
+}
+```
+
+## Component props
+
+* `resolutions` — PropTypes.object
+* `sizes` — PropTypes.object
+* `fadeIn` — PropTypes.bool // Defaults to fading in the image on load
+* `title` — PropTypes.string
+* `alt` — PropTypes.string
+* `className` — PropTypes.oneOfType([PropTypes.string, PropTypes.object]), // Support Glamor's css prop
+* `style` — PropTypes.object
+* `backgroundColor` — PropTypes.oneOfType([PropTypes.string, PropTypes.bool]) // Set a colored background placeholder. If set to true, uses `lightgray` as the color. You can pass in any valid color string.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17362

increased by96.54%

Number of package files

7

increased by16.67%

Lines of code

271

increased by25.46%

Number of lines in readme file

161

increased by3925%

No dependency changes