[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 😃

[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 #11406 (comment).

as @superhawk610 mentioned the code is

gatsby/www/src/components/showcase-details.js

Lines 255 to 268 in 542cdb2

	<meta
	property="og:image"
	content={`https://www.gatsbyjs.org${
	data.sitesYaml.childScreenshot.screenshotFile
	.childImageSharp.resize.src
	}`}
	/>
	<meta
	name="twitter:image"
	content={`https://www.gatsbyjs.org${
	data.sitesYaml.childScreenshot.screenshotFile
	.childImageSharp.resize.src
	}`}
	/>

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

gatsby/www/src/components/showcase-details.js

Lines 125 to 131 in a82a9ad

	screenshotFile {
	childImageSharp {
	resize(width: 200, height: 200) {
	src
	}
	}
	}

[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!