Wrong thumbnail image displayed for a post with anchor link to image gallery

[YMS444]

Requirements

• This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
• Please check to see if this issue already exists.
• It's a single bug. Do not report multiple bugs in one issue.
• It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

I reported this for kbin first (https://codeberg.org/Kbin/kbin-core/issues/745), then saw that it also affects Lemmy itself.

Today, a a post with a cartoon image was made on Lemmy instance feddit.de:

https://feddit.de/post/1572831

The link given there is an anchor link to an image gallery:

https://www.spiegel.de/fotostrecke/cartoon-des-tages-fotostrecke-142907.html#bild-0265ed4e-142d-4143-9a34-302da1002e06

That gallery page contains multiple cartoons, the one to display is number 20/35 currently (I don't know if that page is updated occassionally).

On Feddit itself, no thumbnail is displayed in either the post or any feed that post comes up. Only the post content itself contains an image, the one that was wanted by the author (see matching title).

Other Lemmy (and kbin) instances do display a thumbnail, but the wrong one - just the first image from that gallery page. See e.g.

https://lemmy.world/post/1458354
https://lemmy.ml/post/2027013
(both currently on 0.18.2, just like feddit.de itself)

The image URL linked in the titles and as a source is correct, and the image inlined in the post is as well (coming directly from https://feddit.de/pictrs/image/ef98ad91-41e6-4072-870d-489575cc1da9.jpeg, not from the source page), but the thumbnail displayed in the top or in feeds is the wrong one (i.e. not the one intended by the post author and discussed by the users).

Original Feddit post (correct image, no thumbnail):

Feed on Feddit (no thumbnail):

Federated post on lemmy.world as an example (correct image inlined, but thumbnail is the first image from the gallery):

Federated post in a lemmy.world feed as an example (wrong thumbnail):

Steps to Reproduce

See summary on how to see the existing issue.

(Probably), post a link to https://www.spiegel.de/fotostrecke/cartoon-des-tages-fotostrecke-142907.html#bild-0265ed4e-142d-4143-9a34-302da1002e06 and have it federated to another instance to see the other instance taking the wrong thumbnail image.

Technical Details

Not device-dependend.

Lemmy Instance Version

0.18.2

Lemmy Instance URL

https://lemmy.world/post/1458354

[lionirdeadman]

I think this is ultimately a backend issue that is seen on the frontend, transfering

[Nutomic]

This works as expected, Lemmy takes the image which is specified in opengraph metadata. Only way to fix this would be on spiegel.de side to generate different metadata if http anchor is set.

<meta property="og:image" content="https://cdn.prod.www.spiegel.de/images/1bb81751-bd89-48c0-a114-56675ce1b6d7_w1200_r1.778_fpx47_fpy36.jpg">