gatsby-source-wordpress content image

[ghost]

Summary

This is kind of related to this issue #3733. When pulling the content:

<div dangerouslySetInnerHTML={{ __html: post.content }} />

the image is loaded from the domain where the WordPress is installed.

Is there anyway we can load the WordPress content images similar to how ACF images are loaded and saved internally?

[TylerBarnes]

This isn't currently possible in gatsby-source-wordpress.
gatsby-remark-images needs to be "ported" to a new plugin to work for wordpress.
I've been working on a gatsby-source-wordpress alternative and this is the part I'm working on now actually. Should be done soon!

edit: By the way you should check out html-react-parser instead of using dangerouslySetInnerHTML

[ghost]

@TylerBarnes
I am not sure who manages gatsby-source-wordpress, any chance your fix can be implemented in the gatsby-source-wordpress as well?

[TylerBarnes]

@LittleHamster I believe gatsby-source-wordpress is maintained by the Gatsby guys. I'll consider turning it into a generic plugin. Right now it's tied to the specific setup of how my alternative source plugin works. It's definitely doable though with a bit of work.

[sidharthachatterjee]

@LittleHamster You mean links to images that are in the post content, correct?

Yeah, we would need to parse the html and _normalise_ links to images for this to work

[ghost]

@sidharthachatterjee
yes, so lets say I have a content that contains an image which was uploaded through the Editor

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. 
Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, 
cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera 

<img src="WORDPRESS-INSTALL/uploads/sample.jpg" />

Lorem Ipsum es simplemente el texto de relleno de las imprentas.

when we use gatsby-source-wordpress and parse the post.content the image doesnt change and will link to WORDPRESS-INSTALL/uploads/sample.jpg but if it is set as featured image, the image is downloaded locally and placed in the public folder.

[riddla]

There might be a way. The following (rough and dirty) code checks the post body/content for images and replaces them with local WordPress media.

The code has a lot of flaws but did work for me in my first tests. I'll keep you posted as soon as I have something more stable. I'm thinking of a StaticQuery that only gets the used image(s):

import React, { Component } from 'react'
import { graphql } from 'gatsby'
import Helmet from 'react-helmet'
import Img from 'gatsby-image'
import Parser from 'html-react-parser'

import Layout from '../layouts'

class PageTemplate extends Component {
  render() {
    const currentPage = this.props.data.wordpressPage
    const media = this.props.data.allWordpressWpMedia.edges

    const Content = Parser(currentPage.content, {
      replace: domNode => {
        if (domNode.name === 'img') {
          // TODO: also check src attribute for 'wp-content/uploads'
          let image = media.filter(m => {
            return m.node.source_url === domNode.attribs.src
          })
          if (image) {
            image = image[0].node.localFile
            return <Img fluid={image.childImageSharp.fluid} />
          }
        }
      },
    })

    return (
      <Layout>
        <Helmet
          bodyAttributes={{
            class: 'page-template-default page ',
          }}
        />
        <div className="post single post-208 page type-page status-publish hentry">
          {currentPage.featured_media && (
            <div className="featured-media">
              <Img
                fluid={
                  currentPage.featured_media.localFile.childImageSharp.fluid
                }
              />
            </div>
          )}
          <div className="post-header">
            <h1
              dangerouslySetInnerHTML={{ __html: currentPage.title }}
              className="post-title"
            />
          </div>
          <div className="post-content">{Content}</div>
        </div>
      </Layout>
    )
  }
}

export default PageTemplate

export const pageQuery = graphql`
  query($id: String!) {
    wordpressPage(id: { eq: $id }) {
      title
      content
      date(formatString: "MMMM DD, YYYY")
      featured_media {
        localFile {
          childImageSharp {
            fixed(width: 500, height: 300) {
              ...GatsbyImageSharpFixed_withWebp
            }
            fluid(maxWidth: 640) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    }
    allWordpressWpMedia {
      edges {
        node {
          id
          source_url
          localFile {
            childImageSharp {
              fixed(width: 500, height: 300) {
                ...GatsbyImageSharpFixed_withWebp
              }
              fluid(maxWidth: 640) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
        }
      }
    }
    site {
      id
      siteMetadata {
        title
      }
    }
  }
`

