search

konstantinmuenster / gatsby-theme-portfolio-minimal

A Gatsby Theme to create modern one-page portfolios with a clean yet expressive design.
MIT License
160 stars 90 forks source link

Getting Article Banners to show up in meta tags #36

Open Surg-Dev opened 1 year ago

Surg-Dev commented 1 year ago

I want to be able to make the article banner image become the image for og:image and twitter:image meta tags. Unfortunately, it seems like the original source location of the image gets lost when trying to modify the Article index.tsx, even if I wanted to use Helmet directly.

Any ideas on how to support this?

konstantinmuenster commented 1 year ago

Hey @Surg-Dev! Modifying the Article/index.tsx seems like the right way to do it. Did you try modifying the SEO component too and passing the image url as props? It may be that the SEO component overrides your og:image you set inside the Article template.

Anyways, I like the idea and will add this to the core theme as soon as I have time for it. Thanks for opening this up!

Surg-Dev commented 1 year ago

I'm not super versed in "best practice" when it comes to webdev, (very systems guy). Passing it into SEO probably is the more modular answer, especially if I make other pages that want that meta tag made. Right now, this is the solution I'm using in Article/index.tsx...

    const article = props.pageContext.article;
    const image = article.banner?.src?.childImageSharp?.gatsbyImageData?.images?.fallback?.src;
    return (
        <>
            <Seo title={article.title} description={article.description || undefined} useTitleTemplate={true} />
            <Helmet>
                <meta property="og:image" content={image} />
                <meta property="twitter:image" content={image} />
                <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
                <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
            </Helmet>
            <Page>

I'm not entirely "comfortable" with how nested the actual image is in the Gatsby Image Wrapper, but it seems to work?

konstantinmuenster commented 1 year ago

It's correct that the image src is such deeply nested. The actual image gets processed by gatsby-image during the build and it spits out the gatsbyImageData object.

Great to hear that you found a working solution. I leave this issue open until I added proper support for this in the core theme 👍