Gatsby posts with no featured image

Posted: 06 November, 2018 Category: frontend Tagged: gatsby

Ugh...

Just ran into https://github.com/gatsbyjs/gatsby/issues/8323 and I am not a happy bunny. workaround: css and the brute force !important rule... for one piddly little image.

Another thing I had to workaround over on my other site: posts without cover images. Sometimes you just want a bare post without an image. I couldn't wrangle it in the gatsby markdown-to-graphql-to-react-component pipeline. My workaround:

  1. create a "no-image available" image and add to the site content files along with your other images. Worst case, this'll show. However:
  2. In your post template, detect this image once it's pulled from your gatsby-image output (in your graphql query result payload).
  3. Don't spit it out onto the page. Supress it!
    // where 'post' is a suitable node in your markDownRemark payload holding your cover image (named 'cover', here):
    const hasImage = post.cover && (post.cover.name !== 'noimage');
    ...
    ...

And then later on, where you'd normally spit out the cover/featured image:

  {(hasImage)?(
    <Img fluid={post.cover.childImageSharp.fluid} />
  ):null}