gatsby-image
Advanced tools
gatsby-image - npm Package Compare versions
Comparing version 1.0.7 to 1.0.8
49
index.js
@@ -175,3 +175,4 @@ "use strict"; | ||
| className = _convertProps.className, | ||
| style = _convertProps.style, | ||
| _convertProps$style = _convertProps.style, | ||
| style = _convertProps$style === undefined ? {} : _convertProps$style, | ||
| sizes = _convertProps.sizes, | ||
@@ -184,2 +185,4 @@ resolutions = _convertProps.resolutions, | ||
| bgColor = "lightgray"; | ||
| } else { | ||
| bgColor = backgroundColor; | ||
| } | ||
@@ -189,6 +192,13 @@ | ||
| var image = sizes; | ||
| console.log(image); | ||
| // The outer div is necessary to reset the z-index to 0. | ||
| return _react2.default.createElement( | ||
| "div", | ||
| { style: { zIndex: 0, position: "relative" } }, | ||
| { | ||
| style: { | ||
| zIndex: 0, | ||
| // Let users set component to be absolutely positioned. | ||
| position: style.position === "absolute" ? "initial" : "relative" | ||
| } | ||
| }, | ||
| _react2.default.createElement( | ||
@@ -226,2 +236,3 @@ "div", | ||
| opacity: !this.state.imgLoaded ? 1 : 0, | ||
| transitionDelay: "0.35s", | ||
| right: 0, | ||
@@ -248,6 +259,25 @@ left: 0 | ||
| var _image = resolutions; | ||
| var divStyle = (0, _extends3.default)({ | ||
| 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 _react2.default.createElement( | ||
| "div", | ||
| { style: { zIndex: 0, position: "relative" } }, | ||
| { | ||
| style: { | ||
| zIndex: 0, | ||
| // Let users set component to be absolutely positioned. | ||
| position: style.position === "absolute" ? "initial" : "relative" | ||
| } | ||
| }, | ||
| _react2.default.createElement( | ||
@@ -257,10 +287,3 @@ "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), | ||
| style: divStyle, | ||
| ref: this.handleRef | ||
@@ -273,3 +296,3 @@ }, | ||
| opacity: !this.state.imgLoaded ? 1 : 0, | ||
| transitionDelay: "0.25s" | ||
| transitionDelay: "0.35s" | ||
| }), | ||
@@ -282,2 +305,3 @@ bgColor && _react2.default.createElement("div", { | ||
| opacity: !this.state.imgLoaded ? 1 : 0, | ||
| transitionDelay: "0.25s", | ||
| height: _image.height | ||
@@ -323,2 +347,3 @@ } | ||
| style: _propTypes2.default.object, | ||
| position: _propTypes2.default.string, | ||
| backgroundColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]) | ||
@@ -325,0 +350,0 @@ }; |
| { | ||
| "name": "gatsby-image", | ||
| "version": "1.0.7", | ||
| "version": "1.0.8", | ||
| "description": "Lazy-loading React image component with optional support for the blur-up effect.", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -5,11 +5,11 @@ # gatsby-image | ||
| `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. | ||
| `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 for your sites. | ||
| **[Demo](https://using-gatsby-images.gatsbyjs.org)** | ||
| **[Demo](https://using-gatsby-image.gatsbyjs.org)** | ||
| ## Problem | ||
| Huge, unoptimized images dramatically slow down your site. | ||
| Large, unoptimized images dramatically slow down your site. | ||
| Creating optimized images for websites has long been a thorny problem. Ideally you would: | ||
| But creating optimized images for websites has long been a thorny problem. Ideally you would: | ||
@@ -27,3 +27,3 @@ * Resize large images to the size needed by your design | ||
| This isn't ideal. Optimized images should be the default and very easy. | ||
| This isn't ideal. Optimized images should be easy and the default. | ||
@@ -35,3 +35,3 @@ ## Solution | ||
| `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: | ||
| perfect images, you need only: | ||
@@ -41,6 +41,8 @@ 1) Import `gatsby-image` and use it in place of the built-in `img` | ||
| The GraphQL query creates multiple thumbnails with optimized JPEG and PNG compression. The `gatsby-image` component automatically sets up the "blur-up" effect as well as lazy loading of images further down the screen. | ||
| This is what a component using `gatsby-images` looks like. | ||
| ```jsx | ||
| import React from 'react | ||
| import React from 'react' | ||
| import Img from 'gatsby-image' | ||
@@ -77,16 +79,16 @@ | ||
| In the first scenario, you want to vary the image's size for different screen resolution -- in other words, create retina images. | ||
| In the first scenario, you want to vary the image's size for different screen *resolutions* -- in other words, create retina images. | ||
| For the second scenario, 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. | ||
| For the second scenario, you want to create multiple *sizes* of thumbnails for devices with widths stretching from smartphone to wide desktop monitors. | ||
| If that sounds complicated, well, it is. But luckily Gatsby does the work, so you don't have to. | ||
| To decide between the two, ask yourself: "do I know the exact size this image will be?" If yes, it's the first type. If no and its width and/or height need to vary depending on the size of the screen, then it's the second type. | ||
| 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`. | ||
| 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. | ||
| GraphQL includes a concept called "query fragments". Which, as the name suggests, are a part of a query that can be used 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/). | ||
@@ -156,11 +158,18 @@ | ||
| ## Component props | ||
| ## `gatsby-image` 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. | ||
| | 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 | | ||
| | `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. | | ||
| ## Some other stuff to be aware of | ||
| * If you want to set `display: none;` on a component using a `resolutions` prop, you need to also pass in to the style prop `{ display: 'inherit' }`.* Images don't load until JavaScript is loaded. Gatsby's automatic code splitting generally makes this fine but if images seem slow coming in on a page, check how much JavaScript is being loaded there. |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by9.89%
19082
- Lines of code
- increased by8.49%
294
- Number of lines in readme file
- increased by5.59%
170
No dependency changes