[TylerBarnes]

@riddla funny timing. I added support for this in my source plugin just minutes ago! https://github.com/TylerBarnes/gatsby-plugin-wordsby/pull/1
I think managing this in templates isn't such a good idea. It's much better to do this in the build phase during node creation.
If someone wouldn't mind letting me use a demo repo for a gatsby site using gatsby-source-wordpress I could turn the code I wrote into a plugin pretty easily.

[riddla]

@TylerBarnes: I was thinking about the build phase also. I’ll try to bring up a demo site I was planning already tomorrow and give you access :)

[TylerBarnes]

Awesome, thanks @riddla :)

[riddla]

@TylerBarnes: I just added you as a collaborator to a private GitHub repo that is automatically deploying to
https://headless-wordpress-via-gatsby.netlify.com/.

[ghost]

@riddla
this does not include your fix?
thanks

[riddla]

@LittleHamster: Currently not, no. It’s meant as a playground for @TylerBarnes‘ approach to solve the problem on a build level via a plugin.
Nevertheless, my quick hack that I posted above is working quite well for me at the moment. Downside is of course that it retrieves all Wordpress Media and than filters out the ones used in the post content.
It could be optimized by making use of the attached field on posts, but I did not make an effort yet in that direction.

[TylerBarnes]

Hey guys, just created gatsby-wordpress-inline-images and added it to the test playground above. Thanks for letting me use your repo @riddla!
As stated on the plugin github page, this is just an alpha – it only works on posts/pages, just the post content field, and it isn't even caching image downloads yet, but it works. If anyone here would like to help out we could make it much better! The code was adapted from gatsby-plugin-wordsby which in turn was adapted from gatsby-remark-images as well as a bit of code copy pasted and modified from gatsby-source-wordpress. I've left commented out code in there to set up caching and to add the image options from gatsby-remark-images.

[TylerBarnes]

Oh, it's also missing the gatsby-browser code for the blur up technique. That code could come from gatsby-remark-images.

[ghost]

@TylerBarnes
but the image from the test domain is loaded from a WordPress site:
https://headlessdata.files.wordpress.com/2019/01/headspace_wallpaper_white.jpg

I thought it would download images locally and replaces the inline images

[TylerBarnes]

yes, it does. I'm not sure why that test site didn't rebuild. When I ran gatsby build && gatsby serve it's working.

Actually, it could be a node version thing.

When I get a chance I'll try it out on my own netlify account to see why it hasn't rebuilt.

[TylerBarnes]

@LittleHamster I forked it and deployed it to my own netlify. Looks like the one above is deploying the master branch but I pushed to the develop branch. Here's an example of it working https://zen-euclid-f672d1.netlify.com/a-test-post-with-text-and-images

[riddla]

Great work, Tyler :)
There is also a branch deploy URL: https://develop--headless-wordpress-via-gatsby.netlify.com/.

[TylerBarnes]

Thanks! :)

[ghost]

@TylerBarnes great job 👍

[riddla]

@TylerBarnes, I thought about re-using the gatsby-image component, so that we don't need to port the browser code from gatsby-remark-images ... what do you think?

[TylerBarnes]

@riddla I like the idea but I'm not really sure how it could be accomplished. The images come in a string of text so they aren't react components. I imagine we would have to render gatsby image to a string during the current process of downloading and replacing the inline images but I don't know if that would break anything with gatsby image. I'm not sure if that means we would also have to do a bunch of extra graphql queries at this step as well which could slow things down. Do you have any ideas on how it might work?

[riddla]

@TylerBarnes, I bumped my head around it today, too. Maybe we could ask someone on the Gatsby team, if they can think of an approach. I think it would be very helpful to re-use gatsby-image not only in your plugin, but maybe in others, too?

@DSchau, maybe you can speak to this topic?

[DSchau]

@riddla I'm honestly not all that familiar with the Wordpress plugin (@pieh is a better contact!) but you probably wouldn't be able to use gatsby-image directly.

