[gatsby-image] improvements

docs/blog/gatsbygram-case-study/index.md

@@ -294,7 +294,7 @@ export const pageQuery = `
             # thumbnails are created. This makes iterating on
             # designs effortless as we simply change the args
             # for the query and we get new thumbnails.
-            big: responsiveSizes(maxWidth: 640) {
+            big: sizes(maxWidth: 640) {
               src
               srcSet
             }

docs/docs/api-specification.md

@@ -56,13 +56,12 @@ plugins later) plugins](/docs/plugins/).
 
 
 * *Page* — a site page with a pathname, a template component, and optional graphql query and layout component
-* *Layout Component* — surrounds a page and (eventually) can optionally have a parent layout component as well as a graphql query
-* *Template Component* — responsible for rendering N pages. Can optionally have a graphql query
+* *Page Component* — React.js component that renders a page and can optionally specify a layout component and a graphql query
 * *Component extensions* — extensions that are resolvable as components. `.js` and `.jsx` are supported by core. But plugins can add support for other compile-to-js languages.
 * *Dependency* — Gatsby tracks automatically dependencies between different objects e.g. a page can depend on certain nodes. This allows for hot reloading, caching, incremental rebuilds, etc.
 * *Node* — a data object
 * *Node Field* — a field added by a plugin to a node that it doesn't control
-* *Node Link* — a connection between nodes that gets converted to GraphQL relationships (is there a name for this?). Can be created in a variety of ways as well as automatically inferred. Parent/child links from nodes and their transformed derivative nodes are first class links.
+* *Node Link* — a connection between nodes that gets converted to GraphQL relationships. Can be created in a variety of ways as well as automatically inferred. Parent/child links from nodes and their transformed derivative nodes are first class links.
 
 ## Operators
 
@@ -106,9 +105,7 @@ APIs in the server rendering process and the browser e.g. `onClientEntry` or
 `onRouteUpdate`
 
 The three main inspirations for this API and spec are React.js' API
-specifically @leebyron's email on the React API
-(https://gist.github.com/vjeux/f2b015d230cc1ab18ed1df30550495ed), this talk
-"How to Design a Good API and Why it Matters" by Joshua Bloch who designed
-many parts of Java. https://www.youtube.com/watch?v=heh4OeB9A-c&app=desktop,
-and [Hapi.js](https://hapijs.com/api)' plugin design.
+specifically [@leebyron's email on the React API](https://gist.github.com/vjeux/f2b015d230cc1ab18ed1df30550495ed), this talk
+["How to Design a Good API and Why it Matters" by Joshua Bloch](https://www.youtube.com/watch?v=heh4OeB9A-c&app=desktop) who designed
+many parts of Java, and [Hapi.js](https://hapijs.com/api)' plugin design.
 

examples/gatsbygram/package.json

@@ -5,16 +5,17 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
-    "gatsby": "latest",
-    "gatsby-link": "latest",
-    "gatsby-plugin-glamor": "latest",
-    "gatsby-plugin-google-analytics": "latest",
-    "gatsby-plugin-manifest": "latest",
-    "gatsby-plugin-offline": "latest",
-    "gatsby-plugin-sharp": "latest",
-    "gatsby-source-filesystem": "latest",
-    "gatsby-transformer-json": "latest",
-    "gatsby-transformer-sharp": "latest",
+    "gatsby": "^1.9.52",
+    "gatsby-image": "^1.0.5",
+    "gatsby-link": "^1.6.20",
+    "gatsby-plugin-glamor": "^1.6.8",
+    "gatsby-plugin-google-analytics": "^1.0.8",
+    "gatsby-plugin-manifest": "^1.0.8",
+    "gatsby-plugin-offline": "^1.0.9",
+    "gatsby-plugin-sharp": "^1.6.8",
+    "gatsby-source-filesystem": "^1.5.2",
+    "gatsby-transformer-json": "^1.0.8",
+    "gatsby-transformer-sharp": "^1.6.8",
     "instagram-screen-scrape": "^2.0.0",
     "lodash": "^4.16.4",
     "mkdirp": "^0.5.1",
@@ -30,7 +31,9 @@
     "typeface-space-mono": "^0.0.22",
     "typography": "^0.15.0"
   },
-  "keywords": ["gatsby"],
+  "keywords": [
+    "gatsby"
+  ],
   "license": "MIT",
   "main": "n/a",
   "scripts": {

examples/gatsbygram/src/components/post-detail.js

@@ -213,7 +213,7 @@ export const postDetailFragment = graphql`
         # thumbnails are created. This makes iterating on
         # designs effortless as we simply change the args
         # for the query and we get new thumbnails.
