Set the image used for social network sharing?

[EGreg (Greg Magarshak)]

Yes this is a great fallback.

[codinghorror (Jeff Atwood)]

Also apologies I forgot we added that other per-category social media share image setting. I kinda blacked that out due to trauma over the earlier discussion

[techAPJ (Arpit Jalan)]

@codinghorror

when no image exists in the first post, go ahead and use the site logo

When working on adding this feature I caught a bug. I noticed that right now here is how we prioritize OpenGraph image: first post image > opengraph_image > twitter_summary_large_image_url > site_apple_touch_icon_url.

And https://discourse.codinghorror.com did had the site_apple_touch_icon_url so the twitter:image tag was present <meta name="twitter:image" content="/images/default-apple-touch-icon.png" />.

Turns out Twitter does not support relative image paths. This is now fixed via:

FIX: use absolute url for `/images/example.png` links

Above commit also adds logo_url as last resort for OpenGraph/Twitter image tag. This updates opengraph image priority to: first post image > opengraph_image > twitter_summary_large_image_url > site_apple_touch_icon_url > logo_url.

Verified the fix on https://discourse.codinghorror.com:

[Falco]

@techAPJ

first post image > opengraph_image > twitter_summary_large_image_url > site_apple_touch_icon_url > logo_url

When set, the large_icon may be preferable than site_apple_touch_icon_ur because it’s larger. Also we did bug everyone to set it already.

[gerhard (Gerhard Schlager)]

I added the large_icon as fallback. The new priority is: first post image > opengraph_image > twitter_summary_large_image_url > site_large_icon_url > site_apple_touch_icon_url > site_logo_url .

REFACTOR: Simplify finding the opengraph image · discourse/discourse@ec7f418 · GitHub

This also removes the warning that has been flooding the logs.

SiteSetting.logo_url has been deprecated and will be removed in the 2.4 Release. Please use SiteSetting.logo instead

[jord8on (Jordan)]

Many of the posts in our community may contain several images.

Is there a way to tag an image or define, for a specific topic, which image to use for opengraph and social sharing?

Also, the Topic List Previews (by @merefield and @angus) plugin takes the first image in a post and uses that for the thumbnail or tile image. I’m wondering if there’s a way to tell the plugin to use the 2nd, or 3rd, or 8th image, etc.

---

btw @codinghorror, I got to test out that Better Insert Hyperlink feature from the 2.4 release, above, to find Topic List Previews plugin discussion, and right here with this hyperlink. Snazzy new feature!!

[merefield (Robert)]

@jord8on

I’m wondering if there’s a way to tell the plugin to use the 2nd, or 3rd, or 8th image, etc.

That’s already in the plugin. I added a thumbnail picker last year (btw, I’ve not considered how that might impact social sharing, feel free to experiment!).

[codinghorror (Jeff Atwood)]

@jord8on

Is there a way to tag an image or define, for a specific topic, which image to use for opengraph and social sharing?

Yes – the first big image is the one that is used. So make sure the most important image is first (and large enough, tiny images won’t work).

[jord8on (Jordan)]

@merefield and @codinghorror - I can confirm that using the Topic List Previews tool not only allows you to select which image you would like to use as the featured image for your thumbnails but when doing so, that image you select will also become the image that appears for opengraph and social sharing, instead of the default setting of displaying the first image in the post!

Here’s an example where I’ve chose to use the 8th image with the “Select Thumbnail” feature and here’s how the post now appears when sharing (and on my “Latest” topics page):

Pickleball made a huge dent in my life... Here's the story

Here’s how to select a thumbnail image, using the Topic List Preview plugin…

[david (David Taylor)]

Per la cronaca: Discourse Core ha la capacità di farlo da febbraio 2021. Potremmo valutare di renderlo più facile da scoprire in futuro, ma per ora puoi modificare manualmente il markdown dell’immagine e impostarne una come miniatura.

Per impostazione predefinita, Discourse utilizzerà la prima immagine nell’OP (Original Post) dell’argomento. Se desideri selezionare un’immagine diversa dall’OP, aggiungi |thumbnail al markdown. Ad esempio

![alttext|100x100](upload://aaa)
![alttext|100x100|thumbnail](upload://bbb) << questa sarà la miniatura

(questo è stato originariamente discusso nell’argomento ufficiale Topic List Thumbnails, ma questa funzionalità di selezione della miniatura di base non è specifica di questo componente del tema)