-
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
[source-wordpress] Transformer Sharp #1493
Comments
@sebastienfi is working on this exact thing actually :-) |
Yes ! This is still a WIP, I plan to be done on this by 24th July. This would also work with ACF. |
Incredible, looking forward to it! |
thank you @sebastienfi :) |
Please submit your use case so I can extend the functionality to your needs. My use case is :
[EDITED 23/07/17] Note 1 : https://aclaes.com/responsive-background-images-with-srcset-and-sizes/ |
Hi @sebastienfi Thanks again for this! Yes, that all sounds right to me... the images from the wordpress side would be a combination of On the Gatsby side, these would be used as such:
Cheers :) |
Hi guys ! Just an update, need more time, expect this around 29th. I also updated my post above. |
Use cheerio! Check out the recent changes to gatsby-remark-images adding support for parsing inline html. |
This is worth a read :-P https://stackoverflow.com/a/1732454 |
I will also probably dedicate to Worpdress the image sizes management, using the thumbnail-width definitons https://codex.wordpress.org/Post_Thumbnails |
LOL @KyleAMathews
|
@sebastienfi would it be cleaner to just replicate/sync the wordpress asset library in its entirety? I imagine this might negate the need to regex the post content for image markup, and could just simply swap out the base path or something. As long as the build task is aware of which assets have already been processed it shouldn't really take up too many resources for each build (I am pretty sure the gatsbygram example behaves this way) In a perfect world, image_sizes should really be defined on the Gatsby side. For example you could have multiple Gatsby sites reading from a single WordPress content API etc. Just my 2c :) |
Yes! Definitely cleaner. The problem is that on Wordpress.com one cannot query this library entirely without auth. We have 2 models : the localy hosted Wordpress instance (at your hosting provider or wordpress.org for example) and the wordpress instance hosted on wordpress.com. I'm trying to remain generic. Also, scraping the HTML content would also take care of the images which src are not hosted on the Wordpress instance. You are right about the image size management. Gatsby should hold on this as templating and design is done at this level too. |
For an update : being late on this sorry guys. I had to de-prioritize this in favor of some more urgent matters. I've made great progress thought. Still bugged by some call back hell. I hope to have time to solve this on the coming weeks. WIP is at https://github.com/sebastienfi/gatsby/tree/topics/wordpress-responsive-images PRs welcomed ! |
This is working — see the example site https://using-wordpress.gatsbyjs.org/sample-post-1 |
So content images (uploaded by WYSIWYG) are not supported? |
They aren't for now. If someone would like to add support for that then PRs are welcome. It would need to parse html content from WYSIWYG fields (at least for main content field) and replace inline images (somethink like |
I was just doing a little thinking about this and here's what I came up with to parse images from WYSIWYG fields: function replaceInlineImages({ post }) => {
const parser = new DOMParser()
const contentTree = parser.parseFromString(post.content, "text/html")
const inlineImages = contentTree.getElementsByTagName('img')
for (const wordpressImage of inlineImages) {
const gatsbyImage = getGatsbyImage(wordpressImage) // The hard part
worpressImage.replaceWith(gatsbyImage)
}
return contentTree.body.innerHTML
} @pieh Seem like a decent start for the parsing side? |
My thought it that past is that we should make a gatsby-transformer-rehype that works the same as gatsby-transformer-remark. Then we could create a gatsby-rehype-images that transforms images inside html sections. |
Along with plugins doing other HTML manipulation e.g. even syntax highlighting. |
That makes a lot of sense to me, I'll take a look into rehype 😄 |
There is also images in the CSS. |
Hi, is there any chance the
source-wordpress
example could be updated to fetch wordpress uploaded images and then run them through responsive image generator and saved to/public/static
similar to the gatsbygram example? Many thanks!The text was updated successfully, but these errors were encountered: