gatsby-image - npm Package Compare versions

Comparing version 1.0.36 to 1.0.37

index.js

@@ -223,3 +223,4 @@ "use strict";
         resolutions = _convertProps.resolutions,
-        backgroundColor = _convertProps.backgroundColor;
+        backgroundColor = _convertProps.backgroundColor,
+        Tag = _convertProps.Tag;
 
@@ -244,3 +245,3 @@ var bgColor = void 0;
       return _react2.default.createElement(
-        "div",
+        Tag,
         {
@@ -255,3 +256,3 @@ className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
         _react2.default.createElement(
-          "div",
+          Tag,
           {
@@ -266,3 +267,3 @@ className: (className ? className : "") + " gatsby-image-wrapper",
           },
-          _react2.default.createElement("div", {
+          _react2.default.createElement(Tag, {
             style: {
@@ -287,3 +288,3 @@ width: "100%",
           }),
-          bgColor && _react2.default.createElement("div", {
+          bgColor && _react2.default.createElement(Tag, {
             title: title,
@@ -345,3 +346,3 @@ style: {
       return _react2.default.createElement(
-        "div",
+        Tag,
         {
@@ -356,3 +357,3 @@ className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper",
         _react2.default.createElement(
-          "div",
+          Tag,
           {
@@ -377,3 +378,3 @@ className: (className ? className : "") + " gatsby-image-wrapper",
           }),
-          bgColor && _react2.default.createElement("div", {
+          bgColor && _react2.default.createElement(Tag, {
             title: title,
@@ -423,3 +424,4 @@ style: {
   fadeIn: true,
-  alt: ""
+  alt: "",
+  Tag: "div"
 };
@@ -440,5 +442,6 @@
   backgroundColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
-  onLoad: _propTypes2.default.func
+  onLoad: _propTypes2.default.func,
+  Tag: _propTypes2.default.string
 };
 
 exports.default = Image;

package.json

 {
   "name": "gatsby-image",
   "description": "Lazy-loading React image component with optional support for the blur-up effect.",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "author": "Kyle Mathews <[e-mail]>",
@@ -6,0 +6,0 @@ "bugs": {

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.
 
@@ -252,9 +254,14 @@ _Warning: gatsby-image is **not** a drop-in replacement for `<img/>`. It's
 | `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
+`quality`,`sizeByPixelDensity`,`pngCompressionLevel`,`cropFocus`,`greyscale` and many more. See its documentation for more.
+
 ## Some other stuff to be aware of
@@ -261,0 +268,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

Improved metrics

Total package byte prevSize

26928

increased by2.53%

Lines of code

379

increased by0.8%

Number of lines in readme file

272

increased by2.64%

No dependency changes