Overwrite meta og:image image source to use externally public loaded images on topics?

Feature
1

Basically you can see my problem and discussion with plugin author @merefield here ,

He recommends me to request Discourse team to do this for us.

I always use external CDN images on my site, i never upload them on local upload or on object storage because that is too expensive so save images locally or on S3 buckets.

Right now, i can see that my meta og:image tag is not picking up these images, e.g see my this topic How Many Carbs on Keto? - How To Discuss

The image is actually loaded from an external public URL as its IMG SRC. The social media Open graph is always showing my site logo as fall back image, which is not good.

Because of this core discourse behaviour, i don’t see these thumbnails images as detected by the topic list preview plugin too.

How can i overwrite the meta og:image tag to force use my externally uploaded image?

So that i can see the ACTUAL TOPIC IMAGE instead of my site forum logo when i share it on social media sites Sharing Debugger - Meta for Developers

I did try to force add this line on my topic page,

<meta property="og:image" content="https://images.pexels.com/photos/4761347/pexels-photo-4761347.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />

but og:image tag when i see the source of the page is still using my site logo as fallback, it thinks that there is no image on this topic :frowning:

The 1st image on any topic’s 1st post must be picked up my meta og:image tag even if the image hosted on some public URL. Right now it only picks up if the image is uploaded on my own server… but many of us cannot afford to do image hosting ourselves as its too expensive. Help from discourse team to allow this change for us will be very helpful.

@Bcat is having the same problem on his forum.

2 Likes
2

Discourse core only supports using ‘uploads’ as topic thumbnails. They can be local, or hosted on S3, but they must be uploaded to discourse. You can automatically turn hotlinked images into uploads using the “download remote images to local” site setting.

I’m afraid we don’t have any plans to change this behaviour in Discourse.

3 Likes
3

If they are hosted on S3, then how are they uploaded on Discourse? S3 is not on Discourse, it is also a public server to host images. When i use remote images from 3rd party free image public CDNs then they are also accessible by anyone, same with S3. Then why does Discourse not allow / support the public images URLs to be used as topic thumnails?

E.g this URL https://d11a6trkgmumsb.cloudfront.net/optimized/3X/7/1/71abcfa01874c32497d638b372f94c7b9fc021e4_2_1380x718.png
is the picture i just uploaded on meta discourse right now, and this is a public image hosting URL, and my own images URLs look like https://images.pexels.com/photos/4761347/pexels-photo-4761347.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500

and my URLs are also public hosted images, why is discourse not picking mine? Please configure it to use both of them, because as a crawler or open graph crawler both images sources are publicly hosted URLs.

I have already turned this setting on,

image
image2556×708 92.3 KB

but then why my hotlinked images are not being taken as topic thumbnails?

i have also disabled jpg/jpeg uploads in this file setting,

image
image2556×1332 309 KB

i have disabled this to avoid users uploading images directly on my server to save storage space.

As if my forum gets very big, it will become very hard for me to manage storage for soo much images.

Is there any hacky/trick to acheive what i want? i just want to force overwrite the og:image meta tag to use my hotlinked image in topic. How can i simply acheive this? perhpas any HTML code i can put on topic pages to force use this hotlink image src for og:image?

OR can i add a line of code in my site to prevent default or simply remove this meta og:image line which falls back to logo image if discourse fails to detect topic thumbnail?

I tried adding this below line in my topic page post editor

<meta property="og:image" content="https://images.pexels.com/photos/4761347/pexels-photo-4761347.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" />

but for some reason, this code is not being rendered when i see the source code of my topic page, why is that?

this is the page i tried this on Is yoga a Good workout - How To Discuss

How can i prioritise this 1, so that if my page has 2 meta og:image tags, then it should only pick and use MY CUSTOM meta og:image tag?

4

By setting it up like this:

Because Discourse does not have permission to access the S3 bucket and optimize the images for display on the site. Discourse also cannot guarentee that the link will always work - the person who owns the bucket could delete the file.

5

Do you mean my discourse doesn’t have permission to access S3 Bucket of other 3rd party free CDN images sites?
If i can access an image in a browser, then discourse can too, and already discourse is optimising the images i share using hot-links. So i think we need this feature for sure.

i updated my reply above for discourse CDN comparison, please check.

What other cheapest way do you suggest me to host my images in bulk? Because i am afriad that if my site get millions of topics means billions of images, and my Discourse site backup will start getting bigger bigger and very hard and expensive to manage/scale and migrate. What would i do in that case then?

6

It does not have permission to manage and optimize those files.

If you really need this feature, the best option would be to post in the Marketplace and find a plugin developer that can help you build the feature.

7

Thanks , i have opened a PAID topic for the same feature in core or via plugin,

8

This topic was automatically closed after 5 hours. New replies are no longer allowed.