Skip to content
Fluid images for gatsby-source-wordpress inline images in post_content
JavaScript
Branch: master
Clone or download
TylerBarnes Merge pull request #16 from TylerBarnes/dependabot/npm_and_yarn/lodas…
…h-4.17.14

Bump lodash from 4.17.11 to 4.17.14
Latest commit c7d82a3 Aug 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
utils Add gatsby-image as image creator engine; Apr 11, 2019
.gitattributes Initial commit Feb 3, 2019
.gitignore Initial commit Feb 3, 2019
README.md Add gatsby-image as image creator engine; Apr 11, 2019
constants.js Add gatsby-image as image creator engine; Apr 11, 2019
gatsby-browser.js Remove debug info Apr 11, 2019
gatsby-node.js Fix responsive styles Apr 11, 2019
index.js Add gatsby-image as image creator engine; Apr 11, 2019
package.json bump to v1! Apr 17, 2019
yarn.lock Bump lodash from 4.17.11 to 4.17.14 Jul 14, 2019

README.md

Gatsby WordPress inline images

gatsby-source-wordpress doesn't process images in blocks of text which means your admin site has to serve the images. This plugin solves that.

Require gatsby-source-wordpress and gatsby-image to be preinstalled

This is a WIP and little testing has been done. I modified this code from my alternative WP source plugin wordsby which was originally modified from gatsby-remark-images. Currently this plugin isn't doing any caching of images. This plugin is also currently hardcoded to only work on pages and posts and only on the post content field. Other post types and fields will be supported later. There is a bunch of commented out code that needs to be sorted through. If you need this plugin please help out by sending PR's!

installation

yarn add gatsby-wordpress-inline-images

Add this plugin as a plugin of gatsby-source-wordpress. Be sure to specify your baseurl and protocol a second time in the gatsby-wordpress-inline-images options, not just in the gatsby-source-wordpress options.

  {
    resolve: `gatsby-source-wordpress`,
    options: {
      baseUrl: `your-site.com`
      protocol: `https`,
      plugins: [
          {
            resolve: `gatsby-wordpress-inline-images`,
            options: {
              baseUrl: `your-site.com`,
              protocol: `https`
            }
          }
        ]
      }
  }

Options

{
	resolve: `gatsby-source-wordpress`,
	options: {
		// required
		baseUrl: `your-site.com`,
		protocol: `https`,
		// defaults
		maxWidth: 650,
		wrapperStyle: ``,
		postTypes: ["post", "page"],
		backgroundColor: `white`,
		withWebp: false, // enable WebP files generation
		// add any image sharp fluid options here
		// ...
	}
}
You can’t perform that action at this time.