Port using-gatsby-image site to image plugin (#28489)

* Moving examples to new plugin * wip * wip * wip * feat(gatsby-plugin-image): Add useArtDirection hook * Use hook from package * wip * update code and copy * got stuck ong atsby dev versions * address comments * rework * Fix image crop and alt * Fix version Co-authored-by: Laurie <laurie@gatsbyjs.com>
gatsbyjs · Apr 12, 2021 · e351588 · e351588
1 parent 71ec0cd
commit e351588
Show file tree

Hide file tree

Showing 19 changed files with 449 additions and 358 deletions.
diff --git a/examples/using-gatsby-image/README.md b/examples/using-gatsby-image/README.md
@@ -2,6 +2,6 @@
 
 https://using-gatsby-image.gatsbyjs.org
 
-Gatsby example site that shows how to use the [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image) plugin.
+Gatsby example site that shows how to use [gatsby-plugin-image](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image).
 
 [![Edit using-gatsby-image](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image)
diff --git a/examples/using-gatsby-image/content/unsplash-images.yaml b/examples/using-gatsby-image/content/unsplash-images.yaml
@@ -1,81 +1,81 @@
-- url: https://images.unsplash.com/photo-1534432586043-ead5b99229fb
+- url: https://images.unsplash.com/photo-1534432586043-ead5b99229fb?w=1920
   title: Pug with hoodie
   credit: Charles Deluvio
-- url: https://images.unsplash.com/photo-1530041539828-114de669390e
+- url: https://images.unsplash.com/photo-1530041539828-114de669390e?w=1920
   title: Pug with yellow raincoat
   credit: Charles Deluvio
-- url: https://images.unsplash.com/photo-1495121553079-4c61bcce1894
+- url: https://images.unsplash.com/photo-1495121553079-4c61bcce1894?w=1920
   title: Vintage camera
   credit: Alexander Andrews
-- url: https://images.unsplash.com/photo-1517519014922-8fc06b814a0e
+- url: https://images.unsplash.com/photo-1517519014922-8fc06b814a0e?w=1920
   title: Pug with red hat
   credit: Charles Deluvio
-- url: https://images.unsplash.com/photo-1530041587872-d823b3d4bed7
+- url: https://images.unsplash.com/photo-1530041587872-d823b3d4bed7?w=1920
   title: Pug without hoodie
   credit: Charles Deluvio
 
 # gallery specific
-- url: https://images.unsplash.com/photo-1528475478853-5b89bed65c4c
+- url: https://images.unsplash.com/photo-1528475478853-5b89bed65c4c?w=1920
   title: Cactus
   credit: Charles Deluvio
   gallery: true
-- url: https://images.unsplash.com/photo-1528476625962-40d0763c921f
+- url: https://images.unsplash.com/photo-1528476625962-40d0763c921f?w=1920
   title: Cacti
   credit: Charles Deluvio
   gallery: true
-- url: https://images.unsplash.com/photo-1525498128493-380d1990a112
+- url: https://images.unsplash.com/photo-1525498128493-380d1990a112?w=1920
   title: Leaves
   credit: Chris Lee
   gallery: true
-- url: https://images.unsplash.com/photo-1539656262152-6cb9103f1a33
+- url: https://images.unsplash.com/photo-1539656262152-6cb9103f1a33?w=1920
   title: City from above
   credit: chuttersnap
   gallery: true
-- url: https://images.unsplash.com/photo-1501004318641-b39e6451bec6
+- url: https://images.unsplash.com/photo-1501004318641-b39e6451bec6?w=1920
   title: Plant with leaves
   credit: Igor Son
   gallery: true
-- url: https://images.unsplash.com/photo-1469201039728-6c8998f9872a
+- url: https://images.unsplash.com/photo-1469201039728-6c8998f9872a?w=1920
   title: Alien in the forest
   credit: Martin Reisch
   gallery: true
-- url: https://images.unsplash.com/photo-1483728788451-2708e0270131
+- url: https://images.unsplash.com/photo-1483728788451-2708e0270131?w=1920
   title: Person in center from above
   credit: Martin Reisch
   gallery: true
-- url: https://images.unsplash.com/photo-1485827031228-b1736cb1fd06
+- url: https://images.unsplash.com/photo-1485827031228-b1736cb1fd06?w=1920
   title: Person on football field from above
   credit: Martin Reisch
   gallery: true
-- url: https://images.unsplash.com/photo-1496241028573-69327bf8f9d5
+- url: https://images.unsplash.com/photo-1496241028573-69327bf8f9d5?w=1920
   title: Person on roof from above
   credit: Martin Reisch
   gallery: true
-- url: https://images.unsplash.com/photo-1479859546309-cd77fa21c8f6
+- url: https://images.unsplash.com/photo-1479859546309-cd77fa21c8f6?w=1920
   title: Tennis court
   credit: Michele Feola
   gallery: true
-- url: https://images.unsplash.com/photo-1504981775868-badb3c4ec2bd
+- url: https://images.unsplash.com/photo-1504981775868-badb3c4ec2bd?w=1920
   title: Beach
   credit: Ryan Christodoulou
   gallery: true
-- url: https://images.unsplash.com/photo-1505903658795-8d3cc48039e4
+- url: https://images.unsplash.com/photo-1505903658795-8d3cc48039e4?w=1920
   title: Top of house
   credit: Simone Hutsch
   gallery: true
-- url: https://images.unsplash.com/photo-1505904909252-8ce17de9f287
+- url: https://images.unsplash.com/photo-1505904909252-8ce17de9f287?w=1920
   title: Gala
   credit: Simone Hutsch
   gallery: true
-- url: https://images.unsplash.com/photo-1504492729478-4ea346b648ae
+- url: https://images.unsplash.com/photo-1504492729478-4ea346b648ae?w=1920
   title: Pool from above
   credit: Spencer Watson
   gallery: true
-- url: https://images.unsplash.com/photo-1498248193836-88f8c8d70a3f
+- url: https://images.unsplash.com/photo-1498248193836-88f8c8d70a3f?w=1920
   title: Beach and tents from above
   credit: Syd Sujuaan
   gallery: true
-- url: https://images.unsplash.com/photo-1516962126636-27ad087061cc
+- url: https://images.unsplash.com/photo-1516962126636-27ad087061cc?w=1920
   title: Polaroid Pronto 600
   credit: Yoann Siloine
   gallery: true
diff --git a/examples/using-gatsby-image/gatsby-config.js b/examples/using-gatsby-image/gatsby-config.js
@@ -2,6 +2,7 @@ module.exports = {
   plugins: [
     `gatsby-plugin-emotion`,
     `gatsby-plugin-netlify`,
+    `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,
     {

diff --git a/examples/using-gatsby-image/package.json b/examples/using-gatsby-image/package.json
@@ -10,8 +10,8 @@
     "buffer": "^6.0.3",
     "emotion": "^11.0.0",
     "gatsby": "next",
-    "gatsby-image": "next",
     "gatsby-plugin-emotion": "next",
+    "gatsby-plugin-image": "next",
     "gatsby-plugin-netlify": "next",
     "gatsby-plugin-sharp": "next",
     "gatsby-plugin-typography": "next",

diff --git a/examples/using-gatsby-image/plugins/gatsby-source-remote-images/gatsby-node.js b/examples/using-gatsby-image/plugins/gatsby-source-remote-images/gatsby-node.js
@@ -27,3 +27,18 @@ exports.onCreateNode = async (
     }
   }
 }
+
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions
+
+  createTypes(`
+    type UnsplashImagesYaml implements Node {
+      url: String
+      title: String
+      credit: String
+      gallery: Boolean
+      localFile: File @link(from: "localFile___NODE")
+    }
+
+  `)
+}
diff --git a/examples/using-gatsby-image/src/components/floating-image.js b/examples/using-gatsby-image/src/components/floating-image.js
diff --git a/examples/using-gatsby-image/src/components/image-gallery.js b/examples/using-gatsby-image/src/components/image-gallery.js
@@ -1,7 +1,6 @@
 import React from "react"
-import Img from "gatsby-image"
+import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import styled from "@emotion/styled"
-import numeral from "numeral"
 
 import { mq, gutter, offset, offsetXxl } from "../utils/presets"
 import { options, scale } from "../utils/typography"
@@ -58,19 +57,16 @@ const GridItem = styled(`div`)`
   }
 `
 
-const GridItemImage = styled(Img)`
+const GridItemImage = styled(GatsbyImage)`
   &:hover {
-    div + img {
+    [data-placeholder-image] {
       opacity: 1 !important;
       transition: none !important;
     }
 
-    img + picture > img {
+    [data-main-image] {
       opacity: 0 !important;
-    }
-
-    span: {
-      opacity: 1 !important;
+      transition: none !important;
     }
   }
 `
@@ -93,25 +89,27 @@ const Badge = styled(`span`)`
 const ImageGallery = edges => (
   <OuterContainer>
     <Grid>
-      {edges.images.map((image, index) => (
-        <GridItem key={index}>
-          <GridItemImage
-            fluid={image.node.localFile.childImageSharp.fluid}
-            title={`“${image.node.title}” by ${image.node.credit} (via unsplash.com)`}
-          />
-          <Badge>
-            SVG
-            {` `}
-            {numeral(
-              Buffer.byteLength(
-                image.node.localFile.childImageSharp.fluid.tracedSVG,
-                `utf8`
-              )
-            ).format()}
-            {` `}B
-          </Badge>
-        </GridItem>
-      ))}
+      {edges.images.map(image => {
+        const img = getImage(image.node.localFile)
+        console.log({ image })
+        const fallbackString =
+          img?.placeholder?.fallback ?? img?.backgroundColor
+        const byteLength = Buffer.byteLength(fallbackString, `utf8`)
+        return (
+          <GridItem key={fallbackString}>
+            <GridItemImage
+              image={img}
+              alt={`“${image.node.title}” by ${image.node.credit} (via unsplash.com)`}
+            />
+
+            {byteLength > 1000 ? (
+              <Badge>Placeholder {(byteLength / 1000).toFixed(1)}kB</Badge>
+            ) : (
+              <Badge>Placeholder {byteLength.toFixed(1)}B</Badge>
+            )}
+          </GridItem>
+        )
+      })}
     </Grid>
   </OuterContainer>
 )

diff --git a/examples/using-gatsby-image/src/components/layout.js b/examples/using-gatsby-image/src/components/layout.js
@@ -1,5 +1,5 @@
 import React from "react"
-import Img from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 import styled from "@emotion/styled"
 
 import Navigation from "./navigation"
@@ -32,7 +32,7 @@ const Container = styled(`div`)`
   }
 `
 
-const Image = styled(Img)`
+const Image = styled(GatsbyImage)`
   bottom: 33vh;
   left: ${gutter.default};
   right: ${gutter.default};
@@ -90,7 +90,7 @@ const Layout = ({ children, image, imageTitle, imageBackgroundColor }) => (
   <Container>
     {image && (
       <Image
-        fluid={image}
+        image={image}
         style={{ position: `fixed` }}
         backgroundColor={imageBackgroundColor ? imageBackgroundColor : false}
         title={imageTitle}
@@ -104,27 +104,20 @@ const Layout = ({ children, image, imageTitle, imageBackgroundColor }) => (
         <li>
           See the
           {` `}
-          <a href="https://www.gatsbyjs.com/plugins/gatsby-image/">
-            <code>gatsby-image</code> project README
+          <a href="https://www.gatsbyjs.com/plugins/gatsby-image/?=gatsby-plugin-image">
+            <code>gatsby-plugin-image</code> project README
           </a>
           {` `} for documentation on using the plugin
         </li>
         <li>
           Read the docs:
           <br />
-          <a href="https://www.gatsbyjs.com/docs/using-gatsby-image/">
-            Using gatsby-image to prevent image bloat
+          <a href="https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/">
+            Using the Gatsby Image plugin
           </a>
           <br />
-          <a href="https://www.gatsbyjs.com/plugins/gatsby-plugin-sharp/">
-            Using fragments in gatsby-plugin-sharp
-          </a>
-        </li>
-        <li>
-          View the <code>gatsby-transformer-sharp</code> example at
-          {` `}
-          <a href="https://image-processing.gatsbyjs.org/">
-            <code>image-processing.gatsbyjs.org</code>
+          <a href="https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/">
+            Gatsby Image plugin reference guide
           </a>
         </li>
       </ul>

diff --git a/examples/using-gatsby-image/src/components/navigation.js b/examples/using-gatsby-image/src/components/navigation.js
@@ -1,6 +1,6 @@
 import React from "react"
 import { Link } from "gatsby"
-import { css } from "@emotion/css"
+import { css } from "@emotion/react"
 import styled from "@emotion/styled"
 import { MdLink } from "react-icons/md"
 import { scale, rhythm, options } from "../utils/typography"
@@ -182,13 +182,15 @@ const Navigation = () => (
     </SiteTitle>
     <Nav aria-label="Primary Navigation">
       <NavList>
+        <NavItem to="/dominant-color/" title="Dominant Color" />
         <NavItem to="/blur-up/" title="Blur Up" />
-        <NavItem to="/background-color/" title="Background Color" />
         <NavItem to="/traced-svg/" title="Traced SVG" />
         <NavItem to="/prefer-webp/" title="WebP" />
+        <NavItem to="/static-images/" title="StaticImage" />
+        <NavItem to="/art-direction/" title="Art Direction" />
         <NavListItem>
           <a
-            href="https://www.gatsbyjs.com/plugins/gatsby-image/"
+            href="https://www.gatsbyjs.com/plugins/gatsby-plugin-image/"
             css={css`
               ${linkStyle};
             `}

diff --git a/examples/using-gatsby-image/src/pages/art-direction.css b/examples/using-gatsby-image/src/pages/art-direction.css
@@ -0,0 +1,6 @@
+@media screen and (max-width: 1024px) {
+  .art-directed {
+    width: 400px;
+    height: 300px;
+  }
+}