Tool Fix Forum Images

UPDATE:

A workaround seems to have been implemented officially on the forums now. However, probably for safety reasons, it only applies to imgur. Other platforms like postimage and imgBB will still have broken images. Hence, the script might still come in handy.



ORIGINAL POST:

Hey people. For around a month now, externally hosted images on most xenforo based forums have been broken. I've seen some people thinking it's because imgur started removing old images, and while that may be the case for some of them, most of the images still exist. They just don't load through the forums' image proxy for whatever reason (likely something to do with cloudflare again, ffs). The issue also affects other image hosting websites, but not all of them, for some reason.

So in a nutshell, I made a small script that fixes images for all bbcode based platforms across the internet. It does this by ditching the forums' image proxy altogether, and displays the image straight from source. Security and tracking might be compromised, but hey, at least it works. So far I haven't seen a single broken image, even in 7 year old threads.

Spoiler: Tutorial

1. Install a browser extension that can run scripts. There's a good chance you're already using one, if you have greasemonkey, tampermonkey or violentmonkey installed. This tutorial will be using tampermonkey, since it's available for both, firefox and chrome. Some minor changes might need to be made, if you're using one of the other extensions.


2. Create a new script. You can do this by clicking on the extension icon in the top right corner.



3. You should now be at a code editor screen. Erase the default code, and paste in all of the contents of this code block:

Spoiler: The script

Code:

// ==UserScript==
// @name         BBCode Image Fix
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Because Cloudflare eats ass
// @author       Aarontti
// @match        *://forums.wynncraft.com/*
// ==/UserScript==

(function()
 {
    // Get all images in posts, signatures, etc
    const elements = document.querySelectorAll(".bbCodeImage");

    // Replace proxy URLs with original URLs
    elements.forEach(element =>
    {
        const src = element.getAttribute("src");
        element.setAttribute("src", unProxifyLink(src));
    });

    // Extracts link from proxy, but leaves attached files as-is
    function unProxifyLink(link)
    {
        const urlParams = new URLSearchParams(link.split('?')[1]);
        const imageParam = urlParams.get('image');

        if (imageParam)
        {
            const actualLink = decodeURIComponent(imageParam);
            return actualLink;
        }

        return link;
    }
})();

Example:



4. Save the script with CTRL+S or from File->Save

Aaaand you're done! Previously broken images should now work whenever you load a page on the forums. If you want to toggle the script off or on, you can do so from the same dropdown menu from step 1. If you have any problems with installation or the script doesn't work, contact me on this thread or in PMs


5 (OPTIONAL). The script is set up to only affect wynncraft forums, but as I said before, the issue persists on several other websites as well. If you want, you can go back to the script and change the "match" line to whatever sites you want to be affected

Spoiler: TEST YOUR SCRIPT

Baseline: You should see this with and without the script


Imgur test: This image should now load properly even without the script


Other image hosts where the workaround seemingly isn't applied:
Postimage:

ImgBB:


Attachments: Hosted directly on the forums, and should remain unaffected by the script. If it doesn't load with the script enabled, report it as a bug on this thread.

 

This is a blessing