Fix query for blog posts and featured image, add img package

package.json

@@ -5,6 +5,7 @@
   "author": "Saburly <info@saburly.com>",
   "dependencies": {
     "gatsby": "^1.9.247",
+    "gatsby-image": "^1.0.54",
     "gatsby-link": "^1.6.40",
     "gatsby-plugin-netlify": "^1.0.21",
     "gatsby-plugin-react-helmet": "^2.0.10",

src/components/Card.js

@@ -1,15 +1,17 @@
 import React from 'react'
 import Link from 'gatsby-link'
+import Img from 'gatsby-image'
 
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <article
+  <article className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
-    key={props.postId}
-    className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover:shadow-lg"
-  >
     <Link to={props.url}>
-      <img className="w-full" src={ImgSprint} alt="Sprint Work" />
+      {props.image ? (
+        <Img resolutions={props.image} />
+      ) : (
+        <img className="w-full" src={ImgSprint} alt="Sprint Work" />
+      )}
     </Link>
     <div className="px-6 py-4">
       <div className="font-bold text-xl mb-2">

src/templates/blog.js

@@ -7,15 +7,19 @@ class Blog extends Component {
   render() {
     const data = this.props.data
     return (
-      <div>
+      <div className="flex">
-        <h1>Blog Posts</h1>
         {data.allWordpressPost.edges.map(({ node }) => (
           <Card
+            key={node.id}
             url={`blog/${node.slug}`}
             title={node.title}
-            postId={node.id}
             date={node.date}
             excerpt={node.excerpt}
+            image={
+              node.featured_media
+                ? node.featured_media.localFile.childImageSharp.resolutions
+                : undefined
+            }
           />
         ))}
       </div>

yarn.lock

@@ -3729,6 +3729,13 @@ gatsby-cli@^1.1.58:
     yargs "^11.1.0"
     yurnalist "^0.2.1"
 
+gatsby-image@^1.0.54:
+  version "1.0.54"
+  resolved "https://registry.yarnpkg.com/gatsby-image/-/gatsby-image-1.0.54.tgz#84ab7d723e48a031eb698d8552ad331943d369fd"
+  dependencies:
+    babel-runtime "^6.26.0"
+    prop-types "^15.6.0"
+
 gatsby-link@^1.6.40, gatsby-link@^1.6.45:
   version "1.6.45"
   resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.45.tgz#6a28d377cd9eee4bf5454be5a9292550b5d1d929"
@@ -7392,7 +7399,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies: