How to use a local image for post cover?

[ZacharyChim]

Hi, how can I use a local image in the post folder as the cover of the post? I tried to put the file name in the cover field, but it didn't show up.

I did some research and thinking this might relate to(should the cover image be treated by gatsby-plugin-sharp?): decaporg/decap-cms#325

[HyperSprite]

These should just work.
If the image is in the same folder as the .md file, the path should look something like this:
cover: "./my-cool-image.jpg"

[haysclark]

Currently, local cover images are not supported by Gatsby-Starter-Casper. Images in the body of a Markdown file ARE supported because internally Gatsby is converting the Markdown back into HTML and it handles passing the images file. The cover data is in the frontmatter data, and Gatsby dynamically creates the GraphQL objects. There isn't an easy way to add custom object types to GraphQL in Gatsby. Both the cover images and also the author data could really utilize this functionality in Gatsby. As a workaround, you CAN hack support, by modifying these files, but I believe that ALL your covers must be local images.

Workaround

Install gatsby-image with npm install -s gatsby-image

Update MainHeader.jsx with this code

import React from "react";
import classNames from "classnames";
import "./MainHeader.css";

const hasImageSharpCover = cover => cover && cover.childImageSharp;

const hasCover = cover => cover && (hasImageSharpCover(cover) || typeof cover === "string");

const getCoverUrl = cover => {
  if (hasImageSharpCover(cover)) {
    return cover.childImageSharp.sizes.src;
  }
  return cover;
};

const getStyle = cover => {
  if (hasCover(cover)) {
    return { backgroundImage: `url("${getCoverUrl(cover)}")` };
  }
  return null;
};

class MainHeader extends React.Component {
  render() {
    const { children, cover } = this.props;
    const classes = classNames("main-header", this.props.className, {
      "no-cover": !cover
    });

    return (
      <header className={classes} style={getStyle(cover)}>
        {children}
      </header>
    );
  }
}

export default MainHeader;

Last of all, update the GraphQL pageQuery's that provide cover data to various JSX components that render the cover. The new cover GraphQL call pulls the needed ImageSharp data. You can tweak the maxWidth property.

/* eslint no-undef: "off" */
export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!, $next: String, $prev: String) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      timeToRead
      excerpt
      frontmatter {
        title
        cover {
          id
          childImageSharp {
            id
            sizes(maxWidth: 2000) {
              # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
              ...GatsbyImageSharpSizes_noBase64
            }
          }
        }
        date
        category
        tags
        author
      }
      fields {
        slug
      }
    }
    # prev post data
    prev: markdownRemark(fields: { slug: { eq: $prev } }) {
      excerpt(pruneLength: 112)
      frontmatter {
        title
        cover {
          id
          childImageSharp {
            id
            sizes(maxWidth: 2000) {
              # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
              ...GatsbyImageSharpSizes_noBase64
            }
          }
        }
        date
      }
      fields {
        slug
      }
    }
    # next post data
    next: markdownRemark(fields: { slug: { eq: $next } }) {
      excerpt(pruneLength: 112)
      frontmatter {
        title
        cover {
          id
          childImageSharp {
            id
            sizes(maxWidth: 2000) {
              # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
              ...GatsbyImageSharpSizes_noBase64
            }
          }
        }
        date
      }
      fields {
        slug
      }
    }
    # authors
    authors: allAuthorsJson {
      edges {
        node {
          id
          name
          image
          url
          bio
        }
      }
    }
  }
`;

This solution is not checked in because it's so crude. If anyone has an alternative I would love to see a PR.

[hankolsen]

@ZacharyChim not sure if it would be of any help, but you could to put the images in public/images and just reference them from the blog post .md file like:

---
title: "Birch in the Roses"
cover: "/images/roses-cover-photo.jpg"
date: "2017-03-23"
category: "tech"
tags:
    - tag
---
# Domos primus caelum taedia