Extract inline images and so we can control the render of images/srcset

[ccorda]

A Gatsby plugin exists with some nice benefits: https://www.npmjs.com/package/inline-images-plus-code

• Replaces linking to site's pages with component
• Replaces with Gatsby component leveraging all of the gatsby-image rich functionality

Broke the link part out to it's own issue #11. Updating title here to make this just about images.

[ccorda]

This is also an option: https://github.com/Quartz/wp-graphql-content-blocks

[kylehotchkiss]

We'll also need to support plain posts / pages. What do you think about processing the WYSIWYG with a library like this: https://www.npmjs.com/package/html-to-react and then converting Images to along with the link processing in https://github.com/patronage/bubs-next/issues/11 ?

I've worked with html-to-react before, and it appears somewhat commonly used with 600k downloads a week. I don't think it'd take too long to implement it, the caveat is that the syntax in html-to-react is a little odd (it looks like Java code) but I could keep it in a library/ file so it's not a distraction

[ccorda]

I don't have a strong opinion on a server-side approach on the graphql side, or by doing it in React/JS. Whichever is more reliable.

One thing besides images and links we should aware of is shortcodes, e.g. someone saving a youtube link and how we might handle that.

[ccorda]

How Gatsby approaches this: https://github.com/progital/gatsby-wpgraphql-inline-images

[kylehotchkiss]

This is built into Next.js' <Image> component:

https://nextjs.org/blog/next-11#image-placeholders

Can be enabled with placeholder="blur"

[ccorda]

This issue isn't about lqip (that one is #110) -- this is about parsing markup of a WYSWIYG and actually rendering images. We do have a beat on this from a recent project.

[ccorda]

shortcode example that uses WP's shortcode lib: https://github.com/TallerWebSolutions/wordpress-classic-parser/blob/main/src/Parser.ts