Ecocentrixco Website

Adding Images

1. config.yml

- label: New Image
  name: newImage
  widget: image

2. gatsby-node.js

In the onCreateNode function, pull the property off the frontmatter data like so:

  const { ..., newImage } = frontmatter

Then, add the condition for adjusting the image like so:

if (newImage) {
  node.frontmatter.newImage = adjust(newImage)
}

Note: It is slightly different if the image is nested inside a list. In that case, get the parent list field off frontmatter...

  const { ..., newList } = frontmatter

Then, add the condition for adjusting the image like so:

if (newList) {
  node.frontmatter.newList.forEach(listItem => {
    listItem.newImage = adjust(listItem.newImage)
  })
}

3. yourpage.md

Set the image property on the page to the url of the image's location, like so:

newImage: /img/awesome-pic.jpg

4. yourtemplate.js

Now comes the tedious parts. First, add the image to the template's GraphQL code.

• sizes: 'fluid' or responsive image sizes, good for edge-to-edge images
• resolutions: 'fixed' or set height and/or width use cases

newImage {
  childImageSharp {
    sizes(maxWidth: 1400) {
      ...GatsbyImageSharpSizes
    }
  }
}

Then, you have to add the property to the Template's Proptypes:

IndexPageTemplate.propTypes = {
  newImage: PropTypes.object
}

Next, set the props from graphQL data onto the Template Component:

const AwesomePage = ({ data }) => {
  const { newImage } = data.markdownRemark.frontmatter

  return <AwesomePageTemplate newImage={newImage} />
}

To make it nicer to work with in our JSX, extract the prop from the Template's props

render() {
  const { newImage } = this.props
  ...
}

Now, at last, you can use the image in the Gatsby Images!

<Img sizes={newImage.childImageSharp.sizes} />

TODO

• Convert whole site to GatsbyJS from Gulp/jQuery
• Configure Netlify CMS
  • Home Page
  • About Us Page
  • Certifications Page
  • FAQ Page
  • Contact Us Page
  • Services Page
    • List of projects
    • Restore Google maps
    • Filter list
• Make Contact block and map reusable component
• Fix color scheme and layout
• Replace header video with high quality photo
• Make mobile friendly
• Host on Netlify