Thumbnail not loading on X/Mastodon

jpcamara · July 1, 2024, 5:30pm

All of my blogposts (for instance, Your Ruby programs are always multi-threaded: Part 2 - JP Camara) have an image as the first part of the post. On LinkedIn, that gets picked up as the thumbnail, but on Mastodon/X, it just shows up as a generic placeholder thumbnail: JP: "Second post in my Ruby concurrency series is up! …" - Ruby.social

Is there something I can do to fix that for X/Mastodon?

jsonbecker · July 1, 2024, 6:08pm

I’d look at your theme. It appears like you set the opengraph image many times, and LinkedIn is defaulting to the first but other platforms are not. This is in your head. I’m not positive how you’re doing opengraph-- the plug in, your theme, etc.

jpcamara · July 1, 2024, 6:46pm

Interesting insight, thanks! I am not doing anything special - it’s pretty much the stock “Paper” theme I installed from the Plug-ins page. I added some disqus html to the bottom of a template, but otherwise I haven’t done anything. So I guess it’d be impacting everyone using that theme?

jsonbecker · July 1, 2024, 7:25pm

Yes, very likely. Paper has a very complex set of templates for opengraph. Notably, Hugo itself has a stock way of doing this without needing that override.

github.com

microdotblog/theme-paper/blob/master/layouts/partials/templates/opengraph.html

<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />
{{- if .Params.cover.image -}}
{{- if (ne .Params.cover.relative true) }}
<meta property="og:image" content="{{ .Params.cover.image | absURL }}" />
{{- else}}
<meta property="og:image" content="{{ (path.Join .RelPermalink .Params.cover.image ) | absURL }}" />
{{- end}}
{{- else }}

{{- with $.Params.images -}}
{{- range first 6 . }}<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
{{- else -}}
{{- $images := $.Resources.ByType "image" -}}
{{- $featured := $images.GetMatch "*feature*" -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- with $featured -}}
<meta property="og:image" content="{{ $featured.Permalink }}"/>

This file has been truncated. show original

{{ template "_internal/opengraph.html" . }}

I’d recommend trying what happens when you remove theme-paper/layouts/partials/head.html at dcbe6277bbbf6780c4697b5180d2ace51ba4196d · microdotblog/theme-paper · GitHub

and replace it with {{ template "_internal/opengraph.html" . }}

jpcamara · July 2, 2024, 3:52am

It turned out my version of the paper theme did not override the opengraph template, but was using the stock Hugo version, which was outputting every image. I modified the template to output a single og:image, and it hasn’t helped. You can see an example here: Consistent, request-local state - JP Camara

jsonbecker · July 2, 2024, 1:43pm

Looks good here:

Which platform is messy?

jpcamara · July 2, 2024, 9:52pm

Huh, yea it looks great on their website! I’ve attached images of how it looks on x.com when attempting to post, and of the results on x.com and mastodon. I have no idea why it isn’t working there.

This is x: x.com

This is mastodon: JP: "A concurrency "mini" in my Ruby concurrency serie…" - Ruby.social

jpcamara · July 20, 2024, 2:39am

Thanks for the initial suggestion @jsonbecker ! I’m not sure if it just took some time for X/Mastodon to catch up, but after updating my template to only produce one opengraph image, the next time I posted a new blog post (a few days ago) the preview worked!