-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
gatsby-source-wordpress content image #11179
Comments
This isn't currently possible in gatsby-source-wordpress. edit: By the way you should check out html-react-parser instead of using dangerouslySetInnerHTML |
@TylerBarnes |
@littlehamster I believe |
@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 |
@sidharthachatterjee 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 |
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
}
}
}
` |
@riddla funny timing. I added support for this in my source plugin just minutes ago! https://github.com/TylerBarnes/gatsby-plugin-wordsby/pull/1 |
@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 :) |
Awesome, thanks @riddla :) |
@TylerBarnes: I just added you as a collaborator to a private GitHub repo that is automatically deploying to |
@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. |
Hey guys, just created |
Oh, it's also missing the gatsby-browser code for the blur up technique. That code could come from |
@TylerBarnes I thought it would download images locally and replaces the inline images |
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. |
@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 |
Great work, Tyler :) |
Thanks! :) |
@TylerBarnes great job 👍 |
@TylerBarnes, I thought about re-using the |
@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? |
@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 @DSchau, maybe you can speak to this topic? |
@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 To implement something like this, you'd want to parse the HTML you get from Wordpress (or that we create), query for @pieh did I accurately kinda convey the idea here? |
@DSchau that's what the new plugin is doing actually. :) I read the |
@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 Happy to help you get started on this if you are interested. |
@DSchau do you mean the functionality should be part of |
@riddla No, this one is just for Edit: or do you mean for the blur-up code? Yes, it should |
Yeah, that's what I meant. I think I was just mislead by one of your previous comments:
I thought you meant that this would still need to be implemented ... 🤦♂️ |
@riddla I think the file just needs to be copy pasted 😂 |
I’ll give it a shot if I find some time tomorrow :) |
Implementing it is feasible - just not sure if practical: See https://github.com/pieh/gatsby-wordpress-gatsby-image - in particular: |
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 Also @oorestisime implemented very similiar thing to this for (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) |
@pieh that's awesome! Really valuable info. Do you think the benefit of it is worth the work to implement it? |
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 :) |
But getting back to the point - I think @TylerBarnes plugin is super valuable and we can add section to
@TylerBarnes this is pretty much done in the demo repository - what would need to be done is package example site But this also introduce some trickiness because I add Additional problems:
|
I see, that makes sense! 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 {
resolve: `gatsby-wordpress-inline-images`,
options: {
postTypes: [
'page',
'post',
'team',
...etc
]
}
} |
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! 💪💜 |
@TylerBarnes any recent updates about the process of your plugin? |
@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. |
I've finished blur-up effect, added WebP support, added image generation through |
Sorry for bothering you guys, I just upgrade |
@anonimoconiglio I believe I've fixed the issue from my local testing. Try 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 |
Sorry, @anonimoconiglio bump to |
This is kind of related to this issue #3733. When pulling the 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? |
@krishnakakade1999 the issues are the same. The plugin mentioned above solves the issue! |
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.
|
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! 💪💜 |
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 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! |
Summary
This is kind of related to this issue #3733. When pulling the 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?
The text was updated successfully, but these errors were encountered: