Covers

Before adding a cover, make sure that you followed the instructions for how to use images.

Usage in Google Docs

To add a cover, you need to add an image to your first page document header.

Add an header: Insert → Header and Footers → Header
Check "Different first page"
Add an image in the header

google docs image 4af67596 ac98 50fd be29 53038070899e

Usage in Gatsby

In addition to gatsby-plugin-sharp and gatsby-transformer-sharp like we see in how to use images, you will need to install gatsby-image plugin to display cover.

yarn add gatsby-image

Then you can query cover using a Sharp fragment and use gatsby-image to display it.

import React from "react"
import Img from "gatsby-image"

export default ({
 data: {
   page: {cover},
 },
}) => {
 return cover && (
   <Img 
     fluid={cover.image.childImageSharp.fluid} 
     title={cover.title} 
     alt={cover.alt} 
   />
  )
}

export const pageQuery = graphql`
 query Page($path: String!) {
   page: googleDocs(slug: {eq: $path}) {
     cover {
       title
       alt
       image {
         childImageSharp {
           fluid(maxWidth: 500, quality: 100) {
             ...GatsbyImageSharpFluid
           }
         }
       }
     }
   }
 }
`