From 5c7580e655b8311ca1fb5c19f25ed363a8386c64 Mon Sep 17 00:00:00 2001 From: Austin Green Date: Fri, 24 Nov 2017 14:27:20 -0500 Subject: [PATCH] frontmatter images --- gatsby-node.js | 67 ++++++++++++++++-- src/layouts/all.sass | 7 +- src/pages/product/product.md | 20 +++--- src/templates/product-page.js | 128 ++++++++++++++++++++++++++-------- 4 files changed, 174 insertions(+), 48 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 6581868..f8aef24 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -16,12 +16,30 @@ exports.createPages = ({ boundActionCreators, graphql }) => { path date title - image + image { + childImageSharp { + resolutions(width: 1400) { + width + height + src + srcSet + } + } + } heading description intro { blurbs { - image + image { + childImageSharp { + resolutions(width: 400) { + width + height + src + srcSet + } + } + } text } heading @@ -32,22 +50,58 @@ exports.createPages = ({ boundActionCreators, graphql }) => { description image1 { alt - image + image { + childImageSharp { + resolutions(width: 400) { + width + height + src + srcSet + } + } + } } image2 { alt - image + image { + childImageSharp { + resolutions(width: 400) { + width + height + src + srcSet + } + } + } } image3 { alt - image + image { + childImageSharp { + resolutions(width: 400) { + width + height + src + srcSet + } + } + } } } testimonials { author quote } - full_image + full_image { + childImageSharp { + resolutions(width: 400) { + width + height + src + srcSet + } + } + } pricing { heading description @@ -65,6 +119,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => { } `).then(result => { if (result.errors) { + console.log(result.errors); return Promise.reject(result.errors); } result.data.allMarkdownRemark.edges.forEach(({ node }) => { diff --git a/src/layouts/all.sass b/src/layouts/all.sass index cf93585..878ce97 100644 --- a/src/layouts/all.sass +++ b/src/layouts/all.sass @@ -14,9 +14,14 @@ $primary-invert: $kaldi-red-invert position: relative left: 50% right: 50% - margin: 5em -50vw + margin: 5em -50vw background-size: cover background-position: bottom + display: flex + justify-content: center + align-items: center +.margin-top-0 + margin-top: 0 !important @import "~bulma" diff --git a/src/pages/product/product.md b/src/pages/product/product.md index a250732..35d86d5 100644 --- a/src/pages/product/product.md +++ b/src/pages/product/product.md @@ -2,7 +2,7 @@ templateKey: 'product-page' path: /products title: Our Coffee -image: /img/products/jumbotron.jpg +image: ./img/products/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.svg + - image: ./img/illustrations/coffee.svg 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.svg + - image: ./img/illustrations/coffee-gear.svg 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.svg + - image: ./img/illustrations/tutorials.svg 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.svg + - image: ./img/illustrations/meeting-space.svg 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/products-grid3.jpg image2: alt: A green cup of a coffee on a wooden table - image: /img/products/products-grid2.jpg + image: ./img/products/products-grid2.jpg image3: alt: Coffee beans - image: /img/products/products-grid1.jpg + image: ./img/products/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/products-full-width.jpg pricing: heading: Monthly subscriptions description: >- @@ -84,7 +84,7 @@ pricing: - One or two varieties of beans" plan: Small price: '50' - - description: 'Great for avid drinkers, java-nsoving couples and bigger crowds' + - description: 'Great for avid drinkers, java-loving couples and bigger crowds' items: - 6 lbs of coffee per month - Green or roasted beans diff --git a/src/templates/product-page.js b/src/templates/product-page.js index e529c57..84c287d 100644 --- a/src/templates/product-page.js +++ b/src/templates/product-page.js @@ -17,8 +17,22 @@ export default ({ data }) => {
-

{frontmatter.title}

- +
+

+ {frontmatter.title} +

+

{frontmatter.heading}

@@ -32,23 +46,44 @@ export default ({ data }) => {

{frontmatter.main.description}

-
-
-
- +
+
+
+
+
+ +
+
+
+
+ +
+
-
- -
-
-
-
- +
+
+ +
-
+

{frontmatter.pricing.heading}

{frontmatter.pricing.description}

@@ -67,12 +102,30 @@ export const productPageQuery = graphql` frontmatter { title path - image + image { + childImageSharp { + resolutions(width: 1400) { + width + height + src + srcSet + } + } + } heading description intro { blurbs { - image + image { + childImageSharp { + resolutions(width: 400) { + width + height + src + srcSet + } + } + } text } heading @@ -83,22 +136,46 @@ export const productPageQuery = graphql` description image1 { alt - image + image { + childImageSharp { + resolutions(width: 700) { + src + } + } + } } image2 { alt - image + image { + childImageSharp { + resolutions(width: 700) { + src + } + } + } } image3 { alt - image + image { + childImageSharp { + resolutions(width: 1400) { + src + } + } + } } } testimonials { author quote } - full_image + full_image { + childImageSharp { + resolutions(width: 1400) { + src + } + } + } pricing { heading description @@ -111,16 +188,5 @@ export const productPageQuery = graphql` } } } - images: allImageSharp { - edges { - node { - ... on ImageSharp { - resize(width: 125, height: 125, rotate: 180) { - src - } - } - } - } - } } `;