[part-10] Added frontmatter images for the designs

- Added "uploads" folder to the filesystem sources
- Added image field to the NetlifyCMS config
- Removed general "public_folder" config and added it to collection itself to manually control image relative paths
- Added sample images to the "design"s
- Updated GraphQL query in the design detail template and added markup to represent images

gatsby-config.js

@@ -2,6 +2,13 @@
 
 module.exports = {
   plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/uploads/`,
+        name: `uploads`,
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

src/content/designs/hello-from-design-01.md

@@ -2,4 +2,5 @@
 contentKey: design
 title: hello from design 01
 description: design 01 description
+image: ../../../uploads/irene-kredenets-tcvh_bwhtrc-unsplash.jpg
 ---

src/content/designs/hello-from-design-02.md

@@ -2,4 +2,5 @@
 contentKey: design
 title: hello from design 02
 description: design 02 description
+image: ../../../uploads/sarah-dorweiler-gupitdbdre4-unsplash.jpg
 ---

src/templates/design-template.js

@@ -14,6 +14,10 @@ const DesignTemplate = (props) => {
         <h1>Design Content Template</h1>
         <div>{props.data.markdownRemark.frontmatter.title}</div>
         <div>{props.data.markdownRemark.frontmatter.description}</div>
+        <img
+          src={props.data.markdownRemark.frontmatter.image.publicURL}
+          alt={"Please always fill the alternative text attributes!"}
+        />
       </div>
     </Layout>
   )
@@ -28,6 +32,9 @@ export const query = graphql`
       frontmatter {
         title
         description
+        image {
+          publicURL
+        }
       }
     }
   }

static/admin/config.yml

@@ -8,7 +8,6 @@ backend:
 local_backend: true
 
 media_folder: uploads
-public_folder: /uploads
 
 slug:
   encoding: "ascii"
@@ -28,8 +27,10 @@ collections:
   - name: designs
     label: Designs
     folder: "src/content/designs"
+    public_folder: ../../../uploads
     create: true
     fields:
       - {label: "Content Key", name: "contentKey", widget: "hidden", default: "design", required: true}
       - {label: "Title", name: "title", widget: "string"}
       - {label: "Description", name: "description", widget: "text"}
+      - {label: "Image", name: "image", widget: "image", allow_multiple: false, choose_url: false}