Log in Sign up

Dynamic image for a Twitter Card for each post / permalink

I'm trying to work out a way to generate a unique twitter card for each of my posts, so when an article / permalink is shared on socials it gives a summary based on the first couple lines of the post and uses the first image in the post as the preview image.

Currently I have a share card coming up with the text part of the preview but can't work out how to incorporate the image into it.

Any help would be greatly appreciated.

3 replies

Does your template contain the <meta> tags which ship with the default templates? See head.html lines 8 through 19

<meta property="og:title" content="{{> title}}">
<meta property="og:description" content="{{> description}}">
<meta property="og:type" content="website">
{{#entry}}
{{#thumbnail.large}}
<meta property="og:image" content="{{{url}}}">
<meta name="twitter:card" content="summary_large_image">
{{/thumbnail.large}}
<meta property="og:url" content="{{{absoluteURL}}}">
{{/entry}}
Answered 5 days ago · Improve this answer

Yes it does, but it uses a single head template for all pages. So currently I'm using the following in my head, which will generate the Twitter Card using a pre-determined image on sharing: -

    <meta name="twitter:card" content="summary" />
    <meta name='twitter:site' content='@franczv' />
    <meta name="twitter:creator"  content='@franczv' />
    <meta name='twitter:title' content='{{> title}}' /> 
    <meta name="twitter:description"  content='{{> description}} | Link to {{title}}' />
    {{#entry}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name='twitter:image' content='https://blotcdn.com/blog_1fd6e52b11464888b57d1ebdf17eaebb/_image_cache/4057df64-cb97-435b-a4a3-6eedf76a6fae.jpg' />
{{/entry}}

This adds the generic share image I use but I wanted to know what variable would work to use the first image in a post if there was one available.

Answered 5 days ago · Improve this answer

So what you're really trying to do is add a fallback thumbnail if none exists in the post?

Here's how:

<meta property="og:title" content="{{> title}}">
<meta property="og:description" content="{{> description}}">
<meta property="og:type" content="website">
{{#entry}}
{{#thumbnail.large}}
<meta property="og:image" content="{{{url}}}">
<meta name="twitter:card" content="summary_large_image">
{{/thumbnail.large}}
{{^thumbnail.large}}
<meta property="og:image" content="https://blotcdn.com/blog_1fd6e52b11464888b57d1ebdf17eaebb/_image_cache/4057df64-cb97-435b-a4a3-6eedf76a6fae.jpg">
<meta name="twitter:card" content="summary_large_image">
{{/thumbnail.large}}
<meta property="og:url" content="{{{absoluteURL}}}">
{{/entry}}
Answered 5 days ago · Improve this answer

Markdown allowed
Question or feedback?
Contact us

Tags

developers 61 questions bug 30 questions templates 21 questions posts 20 questions meta 19 questions metadata 17 questions resolved 16 questions how 12 questions markdown 9 questions tags 9 questions More tags →
Subscribe for changes
RSS Feed of latest questions