Unfortunately after the upgrade the images are all at 1024. I set "maxWidth: 550," but the plugin is still showing images at max size.

This is my code inside gatsby-config.js

	{
	resolve: `gatsby-source-wordpress`,
	options: {
		baseUrl: `URL`,
		protocol: "https",
		hostingWPCOM: false,
		useACF: true,
		verboseOutput: false,
		plugins: [
			{
				resolve: `gatsby-wordpress-inline-images`,
				options: {
					baseUrl: `URL`,
					protocol: `https`,
					quality: 90,
					maxWidth: 550,
					tracedSVG: true,
				}
			}],
		excludedRoutes: [
			"/wp/v2/users", "/wp/v2/users/me", "/acf/v2/options", "/wp/v2/settings", "/yoast/v1/configurator", "/yoast/v1/reindex_posts", "/yoast/v1/statistics", "/yoast/v1/ryte"
		],
	}
},

images with original file names containing the sizes pattern (like: 100x200) are not converted to a gatsby image object.
not sure where to go look to solve this problem so for now I replaces the files that gave me problems in my project.
Will try to make a pr to fix it in the near future, unless this can be fixed quickly by someone who knows the plugin?

I'm getting this message when I run "gatsby develop".

The "critical" prop is now deprecated and will be removed in the next major version
    of "gatsby-image".
Please use the native "loading" attribute instead of "critical".

seems like there's updates on "gatsby-image" so this plugin also needs to be updated a little bit.

btw, this plugin is just awesome:)
Massive thanks to everyone who is contributing!

Hi,

I really enjoy the effort that's been put into this plugin. I am just experiencing one small issue. When my inline images have been generated. For some of my posts, all of the content (h1, h2, p, span etc) is wrapped with the gatsby image wrapper (rather than just the images themselves).

<div class=" gatsby-image-wrapper" style="position:relative;overflow:hidden;max-width:100%" data-reactroot=""> My Post content </div>

This skews all my inline images and the images cover my post content. Is there perhaps a property I'm missing in the plugin configuration?

My config:

      {
         resolve: `gatsby-wordpress-inline-images`,
         options: {
           baseUrl: `www.fortniterandomizer.com`,
           protocol: `https`,
           useACF: true,
           wrapperStyle: ``,
           postTypes: ["post", "page"],
         }
       }
     ]

Hi Tyler,

I've realized that the wrapperStyle string I'm passing as an option doesn't seem to be applied.

{
  resolve: `gatsby-wordpress-inline-images`,
  options: {
    baseUrl: `mysite.com`,
    protocol: `https`,
    // sharp options
    maxWidth: 1280,
    wrapperStyle: `margin-top: 5rem;`, // <= this one
  },
},

wrapperStyle is passed to gatsby-plugin-sharp's fluid() (it's in options):

However, sharp doesn't seem to take any wrapperStyle prop. I think that option is only in gatsby-remark-images. But I might be wrong!

Would it need to be implemented? Or id there something I'm doing wrong?

Hi there,

Sorry to open up an issue but I am trying to understand how this plugin works with Gatsby - all of their documentation would seem to suggest that nodes and their content are immutable once created.

I am working on a similar plugin for another CMS and so far it seems my only option after having the remote images get downloaded and the node’s original content gets massaged with the remark images is to delete the original node and replace it. In my experience setting node.content = the new content hasn’t been persisted to the content that ends up showing up via graphql / in the final html injected into my pages, but maybe I am just missing something about how this plugin works.

Any insight into the why / how this works for you would be appreciated!

I recently upgraded to vs. 1.0.0 from 0.0.1-alpha.1 and now my baseUrl option is ignored. It was attempting to use localhost instead of the baseUrl. I had to revert back to 0.0.1-alpha.1, delete .cache and public in order to get it working again with my specified baseUrl.

        {
            resolve: `gatsby-source-wordpress`,
            options: {
                // your wordpress source
                baseUrl: `http://[mywpdomain].com:8090`,
                protocol: `http`,
                // is it hosted on wordpress.com, or self-hosted?
                hostingWPCOM: false,
                // does your site use the Advanced Custom Fields Plugin?
                useACF: true,
                verboseOutput: false,
                plugins: [
                    {
                        resolve: `gatsby-wordpress-inline-images`,
                        options: {
                            baseUrl: `http://[mywpdomain].com:8090`,
                            protocol: `http`,
                            maxWidth: 800,
                        },
                    },
                ],
            },
        },

