Add media library support

gatsby-node.js

@@ -16,30 +16,12 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
               path
               date
               title
-              image {
-                childImageSharp {
-                  resolutions(width: 1400) {
-                    width
-                    height
-                    src
-                    srcSet
-                  }
-                }
-              }
+              image
               heading
               description
               intro {
                 blurbs {
-                  image {
-                    childImageSharp {
-                      resolutions(width: 220) {
-                        width
-                        height
-                        src
-                        srcSet
-                      }
-                    }
-                  }
+                  image
                   text
                 }
                 heading
@@ -50,58 +32,22 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
                 description
                 image1 {
                   alt
-                  image {
-                    childImageSharp {
-                      resolutions(width: 400) {
-                        width
-                        height
-                        src
-                        srcSet
-                      }
-                    }
-                  }
+                  image
                 }
                 image2 {
                   alt
-                  image {
-                    childImageSharp {
-                      resolutions(width: 400) {
-                        width
-                        height
-                        src
-                        srcSet
-                      }
-                    }
-                  }
+                  image
                 }
                 image3 {
                   alt
-                  image {
-                    childImageSharp {
-                      resolutions(width: 400) {
-                        width
-                        height
-                        src
-                        srcSet
-                      }
-                    }
-                  }
+                  image
                 }
               }
               testimonials {
                 author
                 quote
               }
