Search code examples
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);
    }
}