PreviewCard sometimes has width and height of 0 despite there being an image

[daprice]

Steps to reproduce the problem

1. Call any API endpoint that includes a PreviewCard, such as https://mastodon.social/api/v1/statuses/112315527391062666

Expected behaviour

If the preview card has an image, the width and height attributes should match the width and height of the image

Actual behaviour

Sometimes the preview card has an image with nonzero width and height, but the width and height attributes of the preview card are 0

Detailed description

When the API returns a width and height that do not match the actual dimensions of the image, it can cause layout problems for clients. In the web UI, this manifests as the rectangular image being mistakenly cropped to a square.

For example, https://mastodon.social/@targetdrone/112315527391062666

In my own client app I’m simply discarding the image if the width or height is 0, because there’s no good way to predict what shape the image will be and I want to avoid awkward cropping or stretching. Of course, it would be better if the values were accurate so I could display the image.

Mastodon instance

mastodon.social, mastodon.online, mas.to all seem to have the issue for previews of this particular link

Mastodon version

seen on servers running v4.3.0-nightly.2024-04-18 and v4.2.8

Technical details

All links to “whentaken.com” appear to have the issue, but I’ve occasionally seen it with others as well.

Prettified response from the API mentioned above:

{
    "id": "112315527391062666",
    "created_at": "2024-04-22T15:15:40.907Z",
    "in_reply_to_id": null,
    "in_reply_to_account_id": null,
    "sensitive": false,
    "spoiler_text": "",
    "visibility": "public",
    "language": "en",
    "uri": "https://mastodon.social/users/targetdrone/statuses/112315527391062666",
    "url": "https://mastodon.social/@targetdrone/112315527391062666",
    "replies_count": 0,
    "reblogs_count": 0,
    "favourites_count": 0,
    "edited_at": null,
    "content": "<p><a href=\"https://mastodon.social/tags/WhenTaken\" class=\"mention hashtag\" rel=\"tag\">#<span>WhenTaken</span></a> #55 (22.04.2024)</p><p>I scored 823/1000 🎉</p><p>1️⃣ 📍 1001 km - 🗓️ 8 yrs - ⚡ 159 / 200<br />2️⃣ 📍 808 km - 🗓️ 2 yrs - ⚡ 174 / 200<br />3️⃣ 📍 263 km - 🗓️ 19 yrs - ⚡ 149 / 200<br />4️⃣ 📍 262 km - 🗓️ 1 yrs - ⚡ 190 / 200<br />5️⃣ 📍 832 km - 🗓️ 13 yrs - ⚡ 151 / 200</p><p><a href=\"https://whentaken.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"\">whentaken.com</span><span class=\"invisible\"></span></a></p>",
    "reblog": null,
    "application": {
        "name": "Web",
        "website": null
    },
    "account": {
        "id": "109243945898311544",
        "username": "targetdrone",
        "acct": "targetdrone",
        "display_name": "John Deters",
        "locked": false,
        "bot": false,
        "discoverable": false,
        "indexable": false,
        "group": false,
        "created_at": "2022-10-28T00:00:00.000Z",
        "note": "<p>Hacking computers since 1973, and so happy that there&#39;s always more than ever to learn! 
Long time developer turned to <a href=\"https://mastodon.social/tags/cryptography\" class=\"mention hashtag\" rel=\"tag\">#<span>cryptography</span></a> and <a href=\"https://mastodon.social/tags/InfoSec\" class=\"mention hashtag\" rel=\"tag\">#<span>InfoSec</span></a> by day; <a href=\"https://mastodon.social/tags/SDR\" class=\"mention hashtag\" rel=\"tag\">#<span>SDR</span></a>, <a href=\"https://mastodon.social/tags/3Dprinting\" class=\"mention hashtag\" rel=\"tag\">#<span>3Dprinting</span></a>, <a href=\"https://mastodon.social/tags/homeassistant\" class=\"mention hashtag\" rel=\"tag\">#<span>homeassistant</span></a> and <a href=\"https://mastodon.social/tags/homeautomation\" class=\"mention hashtag\" rel=\"tag\">#<span>homeautomation</span></a>, and any ridiculously shiny subject that crosses my feeds by night.</p><p>As for other people, all are welcome on my lawn. Except nazis. I hate those guys.</p>",
        "url": "https://mastodon.social/@targetdrone",
        "uri": "https://mastodon.social/users/targetdrone",
        "avatar": "https://files.mastodon.social/accounts/avatars/109/243/945/898/311/544/original/8ecbfb2ffada0a8f.png",
        "avatar_static": "https://files.mastodon.social/accounts/avatars/109/243/945/898/311/544/original/8ecbfb2ffada0a8f.png",
        "header": "https://mastodon.social/headers/original/missing.png",
        "header_static": "https://mastodon.social/headers/original/missing.png",
        "followers_count": 43,
        "following_count": 138,
        "statuses_count": 888,
        "last_status_at": "2024-04-22",
        "hide_collections": false,
        "noindex": false,
        "emojis": [],
        "roles": [],
        "fields": []
    },
    "media_attachments": [],
    "mentions": [],
    "tags": [
        {
            "name": "whentaken",
            "url": "https://mastodon.social/tags/whentaken"
        }
    ],
    "emojis": [],
    "card": {
        "url": "https://whentaken.com/",
        "title": "WhenTaken",
        "description": "",
        "language": "en",
        "type": "link",
        "author_name": "",
        "author_url": "",
        "provider_name": "",
        "provider_url": "",
        "html": "",
        "width": 0,
        "height": 0,
        "image": "https://files.mastodon.social/cache/preview_cards/images/090/239/912/original/1b4c278bd41d7feb.png",
        "image_description": "",
        "embed_url": "",
        "blurhash": "UB6t%#tRIURPfQj[fQay4TRP%MtRf7ayayj[",
        "published_at": null
    },
    "poll": null
}