What we do in gatsby-remark-images (a better reference point for this functionality!) is we replicate _similar_ functionality with plain HTML, CSS, JS, etc. _not_ React code. From the gatsby-source-wordpress plugin perspective, we aren't rendering React code, nor do we know how to handle React code--so implementing gatsby-image wouldn't be super feasible.

To implement something like this, you'd want to parse the HTML you get from Wordpress (or that we create), query for img tags (probably with Cheerio), and then implement similar functionality. To implement something like this, I think extra work would be required, e.g. perhaps implementing a plugin infrastructure for gatsby-source-wordpress like we have in gatsby-transformer-remark.

@pieh did I accurately kinda convey the idea here?

[TylerBarnes]

@DSchau that's what the new plugin is doing actually. :) I read the gatsby-remark-images plugin and used the same markup.

[DSchau]

@TylerBarnes nice! Rather than sorta splitting the ecosystem here--would you be interested in working on making gatsby-source-wordpress changes to enable a mechanism to use functionality like you've created?

That way--_everyone_ can get these benefits for free merely by upgrading the plugin and then using this gatsby-wordpress-images plugin (or whatever we decide to call it!).

Happy to help you get started on this if you are interested.

[TylerBarnes]

@DSchau do you mean the functionality should be part of gatsby-source-wordpress? It's already a plugin so everyone can use it https://github.com/TylerBarnes/gatsby-wordpress-inline-images but I like the idea of it being part of gatsby-source-wordpress more for sure.

[DSchau]

@TylerBarnes whoa - that's great! Sorry, I was looking at this linked earlier.

If this plugin exists, and others can use it like you've documented--isn't this a solved problem?

[riddla]

@DSchau, the main problem was solved by @TylerBarnes, yes.
We were just thinking about the remaining blur-up part.

[riddla]

@TylerBarnes, so if I activate gatsby-remark-images in my project it would just pick up the images created by gatsby-wordpress-inline-images?

[TylerBarnes]

@riddla No, this one is just for gatsby-source-wordpress

Edit: or do you mean for the blur-up code? Yes, it should

[riddla]

Yeah, that's what I meant. I think I was just mislead by one of your previous comments:

Oh, it's also missing the gatsby-browser code for the blur up technique. That code could come from gatsby-remark-images.

I thought you meant that this would still need to be implemented ... 🤦‍♂️

[TylerBarnes]

@riddla I think the file just needs to be copy pasted 😂
I ran out of time when I was working on the plugin. The remaining features should be easy to implement if anyone has a bit of time for it! If not when I get a sec I'll finish the plugin.

[riddla]

I’ll give it a shot if I find some time tomorrow :)

[pieh]

What we do in gatsby-remark-images (a better reference point for this functionality!) is we replicate _similar_ functionality with plain HTML, CSS, JS, etc. _not_ React code. From the gatsby-source-wordpress plugin perspective, we aren't rendering React code, nor do we know how to handle React code--so implementing gatsby-image wouldn't be super feasible.

Implementing it is feasible - just not sure if practical:

See https://github.com/pieh/gatsby-wordpress-gatsby-image - in particular:

• https://github.com/pieh/gatsby-wordpress-gatsby-image/blob/master/gatsby-node.js
• https://github.com/pieh/gatsby-wordpress-gatsby-image/blob/master/src/utils/render-ast.js
• https://github.com/pieh/gatsby-wordpress-gatsby-image/blob/master/src/pages/index.js#L21

[pieh]

Above takes similiar approach to https://using-remark.gatsbyjs.org/custom-components/ (with extra step of replacing inline img for custom element (with results of running fluid function from gatsby-pluginsharp) that is later replaced by React Component that uses gatsby-image

Also @oorestisime implemented very similiar thing to this for remark - https://github.com/oorestisime/gatsby-remark-rehype-images where you can use gatsby-image (not html version of it) for images in md files.

(I've done this before for freelance/commercial project that I can't share - but I just picked valuable parts and simplified a lot for the demo above)

[TylerBarnes]

@pieh that's awesome! Really valuable info. Do you think the benefit of it is worth the work to implement it?

