Source plugins don't process links and images in blocks of text (i.e. post contents) which makes sourcing from CMS such as WordPress problematic. This plugin solves that for content sourced from WordPress using GraphQL by doing the following:
- Downloads images and other files to Gatsby
static
folder - Replaces
<a>
linking to site's pages with<Link>
component - Replaces
<img>
with Gatsby<Img>
component leveraging all of the gatsby-image rich functionality
This plugin processes WordPress content sourced with GraphQL. Therefore you must use gatsby-source-graphql
and your source WordPress site must use WPGraphQL.
Attention: does not work with gatsby-source-wordpress
.
yarn add gatsby-wpgraphql-inline-images
{
resolve: 'gatsby-wpgraphql-inline-images',
options: {
wordPressUrl: 'https://mydomain.com/',
uploadsUrl: 'https://mydomain.com/wp-content/uploads/',
processPostTypes: ['Page', 'Post', 'CustomPost'],
graphqlTypeName: 'WPGraphQL',
httpHeaders: {
Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
}
},
},
wordPressUrl
and uploadsUrl
contain URLs of the source WordPress site and it's uploads
folder respectively.
processPostTypes
determines which post types to process. You can include custom post types as defined in WPGraphQL.
graphqlTypeName
should contain the same typeName
used in gatsby-source-graphql
parameters.
generateWebp
(boolean) adds WebP images.
httpHeaders
Adds extra http headers to download request if passed in.
Downloading and optimizing images is done automatically via resolvers. However there is an additional step of processing content that must be added manually to a page template. This additional processing replaces remote urls with links to downloaded files in Gatsby's static folder.
import contentParser from 'gatsby-wpgraphql-inline-images';
replace <div dangerouslySetInnerHTML={{ __html: content }} />
with this
<div>{contentParser({ content }, { wordPressUrl, uploadsUrl })}</div>
Where content
is the original HTML content and URLs should use the same values as in the options above. contenParser
returns React object.
The recommended handling of featuredImage
and WordPress media in general is described by henrikwirth in this article and this gist.
WordPress galleries may need some additional styling applied and this was intentionally left out of the scope of this plugin. Emotion Global Styles may be used or just import sass/css file.
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.gallery-item {
margin-right: 10px;
}
Inserted <Img>
components have variant: 'styles.SourcedImage'
applied to them.
I'm going to use gatsby-wpgraphql-blog-example as a starter and it will source data from a demo site at yourdomain.dev.
Add this plugin to the gatsby-config.js
{
resolve: 'gatsby-wpgraphql-inline-images',
options: {
wordPressUrl: `https://yourdomain.dev/`,
uploadsUrl: `https://yourdomain.dev/wp-content/uploads/`,
processPostTypes: ["Page", "Post"],
graphqlTypeName: 'WPGraphQL',
},
},
Change url
in gatsby-source-graphql
options to https://yourdomain.dev/graphql
Page templates are stored in src/templates
. Let's modify post.js
as an example.
Importing contentParser
import contentParser from 'gatsby-wpgraphql-inline-images';
For simplicty's sake I'm just going to add URLs directly in the template.
const pluginOptions = {
wordPressUrl: `https://yourdomain.dev/`,
uploadsUrl: `https://yourdomain.dev/wp-content/uploads/`,
};
and replace dangerouslySetInnerHTML
with this
<div>{contentParser({ content }, pluginOptions)}</div>
The modified example starter is available at github.com/progital/gatsby-wpgraphql-blog-example.
This is a WIP and any contribution, feedback and PRs are very welcome. Issues is a preferred way of submitting feedback, but you can also email to andrey@progital.io.
While this plugin was designed for sourcing from WordPress it could be adapted for other use cases.