-        big: responsiveSizes(maxWidth: 640) {
+        big: sizes(maxWidth: 640) {
           src
           srcSet
         }

examples/image-processing/package.json

@@ -5,14 +5,15 @@
   "version": "1.0.0",
   "author": "Florian Kissling <[email protected]>",
   "dependencies": {
-    "gatsby": "latest",
-    "gatsby-link": "latest",
-    "gatsby-plugin-google-analytics": "latest",
+    "gatsby": "^1.9.52",
+    "gatsby-image": "^1.0.5",
+    "gatsby-link": "^1.6.20",
+    "gatsby-plugin-google-analytics": "^1.0.8",
     "gatsby-plugin-offline": "latest",
-    "gatsby-plugin-sharp": "latest",
-    "gatsby-source-drupal": "latest",
-    "gatsby-source-filesystem": "latest",
-    "gatsby-transformer-sharp": "latest",
+    "gatsby-plugin-sharp": "^1.6.8",
+    "gatsby-source-drupal": "^1.3.7",
+    "gatsby-source-filesystem": "^1.5.2",
+    "gatsby-transformer-sharp": "^1.6.8",
     "react-typography": "^0.15.0",
     "typography": "^0.15.8",
     "typography-theme-bootstrap": "^0.15.10"

examples/image-processing/src/layouts/index.js

@@ -21,7 +21,7 @@ class DefaultLayout extends React.Component {
             fontWeight: `normal`,
           }}
         >
-          Image Processing with <code>gatsby-plugin-sharp</code>
+          Image Processing with <code>gatsby-transformer-sharp</code>
         </h1>
         {this.props.children()}
       </div>

examples/image-processing/src/pages/index.js

@@ -1,12 +1,13 @@
 import React from "react"
+import Img from "gatsby-image"
 
 import { rhythm } from "../utils/typography"
 
 class Index extends React.Component {
   render() {
     const images = this.props.data.allImageSharp.edges
-    const responsiveSizes = this.props.data.sizes.responsiveSizes
-    const responsiveResolution = this.props.data.resolution.responsiveResolution
+    const sizes = this.props.data.sizes.sizes
+    const resolutions = this.props.data.resolution.resolutions
     const cropDefault = this.props.data.cropDefault.resize
     const cropBottomLeft = this.props.data.cropBottomLeft.resize
     const cropEntropy = this.props.data.cropEntropy.resize
@@ -15,16 +16,20 @@ class Index extends React.Component {
     return (
       <div>
         <p>
-          <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/">
-            <code>gatsby-plugin-sharp</code>
+          <a href="https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/">
+            <code>gatsby-transformer-sharp</code>
           </a>
           {` `}
-          exposes several image processing functions built on the
+          exposes several image processing GraphQL functions built on the
           {` `}
           <a href="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/lovell/sharp">
             Sharp image processing library
-          </a>. It is a low-level helper plugin generally used by other Gatsby
-          plugins – but you can easily use it in your own GraphQL queries!
+          </a>. With it and{` `}
+          <a href="https://www.gatsbyjs.org/packages/gatsby-image/">
+            Gatsby Image
+          </a>
+          {` `}
+          you can easily add fast, optimized, responsive images to your site.
         </p>
         <p>
           <strong>
@@ -147,18 +152,24 @@ class Index extends React.Component {
         >
           <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/#responsive-sizes">
             <code>
-              <strong>responsiveSizes</strong>
+              <strong>sizes</strong>
             </code>
           </a>
         </h2>
         <p>
-          Create sizes (in width) for the image. If the max width of the
-          container for the rendered markdown file is 800px, the sizes would
-          then be: 200, 400, 800, 1200, 1600, 2400 – enough to provide close to
-          the optimal image size for every device size / screen resolution.
+          For when you want an image that stretches across a fluid width
+          container but will download the smallest image needed for the device
+          e.g. a smartphone will download a much smaller image than a desktop
+          device.
         </p>
         <p>
-          On top of that, <code>responsiveSizes</code>
+          If the max width of the container for the rendered markdown file is
+          800px, the sizes would then be: 200, 400, 800, 1200, 1600, 2400 –
+          enough to provide close to the optimal image size for every device
+          size / screen resolution.
+        </p>
+        <p>
+          On top of that, <code>sizes</code>
           {` `}
           returns everything else (namely
           {` `}
@@ -214,57 +225,29 @@ class Index extends React.Component {
 
         <h3>
           <small>
-            responsiveSizes(duotone:
+            sizes(duotone:
             {` `}
             {`{ `}
             highlight: "#f00e2e", shadow: "#192550" {`}`}, toFormat: PNG)
           </small>
         </h3>
-        <div>
-          <div
-            style={{
-              position: `relative`,
-              zIndex: -1,
-            }}
-          >
-            <div
-              style={{
-                paddingBottom: `${1 / responsiveSizes.aspectRatio * 100}%`,
-                position: `relative`,
-                width: `100%`,
-                bottom: 0,
-                left: 0,
-                backgroundImage: `url(${responsiveSizes.base64})`,
-                backgroundSize: `cover`,
-              }}
-            >
-              <img
-                src={responsiveSizes.src}
-                srcSet={responsiveSizes.srcSet}
-                style={{
-                  width: `100%`,
-                  margin: 0,
-                  verticalAlign: `middle`,
-                  position: `absolute`,
-                }}
-                sizes={responsiveSizes.sizes}
-              />
-            </div>
-          </div>
-        </div>
-
+        <Img sizes={sizes} />
         <h2
           style={{
             paddingTop: rhythm(2),
           }}
         >
           <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/#responsive-resolution">
-            <code>responsiveResolution</code>
+            <code>resolutions</code>
           </a>
         </h2>
         <p>
-          Automatically create sizes for different resolutions — we do 1x, 1.5x,
-          2x, and 3x.
+          For when you want a fixed sized image but that has different sized
+          thumbnails for screens that support different density of images
+        </p>
+        <p>
+          Automatically create images for different resolutions — we do 1x,
+          1.5x, 2x, and 3x.
           {` `}
         </p>
 
@@ -282,10 +265,7 @@ class Index extends React.Component {
           to convert the source image to 8-bit greyscale, 256 shades of grey.
         </p>
 
-        <img
-          src={responsiveResolution.src}
-          srcSet={responsiveResolution.srcSet}
-        />
+        <Img resolutions={resolutions} />
       </div>
     )
   }
@@ -324,30 +304,21 @@ export const pageQuery = graphql`
       }
     }
     sizes: imageSharp(id: { regex: "/fecolormatrix-kanye-west.jpg/" }) {
-      responsiveSizes(
+      sizes(
         duotone: { highlight: "#f00e2e", shadow: "#192550" }
         toFormat: PNG
       ) {
-        base64
-        aspectRatio
-        src
-        srcSet
-        sizes
-        originalImg
-        originalName
+        ...GatsbyImageSharpSizes
       }
     }
     resolution: imageSharp(id: { regex: "/lol.jpg/" }) {
-      responsiveResolution(grayscale: true, width: 614) {
-        src
-        srcSet
-        originalName
+      resolutions(grayscale: true, width: 500) {
+        ...GatsbyImageSharpResolutions
       }
     }
     cropDefault: imageSharp(id: { regex: "/gatsby.jpg/" }) {
       resize(width: 180, height: 180) {
         src
-        originalName
       }
     }
     cropBottomLeft: imageSharp(id: { regex: "/nyancat/" }) {

examples/using-contentful/package.json

@@ -6,6 +6,7 @@
   "author": "Marcus Ericsson <[email protected]> (mericsson.com)",
   "dependencies": {
     "gatsby": "latest",
+    "gatsby-image": "^1.0.5",
     "gatsby-link": "latest",
     "gatsby-plugin-google-analytics": "latest",
     "gatsby-plugin-offline": "latest",
@@ -17,7 +18,9 @@
     "typography": "^0.15.8",
     "typography-breakpoint-constants": "^0.14.0"
   },
-  "keywords": ["gatsby"],
+  "keywords": [
+    "gatsby"
+  ],
   "license": "MIT",
   "main": "n/a",
   "scripts": {