gatsby-image - npm Package Compare versions

Comparing version 1.1.0-alpha.2b695217 to 1.1.0-alpha.2cbec6d6

index.js

@@ -104,3 +104,3 @@ "use strict";
   var _props$opacity = props.opacity,
-      opacity = _props$opacity === void 0 ? "" : _props$opacity,
+      opacity = _props$opacity === void 0 ? "1" : _props$opacity,
       src = props.src,
@@ -119,15 +119,13 @@ srcSet = props.srcSet,
       _props$transitionDela = props.transitionDelay,
-      transitionDelay = _props$transitionDela === void 0 ? "" : _props$transitionDela;
-  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\"/>";
+      transitionDelay = _props$transitionDela === void 0 ? "0.5s" : _props$transitionDela;
+  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\"/>";
 };
 
 var Img = function Img(props) {
-  var opacity = props.opacity,
+  var style = props.style,
       onLoad = props.onLoad,
-      _props$transitionDela2 = props.transitionDelay,
-      transitionDelay = _props$transitionDela2 === void 0 ? "" : _props$transitionDela2,
-      otherProps = (0, _objectWithoutProperties2.default)(props, ["opacity", "onLoad", "transitionDelay"]);
+      otherProps = (0, _objectWithoutProperties2.default)(props, ["style", "onLoad"]);
   return _react.default.createElement("img", (0, _extends2.default)({}, otherProps, {
     onLoad: onLoad,
-    style: {
+    style: (0, _extends2.default)({
       position: "absolute",
@@ -137,4 +135,2 @@ top: 0,
       transition: "opacity 0.5s",
-      transitionDelay: transitionDelay,
-      opacity: opacity,
       width: "100%",
@@ -144,3 +140,3 @@ height: "100%",
       objectPosition: "center"
-    }
+    }, style)
   }));
@@ -150,4 +146,3 @@ };
 Img.propTypes = {
-  opacity: _propTypes.default.number,
-  transitionDelay: _propTypes.default.string,
+  style: _propTypes.default.object,
   onLoad: _propTypes.default.func
@@ -220,5 +215,8 @@ };
         style = _convertProps$style === void 0 ? {} : _convertProps$style,
+        _convertProps$imgStyl = _convertProps.imgStyle,
+        imgStyle = _convertProps$imgStyl === void 0 ? {} : _convertProps$imgStyl,
         sizes = _convertProps.sizes,
         resolutions = _convertProps.resolutions,
-        backgroundColor = _convertProps.backgroundColor;
+        backgroundColor = _convertProps.backgroundColor,
+        Tag = _convertProps.Tag;
 
@@ -233,2 +231,10 @@ var bgColor;
 
