Imgur images are not shown

[blued-gear]

Describe the bug
When a post is a link to an imgur.com image, it is neither shown in preview nor in full view.
It is recognized as media but when full view is opened, the loading circle is shown shortly and then the space where the image should be just stays empty.

On which Mbin instance did you find the bug?
fedia.io
kbin.earth

Which Mbin version was running on the instance?
1.7.3

To Reproduce
Steps to reproduce the behavior:

1. Go for example to this post
2. Click the button to show the media
3. See that it is not shown

Expected behavior
The image is shown in full size.

Desktop

• OS: Linux
• Browser: Librewolf 133.0-3 (with identity-hiding extensions), Firefox 133.0, Chromium 131.0.6778.108

[BentiGorlich]

The problem is that imgur is rate limiting the servers which have to fetch the embed link. Maybe there needs to be a better cache logic so that this does not happen

[blued-gear]

Is there a need to let Mbin cache every image?
Maybe if it can't be fetched by the server then the original image can be embedded into the users page.

[BentiGorlich]

Nevermind, I just checked the given example and for that we just generate the wrong html for some reason...

<a href="https://i.imgur.com/nlYT5OX.jpeg" class="embed-link"></a>

[BentiGorlich]

It works on a dev machine just fine:

So it may have something to do with ratelimiting by imgur...

[BentiGorlich]

So yeah it is a ratelimiting issue. Curl headers when getting the url (https://i.imgur.com/nlYT5OX.jpeg) from gehirneimer.de:

curl -I https://i.imgur.com/nlYT5OX.jpeg
HTTP/2 429 
retry-after: 0
cache-control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
accept-ranges: bytes
date: Sun, 08 Dec 2024 21:18:53 GMT
x-served-by: cache-fra-etou8220131-FRA
x-cache: MISS
x-cache-hits: 0
x-timer: S1733692734.759620,VS0,VE0
strict-transport-security: max-age=300
access-control-allow-methods: GET, OPTIONS
access-control-allow-origin: *
server: cat factory 1.0
content-length: 0

[blued-gear]

As a workaround, I wrote an Userscript (for e.g. Violentmonkey) which directly embeds the images into the page.
Just add it as a new Userscript and adjust the URLs in @match.

// ==UserScript==
// @name        Mbin Imgur fix
// @namespace   Mbin
// @match       https://fedia.io/*
// @match       https://kbin.earth/*
// @grant       none
// @version     1.0
// @author      -
// @description directly embed imgur images
// ==/UserScript==

(function() {
	const elms = document.querySelectorAll('article.entry.section.subject.show-preview');
  for(let elm of elms) {
    const imgurA = elm.querySelector('header h2 span a');
    if(imgurA == null) continue;
    if(!imgurA.href.startsWith('https://i.imgur.com/')) continue;

    const img = document.createElement('img');
    img.src = imgurA.href;
    img.style = 'max-width: 80vh';
    elm.querySelector('footer').appendChild(img, 'beforeend');
  }
})();