gatsby-image
Advanced tools
Comparing version 1.1.0-alpha.f20ac0ed to 1.1.0-alpha.f5c1df61
{ | ||
"name": "gatsby-image", | ||
"version": "1.1.0-alpha.f20ac0ed", | ||
"version": "1.1.0-alpha.f5c1df61", | ||
"description": "Lazy-loading React image component with optional support for the blur-up effect.", | ||
@@ -13,2 +13,3 @@ "main": "index.js", | ||
"gatsby", | ||
"gatsby-component", | ||
"react-component" | ||
@@ -15,0 +16,0 @@ ], |
@@ -34,3 +34,3 @@ # gatsby-image | ||
Doing this consistantly across a site feels like sisyphean labor. You manually | ||
Doing this consistently across a site feels like sisyphean labor. You manually | ||
optimize your images and then… several images are swapped in at the last minute | ||
@@ -60,2 +60,24 @@ or a design-tweak shaves 100px of width off your images. | ||
## Install | ||
`npm install --save gatsby-image` | ||
Depending on the gatsby starter you used, you may need to include [gatsby-transformer-sharp](/packages/gatsby-transformer-sharp/) and [gatsby-plugin-sharp](/packages/gatsby-plugin-sharp/) as well, and make sure they are installed and included in your gatsby-config. | ||
``` | ||
npm install --save gatsby-transformer-sharp | ||
npm install --save gatsby-plugin-sharp | ||
``` | ||
Then in your `gatsby-config.js`: | ||
``` | ||
plugins: [ | ||
`gatsby-transformer-sharp`, | ||
`gatsby-plugin-sharp` | ||
]; | ||
``` | ||
## How to use | ||
This is what a component using `gatsby-images` looks like. | ||
@@ -89,2 +111,4 @@ | ||
For another explanation of how to get started with gatsby-image, see this blog post by community member Kyle Gill [Image Optimization Made Easy with Gatsby.js](https://medium.com/@kyle.robert.gill/ridiculously-easy-image-optimization-with-gatsby-js-59d48e15db6e) | ||
## Two types of responsive images | ||
@@ -91,0 +115,0 @@ |
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
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
25827
261