showcase metatag images size fix [#14469] (#14560)

* showcase metatag images size fix [#14469] * Rm `publicURL` from static query * Pull resized image * Don't create a square thumbnail, but a 1.91:1 landscape crop * Tell Twitter to use the `summary_large_image` format * Provide correct dimensions (`og:image:width/height`) * Add `og:title`, adjust `<title>`… …following what we do for starter detail pages (e.g. `/starters/gatsbyjs/gatsby-starter-blog/`)
gatsbyjs · Jun 10, 2019 · 556b6cf · 556b6cf
1 parent c70420c
commit 556b6cf
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/www/src/components/showcase-details.js b/www/src/components/showcase-details.js
@@ -251,7 +251,7 @@ const ShowcaseDetails = ({ parent, data, isModal, categories }) => (
               }}
             >
               <Helmet>
-                <title>{data.sitesYaml.title}</title>
+                <title>{data.sitesYaml.title}: Showcase | GatsbyJS</title>
                 <meta
                   property="og:image"
                   content={`https://www.gatsbyjs.org${
@@ -266,6 +266,25 @@ const ShowcaseDetails = ({ parent, data, isModal, categories }) => (
                       .childImageSharp.resize.src
                   }`}
                 />
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta
+                  name="og:title"
+                  value={`${data.sitesYaml.title}: Showcase | GatsbyJS`}
+                />
+                <meta
+                  property="og:image:width"
+                  content={
+                    data.sitesYaml.childScreenshot.screenshotFile
+                      .childImageSharp.resize.width
+                  }
+                />
+                <meta
+                  property="og:image:height"
+                  content={
+                    data.sitesYaml.childScreenshot.screenshotFile
+                      .childImageSharp.resize.height
+                  }
+                />
               </Helmet>
               <div
                 css={{

diff --git a/www/src/templates/template-showcase-details.js b/www/src/templates/template-showcase-details.js
@@ -111,13 +111,10 @@ export const pageQuery = graphql`
             fluid(maxWidth: 700) {
               ...GatsbyImageSharpFluid_noBase64
             }
-            resize(
-              width: 1500
-              height: 1500
-              cropFocus: CENTER
-              toFormat: JPG
-            ) {
+            resize(width: 1200, height: 627, cropFocus: NORTH, toFormat: JPG) {
               src
+              height
+              width
             }
           }
         }