Handling WordPress Post Image on GatsbyJS

On previous article you have seen, “how to get dynamic pages/routes with GatsbyJS”.

Part Two

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.

Cat Gun GIF - Find & Share on GIPHY

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 Home

On 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.

OENOFOROS GIF - Find & Share on GIPHY
Cheers
0 0 vote
Article Rating