+    var imagePlaceholderStyle = (0, _extends2.default)({
+      opacity: this.state.imgLoaded ? 0 : 1,
+      transitionDelay: "0.25s"
+    }, imgStyle);
+    var imageStyle = (0, _extends2.default)({
+      opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0
+    }, imgStyle);
+
     if (sizes) {
@@ -243,3 +249,3 @@ var image = sizes; // Use webp by default if browser supports it
 
-      return _react.default.createElement("div", {
+      return _react.default.createElement(Tag, {
         className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
@@ -251,3 +257,3 @@ style: {
         }
-      }, _react.default.createElement("div", {
+      }, _react.default.createElement(Tag, {
         className: (className ? className : "") + " gatsby-image-wrapper",
@@ -260,3 +266,3 @@ style: (0, _extends2.default)({
         ref: this.handleRef
-      }, _react.default.createElement("div", {
+      }, _react.default.createElement(Tag, {
         style: {
@@ -270,4 +276,3 @@ width: "100%",
         src: image.base64,
-        opacity: !this.state.imgLoaded ? 1 : 0,
-        transitionDelay: "0.25s"
+        style: imagePlaceholderStyle
       }), image.tracedSVG && _react.default.createElement(Img, {
@@ -277,5 +282,4 @@ alt: alt,
         src: image.tracedSVG,
-        opacity: !this.state.imgLoaded ? 1 : 0,
-        transitionDelay: "0.25s"
-      }), bgColor && _react.default.createElement("div", {
+        style: imagePlaceholderStyle
+      }), bgColor && _react.default.createElement(Tag, {
         title: title,
@@ -298,3 +302,3 @@ style: {
         sizes: image.sizes,
-        opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
+        style: imageStyle,
         onLoad: function onLoad() {
@@ -338,3 +342,3 @@ _this3.state.IOSupported && _this3.setState({
 
-      return _react.default.createElement("div", {
+      return _react.default.createElement(Tag, {
         className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
@@ -346,3 +350,3 @@ style: {
         }
-      }, _react.default.createElement("div", {
+      }, _react.default.createElement(Tag, {
         className: (className ? className : "") + " gatsby-image-wrapper",
@@ -355,4 +359,3 @@ style: divStyle,
         src: _image.base64,
-        opacity: !this.state.imgLoaded ? 1 : 0,
-        transitionDelay: "0.35s"
+        style: imagePlaceholderStyle
       }), _image.tracedSVG && _react.default.createElement(Img, {
@@ -362,5 +365,4 @@ alt: alt,
         src: _image.tracedSVG,
-        opacity: !this.state.imgLoaded ? 1 : 0,
-        transitionDelay: "0.25s"
-      }), bgColor && _react.default.createElement("div", {
+        style: imagePlaceholderStyle
+      }), bgColor && _react.default.createElement(Tag, {
         title: title,
@@ -381,3 +383,3 @@ style: {
         src: _image.src,
-        opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0,
+        style: imageStyle,
         onLoad: function onLoad() {
@@ -410,3 +412,4 @@ _this3.setState({
   fadeIn: true,
-  alt: ""
+  alt: "",
+  Tag: "div"
 };
@@ -425,7 +428,9 @@ Image.propTypes = {
   style: _propTypes.default.object,
+  imgStyle: _propTypes.default.object,
   position: _propTypes.default.string,
   backgroundColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  onLoad: _propTypes.default.func
+  onLoad: _propTypes.default.func,
+  Tag: _propTypes.default.string
 };
 var _default = Image;
 exports.default = _default;

package.json

 {
   "name": "gatsby-image",
-  "version": "1.1.0-alpha.2b695217",
   "description": "Lazy-loading React image component with optional support for the blur-up effect.",
-  "main": "index.js",
-  "scripts": {
-    "build": "babel src --out-dir . --ignore **/__tests__/**",
-    "watch": "babel -w src --out-dir . --ignore **/__tests__/**",
-    "prepublish": "cross-env NODE_ENV=production npm run build"
+  "version": "1.1.0-alpha.2cbec6d6",
+  "author": "Kyle Mathews <[e-mail]>",
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
-  "keywords": [
-    "gatsby",
-    "gatsby-component",
-    "react-component"
-  ],
-  "author": "Kyle Mathews <[e-mail]>",
-  "license": "MIT",
   "dependencies": {
@@ -26,3 +17,17 @@ "@babel/runtime": "^7.0.0-beta.38",
     "cross-env": "^5.0.5"
+  },
+  "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme",
+  "keywords": [
+    "gatsby",
+    "gatsby-component",
+    "react-component"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore __tests__",
+    "prepublish": "cross-env NODE_ENV=production npm run build",
+    "watch": "babel -w src --out-dir . --ignore __tests__"
   }
 }

README.md

@@ -9,3 +9,5 @@ # gatsby-image
 capabilities with advanced image loading techniques to easily and completely
-optimize image loading for your sites.
+optimize image loading for your sites. `gatsby-image` uses
+[gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)
+to power its image transformations.
 
@@ -170,4 +172,8 @@ _Warning: gatsby-image is **not** a drop-in replacement for `<img/>`. It's
 * `GatsbyContentfulResolutions_noBase64`
+* `GatsbyContentfulResolutions_withWebp`
+* `GatsbyContentfulResolutions_withWebp_noBase64`
 * `GatsbyContentfulSizes`
 * `GatsbyContentfulSizes_noBase64`
+* `GatsbyContentfulSizes_withWebp`
+* `GatsbyContentfulSizes_withWebp_noBase64`
 
@@ -242,16 +248,23 @@ ### gatsby-source-datocms
 
-| Name                    | Type             | Description                                                                                                                 |
-| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `resolutions`           | `object`         | Data returned from the `resolutions` query                                                                                  |
-| `sizes`                 | `object`         | Data returned from the `sizes` query                                                                                        |
-| `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                                                                           |
-| `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.                                                              |
+| Name                    | Type            | Description                                                                                                                 |
+| ----------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `resolutions`           | `object`        | Data returned from the `resolutions` query                                                                                  |
+| `sizes`                 | `object`        | Data returned from the `sizes` query                                                                                        |
+| `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                                          |
+| `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. |
+| `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
+`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.
+
 ## Some other stuff to be aware of
@@ -258,0 +271,0 @@

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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26625

increased by6.83%

Number of package files

6

increased by20%

Lines of code

375

increased by6.53%

Number of low maintenance alerts

0

decreased by-100%

Number of lines in readme file

274

increased by4.98%

No dependency changes