Gatsby: [www/showcase] "Showcase" entry uses square image as meta `twitter:image`

[fk]

E.g. for https://www.gatsbyjs.org/showcase/airbnb.io/ we are setting

as twitter:image.
Let's share the uncropped image instead:

[odm275]

Hey! I'd like to give this a shot if possible.

[odm275]

Been trying to get started on this but I'm not exactly sure how. This is my first issue! If you could provide me with some extra context please.

[superhawk610]

@odm275 the React component responsible for rendering the showcase details view can be found in www/src/components/showcase-details here. The meta tags responsible for setting og:image and twitter:image are set by react-helmet via the <Helmet /> component. You should be able to get it from there :smiley:

[abhijithvijayan]

@superhawk610 How can I run this on dev mode, I tried running gatsby develop under www dir, but that kept on reaching watcher file count limit.

[wardpeet]

Watcher issues can be resolved by https://github.com/gatsbyjs/gatsby/issues/11406#issuecomment-458769756.

as @superhawk610 mentioned the code is https://github.com/gatsbyjs/gatsby/blob/542cdb29d12601c0e4a2afde4012059e107e4e11/www/src/components/showcase-details.js#L255-L268

And I believe we want to change data.sitesYaml.childScreenshot.screenshotFile.childImageSharp.resize.src into data.sitesYaml.childScreenshot.screenshotFile.publicURL

which also means you'll need to add publicURL to our graphql query https://github.com/gatsbyjs/gatsby/blob/a82a9adc4599f89daa7a44ec849d7e4009be878e/www/src/components/showcase-details.js#L125-L131

[abhijithvijayan]

@wardpeet I can take this. I was in fact looking for the original url for the image, as it was not possible to use the image urls from srcset of the main image shown.

[odm275]

@superhawk610 Thanks for the clarification! I think I got this.

[fk]

Sorry for only being able to follow up here today! Thanks for helping out everybody!