progital / gatsby-wpgraphql-inline-images

Solution for Gatsby and WPGraphQL sourced content. Downloads images locally.
MIT License
35 stars 12 forks source link

QUESTION: data attributes in markup #1

Open jasonbahl opened 5 years ago

jasonbahl commented 5 years ago

Hey!

I notice in the contentParser it looks like it's looking for particular data attributes that I don't recognize.

For example here: https://github.com/progital/gatsby-wpgraphql-inline-images/blob/b423abe4b14a031266b624a6b944f37369f78c18/src/contentParser.js#L80

It's looking for elements with: attribs[data-gts-swapped-href]

Is there a WordPress plugin that is affecting image markup as well? Or what's going on with these custom attributes.

Just curious if there's anything needed on the WordPress side to work with this.

Thanks!

progital commented 5 years ago

Hi!

It's a workaround for some issues I've encountered with Gatsby. I wanted to get it working even using some hacky ways and then ask someone more knowledgeable about it. Maybe I was doing queries wrong :)

When using your blog starter there is only one place where we query for the content e.g. https://github.com/wp-graphql/gatsby-wpgraphql-blog-example/blob/master/src/templates/page.js. When I wanted to query for imageSharp nodes I added them to the same query (actually I've tried several ways of doing it with the same result). It turned out that it worked in develop mode because nodes were auto-updating but it failed in a production build. My understanding of it

So I implemented a workaround by simply passing the fluid object in data-gts-encfluid attribute.

The data-gts-swapped-href attribute is another workaround for a totally different case. In sourceParser.js absolute links to wordpress hosted files are replaced with links to locally downloaded files. I don't want these links to be processed again in contentParser.js so this attribute is just a flag meaning ignore this link. Not a great solution I know.

There is another hacky solution for the featured image that I pushed yesterday.