On previous article you have seen, “how to get dynamic pages/routes with GatsbyJS”.
In this article, I will show “how to handle WordPress post images with GatsbyJS”. I will fetch all post featured images from my WordPress site and then render it on my headless WordPress site.
At first install 3 plugins that will handle post images…npm install --save gatsby-transformer-sharp gatsby-plugin-sharp gatsby-image
gatsby-transformer-sharp Creates ImageSharp nodes from image types that are supported by the Sharp image processing library and provides fields in their GraphQL types for processing your images in a variety of ways including resizing, cropping, and creating responsive images.. It uses gatsby-plugin-sharp under the hood, so we also need to install it.gatsby-image is a React component designed to work seamlessly with Gatsby’s GraphQL queries.
After installing these node modules now lets add them in gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-source-wordpress`,
options: {
baseUrl: `localhost/wptest`, // site url without http/https
protocol: `http`,
hostingWPCOM: false,
useACF: false,
},
},
"gatsby-transformer-sharp",
"gatsby-plugin-sharp",
]
}Now Replace your index.js query with this query. Here I am fetching post images(500×500 size). …GatsbyImageSharpFixed_withWebp_tracedSVG it’s a sort form for image query available for those 2 plugins, so it will not work on Graphql editor, but it will work in your code. On your Graphql editor click on fixed and check all available arguments.
export const query = graphql`
{
allWordpressPost {
nodes {
wordpress_id
slug
title
featured_media {
localFile {
childImageSharp {
fixed(width: 500, height: 500) {
...GatsbyImageSharpFixed_withWebp_tracedSVG
}
}
}
}
}
}
}
`Now let’s show these data on the frontend… I’m using Img component, from gatsby-image
import React from "react"
import { graphql, Link } from 'gatsby'
import Img from "gatsby-image"
const Home = ({data}) => {
const posts = data.allWordpressPost.nodes
return(
<div>
{
posts.map(post => {
// console.log(post)
const featuredImage = post.featured_media == null ? null : post.featured_media.localFile.childImageSharp.fixed
return(
<div className="card" key={post.wordpress_id}>
{
(() => {
if (featuredImage != null) {
return <Img fixed={featuredImage} />
} else return null
})()
}
<h2>
<Link to={post.slug}>{post.title} | {post.slug}</Link>
</h2>
</div>
)
})
}
</div>
)
}
export const query = graphql`
{
allWordpressPost {
nodes {
wordpress_id
slug
title
featured_media {
localFile {
childImageSharp {
fixed(width: 500, height: 500) {
...GatsbyImageSharpFixed_withWebp_tracedSVG
}
}
}
}
}
}
}
`
export default HomeOn line 19, I am checking does the post has a featured image, if yes then show the image otherwise return null. Check the frontend you will see 500×500 featured image.
