Image preview in link

[DdHms]

Is there a way to easily add a preview to the shared link?
I'm not even sure if it is an immich issue or immich public proxy

[alangrainger]

I love this idea, should be easy to implement I think.

[DdHms]

@alangrainger wouldn't adding:

    <meta property="og:image" content="<%- items[0]?.thumbnailUrl %>"/>

in gallery.ejs do the trick?

[alangrainger]

Thanks for the bump @DdHms - this is now live in 1.9.1

[DdHms]

Thanks a lot!
I must have missed something because it works only for a gallery. Doesn't a single image also go through gallery.ejs?

[alangrainger]

If sharing a single image, by default the link will directly open the image file so that you can embed it anywhere you would a normal image.

If you want to show an HTML gallery (with og-image) instead that, set singleImageGallery to true in the config.

[DdHms]

Could adding

// Add the og:image header
  const ogImageUrl = immich.buildUrl(immich.apiUrl() + '/assets/' + encodeURIComponent(asset.id) + '/thumbnail', {
    key: asset.key,
    size: 'thumbnail',
    password: asset.password
  })
  res.setHeader('og:image', ogImageUrl)

here do the trick for a single image too?

Do you think it would be useful to add other meta tags?
(Sorry for the nagging I think this is quite useful for user experience, unfortunately I am not at all fluent in typescript or html, more python)

[alangrainger]

Are you certain that it is possible to send the og-image information as a header. I can't see that on the Open Graph protocol, and a web search doesn't turn up anything either.

[DdHms]

You are right! (chatGPT agrees with you)
this is what it suggested is this reasonable to implement?

If you need both Open Graph previews and direct embedding:

Host the image separately and set <meta property="og:image" content="IMAGE_URL">.

Serve the actual image when requested directly (https://example.com/image.jpg).

If embedding fails due to hotlink protection, you might need a proxy server.

[alangrainger]

Yes, that is exactly what we already have and what I mentioned above: #72 (reply in thread)

If you want direct links, turn that setting off. If you want og-image, turn the setting on and you can still directly link to the image by using the image's URL (right-click image, copy URL).