Add plugins to create responsive images

gatsby-config.js

@@ -12,7 +12,9 @@ module.exports = {
         protocol: 'https',
         hostingWPCOM: false,
         useACF: true,
-      }
+      },
-    }
+    },
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-sharp',
   ],
 }

package.json

@@ -8,7 +8,9 @@
     "gatsby-link": "^1.6.40",
     "gatsby-plugin-netlify": "^1.0.21",
     "gatsby-plugin-react-helmet": "^2.0.10",
+    "gatsby-plugin-sharp": "^1.6.48",
     "gatsby-source-wordpress": "^2.0.93",
+    "gatsby-transformer-sharp": "^1.6.27",
     "react-helmet": "^5.2.0",
     "slideout": "^1.0.1"
   },

src/templates/blog.js

@@ -13,7 +13,7 @@ class Blog extends Component {
           <Card
             url={`blog/${node.slug}`}
             title={node.title}
-            postId={node.slug}
+            postId={node.id}
             date={node.date}
             excerpt={node.excerpt}
           />
@@ -31,6 +31,7 @@ export const query = graphql`
           id
           title
           excerpt
+          status
           slug
           date(formatString: "MMMM DD, YYYY")
         }