[oorestisime]

let me know if the plugin can be of any more help. i am willing to work on it if there are use cases not covered right now or if you have any features/bugs in mind :)

[pieh]

But getting back to the point - I think @TylerBarnes plugin is super valuable and we can add section to gatsby-source-wordpress docs with link to gatsby-wordpress-inline-images (where user would get installation and config instructions)

@pieh that's awesome! Really valuable info. Do you think the benefit of it is worth the work to implement it?

@TylerBarnes this is pretty much done in the demo repository - what would need to be done is package example site gatsby-node into its own plugin (and maybe render-ast helper file), add support for pluginOptions (so user can setup things like maxWidth etc) and add documentation (hardest part of the process left :( ).

But this also introduce some trickiness because I add htmlAst field and also do some manipulation of it. I could see cases where people would want to hook into it and for example to replace shortcodes (for example provided by this https://pl.wordpress.org/plugins/column-shortcodes/) with custom components and with current architecture is just hard to support it well.

Additional problems:

• I only do this for pages and posts, but not for any custom post types. (I see you do the same in your plugin).
  
  
  
  • Custom fields plugins (like ACF) can add additional HTML fields (not just content field) that wouldn't be covered and is tricky to support that because wordpress doesn't have introspection support that would let plugins know that there are additional fields, so plugins would need to potentially examine nodes, field by field to discover extra HTML fields - this can quickly get out of hand.
  
  

[TylerBarnes]

I see, that makes sense!
In my WP source plugin (wordsby) I currently have it doing this to fields recursively at the same time that it's creating them instead of in another step. In the recursive function it just check's if the field is a string and then if so does it contain " I did some performance profiling on the build and it didn't seem too bad but it definitely took more time.
I added a plugin option recurseImages or something like that (can't remember the exact option name) to disable recursion and just do it on the post_content field.

Since I'm only using one internal graphql endpoint for all post types in wordsby I can also just process all post types at once without needing to check. I think in the case of gatsby-wordpress-inline-images there could just be a plugin option of post types to transform images in to get around this.
The default would be ['page', 'post']

{
  resolve: `gatsby-wordpress-inline-images`,
  options: {
    postTypes: [
      'page',
      'post',
      'team',
      ...etc
    ]
  }
}

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[ghost]

@TylerBarnes any recent updates about the process of your plugin?

[TylerBarnes]

@LittleHamster I've been too busy lately unfortunately. It shouldn't be too much work to finish it off once I get a moment to work on it.

[STUkh]

I've finished blur-up effect, added WebP support, added image generation through gatsby-image and a lot of other small changes. Now it's fully-featured plugin and only one thing left - to apply PR: https://github.com/TylerBarnes/gatsby-wordpress-inline-images/pull/3

[anonimoconiglio]

Sorry for bothering you guys, I just upgrade gatsby-wordpress-inline-images to the new version and now It doesn't respect the max-width of the images (the entire website has images at 1024px and that mess with my layout).
Should I need to add new options? @STUkh
This is my issue on the package: https://github.com/TylerBarnes/gatsby-wordpress-inline-images/issues/4 thanks for any help.

[TylerBarnes]

@anonimoconiglio I believe I've fixed the issue from my local testing. Try 1.0.1--beta.1. If not I can do some more work on it but let's keep discussion in your linked issue.

I think we can close this issue now since the plugin is in a good place. @DSchau I think it would be helpful to add a note about this plugin to the docs somewhere. Should I add a note to the gatsby-source-wordpress docs in a PR?

[TylerBarnes]

Sorry, @anonimoconiglio bump to 1.0.1--beta.2.. I published the wrong branch on beta.1 😂

[TylerBarnes]

@krishnakakade1999 the issues are the same. The plugin mentioned above solves the issue!

[florinme]

Just chiming in. Since @TylerBarnes's plugin doesn't support WYSIWYG fields coming from ACF, I don't have a solution for this other than adding the following as the sourceUrl. It might be worth adding to the documentation that this field accepts RegEx, which is great.

myWPdomain\.com(?!.*\/wp-content\/uploads.*)

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!