Hi, i have receiving this problem for days.I really need to solve this quick.Help?

error Plugin gatsby-wordpress-inline-images returned an error


  TypeError: Cannot read property 'replace' of undefined
  
  - removeImageSizes.js:4 removeImageSizes
    [gatsby]/[gatsby-wordpress-inline-images]/utils/removeImageSizes.js:4:40
  
  - gatsby-node.js:109 replaceImage
    [gatsby]/[gatsby-wordpress-inline-images]/gatsby-node.js:109:15
  
  - gatsby-node.js:82 Promise.all.imageRefs.map.thisImg
    [gatsby]/[gatsby-wordpress-inline-images]/gatsby-node.js:82:7
  
  - Array.map
  
  - gatsby-node.js:81 transformInlineImagestoStaticImages
    [gatsby]/[gatsby-wordpress-inline-images]/gatsby-node.js:81:15
  
  - gatsby-node.js:45 Promise.all.entities.map
    [gatsby]/[gatsby-wordpress-inline-images]/gatsby-node.js:45:7
  
  - Array.map
  
  - gatsby-node.js:44 Object.exports.sourceNodes
    [gatsby]/[gatsby-wordpress-inline-images]/gatsby-node.js:44:14
  
  - api-runner-node.js:214 runAPI
    [gatsby]/[gatsby]/dist/utils/api-runner-node.js:214:37
  
  - api-runner-node.js:352 resolve
    [gatsby]/[gatsby]/dist/utils/api-runner-node.js:352:19
  
  - debuggability.js:313 Promise._execute
    [gatsby]/[bluebird]/js/release/debuggability.js:313:9
  
  - promise.js:483 Promise._resolveFromExecutor
    [gatsby]/[bluebird]/js/release/promise.js:483:18
  
  - promise.js:79 new Promise
    [gatsby]/[bluebird]/js/release/promise.js:79:10
  
  - api-runner-node.js:351 Promise.mapSeries.plugin
    [gatsby]/[gatsby]/dist/utils/api-runner-node.js:351:16
  
  - util.js:16 tryCatcher
    [gatsby]/[bluebird]/js/release/util.js:16:23
  
  - reduce.js:155 Object.gotValue
    [gatsby]/[bluebird]/js/release/reduce.js:155:18

this is my gatsby-config

{
    resolve: "gatsby-source-wordpress",
    options: {
      baseUrl: "cms.antenn.ai",
      protocol: "https",
      plugins: [
        {
          resolve: `gatsby-wordpress-inline-images`,
          options: {
            baseUrl: `antenn.ai`,
            protocol: `https`,
          }
        }
      ],
      hostingWPCOM: false,
      useACF: true,
      verboseOutput: true,
      maxWidth: 650,
      wrapperStyle: ``,
      backgroundColor: `white`,
    },
  },

I have the withWebp property set to true in my gatsby-config.js, but the plugin still generates the format of the original image. How do we tell it to use Webp instead?

withWebp: true, // enable WebP files generation

Thanks!

Hi 👋

First of all thanks for this plugin! The Gatsby+WordPress stack really needed it.

I've started using it and noticed that there isn't a blur-up effect as there is by default with other sharp plugins. Has it been disabled?

Similarly setting tracedSVG to true doesn't work. Or am I mistaken in thinking that the options are the same as in gatsby-remark-images?

Hi,

If I use searchAndReplaceContentUrls in gatsby-config.js in order to replace the links in the articles the plugin doesn't work!

              searchAndReplaceContentUrls: {
                sourceUrl: "wp.my-site.com",
                replacementUrl: "my-site.com"
              },

If I comment this configuration the plugin works perfectly, but when activate it the images post have something like "http://my-site.com/wp-content/uploads/2019/05/photo-name.jpg" in the SRC.

Regards.

Hello @TylerBarnes maybe you can give me some tips why I can't get it to work. I am trying to pull out image from WordPress post and save it, I attached few images how my gatbsy-config.js looks like:

Also I got a warrning in build time:

Regards,
Tome

I found and solve a problem in your function downloadMediaFile, you return a boolean instep of an Error, then when the image without WP resize parameters on the URL does not exist return a false and the catch block never execute.

Solution

in the line 313 on gatsby-node.js:

 catch (e) {
	throw Error(e);
	}

then in parseWPImagePath.js on the line 9:

  const result = {
    cleanUrl: urlpath_remove_sizes,
    originalUrl: urlpath
  }

finally in gatsby-node.js on the line 155:

// find the full size image that matches, throw away WP resizes
	const parsedUrlData = parseWPImagePath(thisImg.attr("src"))
	const url = parsedUrlData.cleanUrl
	const { originalUrl } = parsedUrlData;
	let imageNode

	// Try to download the full size image without the WP resize parameters (removed on parse)
	try {
		imageNode = await downloadMediaFile({
			url,
			cache,
			store,
			createNode,
			createNodeId,
		})
	} catch (e) {
		// If the image without WP resize parameters on the URL does not exist it means that the original file has sizes
		// Try to download the image with the original URL
		try {
			imageNode = await downloadMediaFile({
				url: originalUrl, // <- important use `url`
				cache,
				store,
				createNode,
				createNodeId,
			})
		} catch (e) {
			// Do nothing
		}

Apologies if I'm just being obtuse and am missing something super obvious, but it appears to be attempting to fetch remote images from the localhost instance and not the baseUrl defined in the config.

I'm using the same baseUrl and protocol as the gatsby-source-wordpress plugin's options.

(...gastby-source-wordpress-config),
plugins: [
  {
    resolve: `gatsby-wordpress-inline-images`,
    options: {
      baseUrl: `my-wordpress-website.test`,
      protocol: `https`
    }
  }
],

Hi!

I would love to use this, I was wondering why it returned those tags? I would love to be able to return only the content divs, is there an underlying reason?

I could do a PR

Cheers!

This plugin is currently downloading all images on every build. There is commented out code related to caching in gatsby-node.js so this should be fairly simple to implement.

I seriously must have missed something but I am not sure about a few things

I update gatsby-node.js like this

 resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "your-site.com",
        protocol: "http",
        maxWidth: 650,
        wrapperStyle: ``,
        postTypes: ["post", "page"],
        backgroundColor: `white`,
        withWebp: false,
        plugins: [
          {
            resolve: `gatsby-wordpress-inline-images`,
            options: {
              baseUrl: `your-site.com`,
              protocol: `http`
            },
          },
        ],

I make a grapql request so I went to the GraphiQL console and send this

{
  allWordpressPost {
    edges {
      node {
        id
     	content
      }
    }
  }
}

So far so good, now I have a base64 in the content property.
My question am I supposed to parse this base64 or is there a cleaner way to get the images ? Maybe using imageSharp

When setting pathPrefix you can host a Gatsby site within an exiting site structure as all urls are then prefixed with the value of pathPrefix however this is not currently possible with inline urls as they point to root /static/...

Would it be possible to either read the value of pathPrefix or include it as an option?

I'm still looking for a workaround to this.

Thanks

I followed the README instruction to setup the processing of inline images, in particular the section:

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`
          }
        }
      ]
    }
}

Unfortunately when I run develop I face the following error

Invalid plugin options for "gatsby-source-wordpress":

- "plugins" must contain 0 items

I was wondering if a particular version of gatsby-source-wordpress is required, my package.json has

"gatsby": "^2.32.0",
"gatsby-source-wordpress": "^4.0.4",
"gatsby-wordpress-inline-images": "^1.2.1",

Was working great until this latest WP update. After updating to WP v5.5 none of the images in the Gutenberg content are being inlined. Any ideas as to what may have changed/needs to be tweaked in the plugin?