-              full_image {
-                childImageSharp {
-                  resolutions(width: 400) {
-                    width
-                    height
-                    src
-                    srcSet
-                  }
-                }
-              }
+              full_image
               pricing {
                 heading
                 description

src/components/Features.js

@@ -3,10 +3,10 @@ import React from 'react';
 const FeatureGrid = ({ gridItems }) => (
   <div className="columns is-multiline">
     {gridItems.map(item => (
-      <div key={item.image.childImageSharp.resolutions.src} className="column is-6">
+      <div key={item.image} className="column is-6">
         <section className="section">
           <p className="has-text-centered">
-            <img alt="" src={item.image.childImageSharp.resolutions.src} />
+            <img alt="" src={item.image} />
           </p>
           <p>{item.text}</p>
         </section>

src/pages/product/product.md

@@ -2,7 +2,7 @@
 templateKey: 'product-page'
 path: /products
 title: Our Coffee
-image: ./img/products/jumbotron.jpg
+image: /img/jumbotron.jpg
 heading: What we offer
 description: >-
   Kaldi is the ultimate spot for coffee lovers who want to learn about their
@@ -11,27 +11,27 @@ description: >-
   anyone.
 intro:
   blurbs:
-    - image: ./img/illustrations/coffee.png
+    - image: /img/coffee.png
       text: >
         We sell green and roasted coffee beans that are sourced directly from
         independent farmers and farm cooperatives. We’re proud to offer a
         variety of coffee beans grown with great care for the environment and
         local communities. Check our post or contact us directly for current
         availability.
-    - image: ./img/illustrations/coffee-gear.png
+    - image: /img/coffee-gear.png
       text: >
         We offer a small, but carefully curated selection of brewing gear and
         tools for every taste and experience level. No matter if you roast your
         own beans or just bought your first french press, you’ll find a gadget
         to fall in love with in our shop.
-    - image: ./img/illustrations/tutorials.png
+    - image: /img/tutorials.png
       text: >
         Love a great cup of coffee, but never knew how to make one? Bought a
         fancy new Chemex but have no clue how to use it? Don't worry, we’re here
         to help. You can schedule a custom 1-on-1 consultation with our baristas
         to learn anything you want to know about coffee roasting and brewing.
         Email us or call the store for details.
-    - image: ./img/illustrations/meeting-space.png
+    - image: /img/meeting-space.png
       text: >
         We believe that good coffee has the power to bring people together.
         That’s why we decided to turn a corner of our shop into a cozy meeting
@@ -53,13 +53,13 @@ main:
     optimal for the plants, farmers and the local environment.
   image1:
     alt: A close-up of a paper filter filled with ground coffee
-    image: ./img/products/products-grid3.jpg
+    image: /img/products-grid3.jpg
   image2:
     alt: A green cup of a coffee on a wooden table
-    image: ./img/products/products-grid2.jpg
+    image: /img/products-grid2.jpg
   image3:
     alt: Coffee beans
-    image: ./img/products/products-grid1.jpg
+    image: /img/products-grid1.jpg
 testimonials:
   - author: Elisabeth Kaurismäki
     quote: >-
@@ -69,7 +69,7 @@ testimonials:
     quote: >-
       Kaldi is the place to go if you want the best quality coffee. I love their
       stance on empowering farmers and transparency.
-full_image: ./img/products/products-full-width.jpg
+full_image: /img/products-full-width.jpg
 pricing:
   heading: Monthly subscriptions
   description: >-

src/templates/product-page.js

@@ -2,10 +2,6 @@ import React from 'react';
 import Features from '../components/Features';
 import Testimonials from '../components/Testimonials';
 import Pricing from '../components/Pricing';
-import grid1 from '../pages/product/img/products/products-grid1.jpg';
-import grid2 from '../pages/product/img/products/products-grid2.jpg';
-import grid3 from '../pages/product/img/products/products-grid3.jpg';
-import fullWidth from '../pages/product/img/products/products-full-width.jpg';
 
 export default ({ data }) => {
   console.log(data);
@@ -19,7 +15,7 @@ export default ({ data }) => {
               <div className="content">
                 <div
                   className="full-width-image-container margin-top-0"
-                  style={{ backgroundImage: `url(${frontmatter.image.childImageSharp.resolutions.src})` }}
+                  style={{ backgroundImage: `url(${frontmatter.image})` }}
                 >
                   <h2
                     className="has-text-weight-bold is-size-1"
@@ -53,7 +49,7 @@ export default ({ data }) => {
                         <article className="tile is-child">
                           <img
                             style={{ borderRadius: '5px' }}
-                            src={frontmatter.main.image1.image.childImageSharp.resolutions.src}
+                            src={frontmatter.main.image1.image}
                             alt=""
                           />
                         </article>
@@ -62,7 +58,7 @@ export default ({ data }) => {
                         <article className="tile is-child">
                           <img
                             style={{ borderRadius: '5px' }}
-                            src={frontmatter.main.image2.image.childImageSharp.resolutions.src}
+                            src={frontmatter.main.image2.image}
                             alt=""
                           />
                         </article>
@@ -72,7 +68,7 @@ export default ({ data }) => {
                       <article className="tile is-child">
                         <img
                           style={{ borderRadius: '5px' }}
-                          src={frontmatter.main.image3.image.childImageSharp.resolutions.src}
+                          src={frontmatter.main.image3.image}
                           alt=""
                         />
                       </article>
@@ -82,7 +78,7 @@ export default ({ data }) => {
                 <Testimonials testimonials={frontmatter.testimonials} />
                 <div
                   className="full-width-image-container"
-                  style={{ backgroundImage: `url(${frontmatter.full_image.childImageSharp.resolutions.src})` }}
+                  style={{ backgroundImage: `url(${frontmatter.full_image})` }}
                 />
                 <h2 className="has-text-weight-semibold is-size-2">{frontmatter.pricing.heading}</h2>
                 <p className="is-size-5">{frontmatter.pricing.description}</p>
@@ -102,30 +98,12 @@ export const productPageQuery = graphql`
       frontmatter {
         title
         path
-        image {
-          childImageSharp {
-            resolutions(width: 1400) {
-              width
-              height
-              src
-              srcSet
-            }
-          }
-        }
+        image
         heading
         description
         intro {
           blurbs {
-            image {
-              childImageSharp {
-                resolutions(width: 220) {
-                  width
-                  height
-                  src
-                  srcSet
-                }
-              }
-            }
+            image
             text
           }
           heading
@@ -136,46 +114,22 @@ export const productPageQuery = graphql`
           description
           image1 {
             alt
-            image {
-              childImageSharp {
-                resolutions(width: 700) {
-                  src
-                }
-              }
-            }
+            image
           }
           image2 {
             alt
-            image {
-              childImageSharp {
-                resolutions(width: 700) {
-                  src
-                }
-              }
-            }
+            image
           }
           image3 {
             alt
-            image {
-              childImageSharp {
-                resolutions(width: 1400) {
-                  src
-                }
-              }
-            }
+            image
           }
         }
         testimonials {
           author
           quote
         }
-        full_image {
-          childImageSharp {
-            resolutions(width: 1400) {
-              src
-            }
-          }
-        }
+        full_image
         pricing {
           heading
           description

static/admin/config.yml

@@ -2,8 +2,8 @@ backend:
   name: git-gateway
   branch: master
 
-media_folder: "/src/pages/blog/img"
-public_folder: "img"
+media_folder: static/img
+public_folder: img
 
 collections:
   - name: "blog"
@@ -34,6 +34,7 @@ collections:
         name: "products"
         fields:
           - {label: "Template Key", name: "templateKey", widget: "hidden", default: "product-page"}
+          - {label: "Path", name: "path", widget: "hidden", default: "/products"}
           - {label: Title, name: title, widget: string}
           - {label: Image, name: image, widget: image}
           - {label: Heading, name: heading, widget: string}