mirror of
https://github.com/kingomarnajjar/gatsby-starter-netlify-cms.git
synced 2026-07-26 06:37:25 +10:00
frontmatter images
This commit is contained in:
Austin Green
parent
3f6c2637c6
commit
5c7580e655
4 changed files with 174 additions and 48 deletions
|
|
@ -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 }) => {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -17,8 +17,22 @@ export default ({ data }) => {
|
|||
<div className="columns">
|
||||
<div className="column is-10 is-offset-1">
|
||||
<div className="content">
|
||||
<h2 className="has-text-weight-bold is-size-1">{frontmatter.title}</h2>
|
||||
<img src={frontmatter.image} alt="" />
|
||||
<div
|
||||
className="full-width-image-container margin-top-0"
|
||||
style={{ backgroundImage: `url(${frontmatter.image.childImageSharp.resolutions.src})` }}
|
||||
>
|
||||
<h2
|
||||
className="has-text-weight-bold is-size-1"
|
||||
style={{
|
||||
boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
|
||||
backgroundColor: '#f40',
|
||||
color: 'white',
|
||||
padding: '1rem'
|
||||
}}
|
||||
>
|
||||
{frontmatter.title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="columns">
|
||||
<div className="column is-7">
|
||||
<h3 className="has-text-weight-semibold is-size-2">{frontmatter.heading}</h3>
|
||||
|
|
@ -32,23 +46,44 @@ export default ({ data }) => {
|
|||
<p>{frontmatter.main.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tile is-vertical is-ancestor">
|
||||
<div className="tile is-parent">
|
||||
<div className="tile is-child is-6">
|
||||
<img src={grid1} alt="" />
|
||||
<div className="tile is-ancestor">
|
||||
<div className="tile is-vertical">
|
||||
<div className="tile">
|
||||
<div className="tile is-parent is-vertical">
|
||||
<article className="tile is-child">
|
||||
<img
|
||||
style={{ borderRadius: '5px' }}
|
||||
src={frontmatter.main.image1.image.childImageSharp.resolutions.src}
|
||||
alt=""
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
<div className="tile is-parent">
|
||||
<article className="tile is-child">
|
||||
<img
|
||||
style={{ borderRadius: '5px' }}
|
||||
src={frontmatter.main.image2.image.childImageSharp.resolutions.src}
|
||||
alt=""
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tile is-child is-6">
|
||||
<img src={grid2} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="tile is-parent">
|
||||
<div className="tile is-child">
|
||||
<img src={grid3} alt="" />
|
||||
<div className="tile is-parent">
|
||||
<article className="tile is-child">
|
||||
<img
|
||||
style={{ borderRadius: '5px' }}
|
||||
src={frontmatter.main.image3.image.childImageSharp.resolutions.src}
|
||||
alt=""
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Testimonials testimonials={frontmatter.testimonials} />
|
||||
<div className="full-width-image-container" style={{ backgroundImage: `url(${fullWidth})` }} />
|
||||
<div
|
||||
className="full-width-image-container"
|
||||
style={{ backgroundImage: `url(${frontmatter.full_image.childImageSharp.resolutions.src})` }}
|
||||
/>
|
||||
<h2 className="has-text-weight-semibold is-size-2">{frontmatter.pricing.heading}</h2>
|
||||
<p className="is-size-5">{frontmatter.pricing.description}</p>
|
||||
<Pricing data={frontmatter.pricing.plans} />
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue