javascriptjquerytampermonkeystylish

Script to remove part of img href on a site


I fired up a game guide on PrimaGames.com. The text is all fine but the images have busted src. Here's an example:

<img src="/media/files/eguide_assets/final-fantasy-xii-the-zodiac-age-eguide/085-105_walkthrough-web-resources/image/wi01.png/PRIMAP/resize/700x-1>">  

At the end of the src URL, you'll notice this odd string:
/PRIMAP/resize/700x-1>

I'm looking to set up a script (Stylish, Tampermonkey, etc) I can apply to PrimaGames.com so that it auto-removes that part of the src URL, which will in turn display the associated image.


Solution

  • This is a fairly standard src rewrite task.

    Here's a complete Tampermonkey / Violentmonkey script that should work on that site for both static and dynamic images:

    // ==UserScript==
    // @name     _Remove post file junk from image sources
    // @match    *://primagames.com/*
    // @noframes
    // @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
    // @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
    // @grant    GM_addStyle
    // @grant    GM.getValue
    // ==/UserScript==
    // @grant    none
    //- The @grant directives are needed to restore the proper sandbox.
    /* global waitForKeyElements */
    
    waitForKeyElements ("img", fixImgSource);
    
    function fixImgSource (jNode) {
        var oldSrc = jNode.attr ("src");
        //-- Does the src have junk after the file suffix?
        if (/\.(png|jpg|gif)./i.test (oldSrc) ) {
            let newSrc = oldSrc.replace (/\.(png|jpg|gif).+$/i, ".$1");
            jNode.attr ("src", newSrc);
        }
    }