0.MD

Using WordPress Featured Images In Gatsby

GraphQL Queries For WordPress Posts With Featured Image

query PostsWithFeaturedImage {
  allWordpressPost {
    nodes {
      title
      featured_media {
        title
        caption
        description
        alt_text
        source_url 
      }
    }
  }
}

The key description has HTML you could print to the DOM to have an image tag. Or source_url and alt_text could be used with an image tag.

Use sharp to create fixed arguments

query PostsWithFeaturedImage {
  allWordpressPost {
    nodes {
      title
      featured_media {
        title
        caption
        alt_text
        source_url
        localFile {
          childImageSharp {
            fixed(width: 500, height: 300) {
              src
              srcSet,
              srcSetWebp
            }
          }
        }
      }
    }
  }
}

Final Query with everything I need from posts:

{
  allWordpressPost {
    nodes {
      title
      featured_media {
        title
        caption
        alt_text
        source_url
        localFile {
          childImageSharp {
            fixed(width: 500, height: 300) {
              src
              srcSet
              srcSetWebp
              height
              width
              base64
              tracedSVG
              srcWebp
              srcSetWebp
            }
          }
        }
      }
    }
  }
}

export const pageQuery = graphql`
  fragment PostListFields on wordpress__POST {
    id
    title
    excerpt
    author {
      name
      slug
      avatar_urls {
        wordpress_48
      }
    }
    date(formatString: "MMMM DD, YYYY")
    slug
    featured_media {
      title
      caption
      alt_text
      source_url
      localFile {
        childImageSharp {
          fixed(width: 500, height: 300) {
            src
            srcSet
            srcSetWebp
            height
            width
            base64
            tracedSVG
            srcWebp
            srcSetWebp
          }
        }
      }
    }
  }
`

Fixed and fluid:

{
  allWordpressPost(limit: 1) {
    nodes {
      title
      date(formatString: "MMMM DD, YYYY")
      featured_media {
        localFile {
          childImageSharp {
            fluid(maxWidth: 1200, maxHeight: 300) {
              src
              sizes
              srcSet
              srcWebp
              srcSetWebp
              tracedSVG
              aspectRatio
              presentationWidth
              presentationHeight
              base64
            }
            fixed(width: 500, height: 300) {
              src
              srcSet
              srcSetWebp
              height
              width
              base64
              tracedSVG
              srcWebp
              srcSetWebp
            }
          }
        }
      }
    }
  }
}

deploy.md

• Create Github Repo
• Render.com
  • Allow repo
  • Create New Web Service
  • Defaults will build site and auto-deploy

Featured-fixed.js

import Img from 'gatsby-image'
import React from 'react'
export default function Featured({ post }) {
	if (
		!post.hasOwnProperty('featured_media') ||
		null === post.featured_media
	) {
		return <React.Fragment />
	}
	const { fixed } = post.featured_media.localFile.childImageSharp
	return (
		<Img
			className={'-full-width-image-container'}
			src={post.featured_media.source_url}
			alt={post.featured_media.alt_text}
			title={post.featured_media.title}
			fixed={fixed}
			objectFit="cover"
			objectPosition="100% 50%"
		/>
	)
}

Featured-img.jsx

import React from 'react'
function Featured({post}){

  if( ! post.hasOwnProperty('featured_media') || null === post.featured_media) {
    return <React.Fragment />
  }

  return <img 
    src={post.featured_media.source_url} 
    alt={post.featured_media.alt_text} 
    title={post.featured_media.title}
  />
}

Layout.js

import React, { Fragment } from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import Helmet from 'react-helmet'
import './all.sass'


export default function Layout({ children, title }) {
	const { site } = useStaticQuery(graphql`
		query HeaderQuery {
			site {
				siteMetadata {
					description
				}
			}
		}
	`)
	const { description } = site.siteMetadata
	return (
		<Fragment>
			<Helmet
				title={title}
				meta={[{ name: 'description', content: description }]}
			>
				<html lang="en" />
			</Helmet>
			      <nav>...</nav>
			      <main role="main">{children}</main>
		</Fragment>
	)
}