Discussions » Creation Requests

Need help to Load HI-RES images by .replace JavaScript function

§
Posted: 2023.04.20.

Newbee as you see.

I want since a long time to understand how to use the .replace JavaScript function.

Here i do a test on userstles.world.
By example my page:

Userstyles by Decembre

SMALL IMAGE:
https://userstyles.world/preview/27/0t.jpeg
LARGE IMAGE:
https://userstyles.world/preview/27/0.jpeg

In Firebug, when i delete by hand the "t" of 0t.jpeg:
the bigger image is shown.

So, i test 2 solutions fund, but no one work.
:-(

1 - This one:

// TEST USERSTYLES.WOLD
$('.card-header.thumbnail>picture>img').attr('src', function(i, val) {
return val.replace('/0t.jpeg', '/0.jpeg')
});



2 - And this one (the "noadpic" part come from an example i found but not need here)


// load hi-res thumbnails and remove generic category pics
$('.card-header.thumbnail>picture>img').each(function() {
if ($(this).attr('src').match('noadpic')) {
$(this).remove();
} else {
src = $(this).attr('src').replace('/0t.jpeg', '/0.jpeg');
$(this).attr('src', src);
}
$(this).addClass('img-thumbnail');
});


What's wrong or what the good solution to achieve that ?

NotYouMod
§
Posted: 2023.04.20.
Edited: 2023.04.20.

There is solution:

(function() {
    document.querySelectorAll('.card-header.thumbnail source, .card-header.thumbnail img').forEach(elem => {
        if(elem.tagName.toLowerCase() === 'source') {
            const newSrcset = elem.srcset.replace(/0t\.webp$/, '0.webp');

            elem.srcset = newSrcset;
        } else {
            const newSource = elem.src.replace(/0t\.jpeg$/, '0.jpeg');

            elem.src = newSource;
        }
    });
})();

You were changing <img> element, which is not correct in this case. This wasn't working because your browser supports images with .webp file extension, so it was choosing <source> as image, if it doesn't support .webp file extension, then it chooses <img> as image (this happens only in this case, with this HTML structure).

§
Posted: 2023.04.21.
Edited: 2023.04.21.

Waaahou, it was never possible to me to find that!
Magical...
And evidently it work!
"NotYou, Big thanks.

It is possible to limit the size of the image?
Some of them a very big when i show them with an addon to preview image on hover.

PS:
I don't "clearly" understand your explanation,
but it is the occasion for me to read:
A Guide to the Responsive Images Syntax in HTML

§
Posted: 2023.04.21.

I notice they serve an other size too (by example for "Youtube WideScreen (New Design Polymer)":

src="https://userstyles.world/preview/27/1t.jpeg"

I can you handle it too ?

NotYouMod
§
Posted: 2023.04.21.

There is a new solution that works with any numbers:

(function() {
    document.querySelectorAll('.card-header.thumbnail source, .card-header.thumbnail img').forEach(elem => {
        if(elem.tagName.toLowerCase() === 'source') {
            const newSrcset = elem.srcset.replace(/\d+t\.webp$/, getNewSource);

            elem.srcset = newSrcset;
        } else {
            const newSource = elem.src.replace(/\d+t\.jpeg$/, getNewSource);

            elem.src = newSource;
        }

        function getNewSource(m) {
            const indexOfDot = m.indexOf('.')
            const fileExtenstion = m.slice(indexOfDot)
            const fileName = m.slice(0, indexOfDot)

            return fileName.replace('t', '') + fileExtenstion
        }
    });
})();

It is possible to limit the size of the image?

No, if server doesn't give ability to do that, then no.

Some of them a very big when i show them with an addon to preview image on hover.

Just limit image's size using max-width, property, what's a problem?

.card-header.thumbnail picture {
    max-width: 500px;
}

I don't know if that's going to work, but you should try at least.

§
Posted: 2023.04.21.
Edited: 2023.04.21.

One moooore time:
Thanks

I have now a working solution to applies on others sites
:-)

About my request to limiting the image size.

I added to the test userscript:

.card-header.thumbnail picture {
max-width: 500px !important;
border: 10px dashed aqua !important;
}


Inside (the forum dont show the code inside just that):
// add CSS

$('head').append(`

`)


But the addon i use open the full size image (as it should) which don't seems affected by my CSS:
I don't see by example, my big dashed aqua border around image nor in the page nor in Firebug.

Maybe i do a mistake to how add CSS in an userscript?

And the Preview image sometime is too big (equal to the size of its/my original posting/upload).

I thinking it should be possible to limit their size by adding attributes (but as you said no...).

Anyway, i solve partially my little problem by check an option in the addon to don't cover my mouse pointer with the image preview.

Now, i do to make my own hover image by CSS:
Should be possible because now, with your last solution, i have a big resolution image to start the work:
Make a CSS zoom with CSS with a too small image always give bad result;

§
Posted: 2023.04.21.

Ok, i need use markdown:

// add CSS

$('head').append(`
<style type='text/css'>

.card-header.thumbnail picture {
    max-width: 500px !important;
    border: 10px dashed aqua !important;
}

</style>
`)

    console.log('USw: CSS added')
NotYouMod
§
Posted: 2023.04.21.

@decembre You can use GM_addStyle function to make code more readable.

You should add it in user-script meta values, and then you will be able to use it:

// ==UserScript==
// @name New Userscript
// @description The Description
...
// @grant GM_addStyle
// ==/UserScript==

GM_addStyle('body { color: red; }') // Now you can easily add any styles you want.

P.S. You don't have to add type="text/css" in <style> element, it's a deprecated feature (That means that this is bad practice in HTML). More information in MDN.

§
Posted: 2023.04.21.
Edited: 2023.04.21.

// @grant GM_addStyle is ok, thanks.

I take some time to find where put the CSS:
i don't understand very well the syntax / how to write userscript .
CSS is so easy.

If i wanted use my solution, it was because i wanted a multi lines CSS possibility:
// @grant GM_addStyle don't want that (CSS should be in one line)

§
Posted: 2023.04.22.

// ==UserScript==
// @name UserStle.Worl [USw] - HI-RES Pics OK by NotYou - v.1
// @description Higher resolution screenshot
// @version 1.0
// @author decembre
// @namespace https://greasyfork.org/fr/users/8-decembre
// @icon https://external-content.duckduckgo.com/ip3/www.babelio.com.ico
// @include https://userstyles.world/*
// @license unlicense

// @grant GM_addStyle

// ==/UserScript==


// TEST USERSTYLES.WORLD OK
// BY NotYou in:https://greasyfork.org/fr/discussions/requests/179476-need-help-to-load-hi-res-images-by-replace-javascript-function

// NOTYOU - SOLUTION A
/*
(function() {
document.querySelectorAll('.card-header.thumbnail source, .card-header.thumbnail img').forEach(elem => {
if(elem.tagName.toLowerCase() === 'source') {
const newSrcset = elem.srcset.replace(/0t\.webp$/, '0.webp');

elem.srcset = newSrcset;
} else {
const newSource = elem.src.replace(/0t\.jpeg$/, '0.jpeg');

elem.src = newSource;
}
});
})();
*/

// NotYOU - SOLUTION B (work with any number 0t.jpeg / 1t.jpeg / 2t.jpeg etc...
(function() {
document.querySelectorAll('.card-header.thumbnail source, .card-header.thumbnail img').forEach(elem => {
if(elem.tagName.toLowerCase() === 'source') {
const newSrcset = elem.srcset.replace(/\d+t\.webp$/, getNewSource);

elem.srcset = newSrcset;
} else {
const newSource = elem.src.replace(/\d+t\.jpeg$/, getNewSource);

elem.src = newSource;
}

function getNewSource(m) {
const indexOfDot = m.indexOf('.')
const fileExtenstion = m.slice(indexOfDot)
const fileName = m.slice(0, indexOfDot)

return fileName.replace('t', '') + fileExtenstion
}

// add CSS with GM_addStyle - ONE Line
GM_addStyle('.card-header.thumbnail picture img { max-width: 500px !important; border: 10px dashed aqua!important;}')
});
})();
console.log('USw: CSS added')

NotYouMod
§
Posted: 2023.04.22.

I take some time to find where put the CSS:
i don't understand very well the syntax / how to write userscript .
CSS is so easy.

Well, you just need to learn JavaScript and JavaScript's syntax.

If i wanted use my solution, it was because i wanted a multi lines CSS possibility:
// @grant GM_addStyle don't want that (CSS should be in one line)

*Easter Island statue face*. You can use template string instead of normal one.

GM_addStyle(`
body {
  color: red; /* this still works */
}
`)
NotYouMod
§
Posted: 2023.04.22.
Edited: 2023.04.22.

Okay, I see few problems in your user-script.

  1. Do not use @include instead use @match, because @include may not be supported in Manifest V3, that will make your script deprecated.
  2. Instead of writing protocol, use *, so your script will work in http and either in https webpage.
  3. Please, always use tabulation.

There is your modified user-script:

// ==UserScript==
// @name         UserStle.Worl [USw] - HI-RES Pics  OK by NotYou - v.1
// @description  Higher resolution screenshot
// @version      1.0
// @author       decembre
// @namespace    https://greasyfork.org/fr/users/8-decembre
// @icon         https://external-content.duckduckgo.com/ip3/www.babelio.com.ico
// @match        *://userstyles.world/*
// @license      Unlicense

// @grant        GM_addStyle

// ==/UserScript==

// TEST USERSTYLES.WORLD OK
// BY NotYou in:https://greasyfork.org/fr/discussions/requests/179476-need-help-to-load-hi-res-images-by-replace-javascript-function

// NotYou - SOLUTION B (works with any numbers 0t.jpeg / 1t.jpeg / 2t.jpeg etc.)
(function() {
    document.querySelectorAll('.card-header.thumbnail source, .card-header.thumbnail img').forEach(elem => {
        if(elem.tagName.toLowerCase() === 'source') {
            const newSrcset = elem.srcset.replace(/\d+t\.webp$/, getNewSource);

            elem.srcset = newSrcset;
        } else {
            const newSource = elem.src.replace(/\d+t\.jpeg$/, getNewSource);

            elem.src = newSource;
        }

        function getNewSource(m) {
            const indexOfDot = m.indexOf('.');
            const fileExtenstion = m.slice(indexOfDot);
            const fileName = m.slice(0, indexOfDot);

            return fileName.replace('t', '') + fileExtenstion;
        }

        // add CSS with GM_addStyle
        GM_addStyle(`.card-header.thumbnail picture img {
          max-width: 500px !important;
          border: 10px dashed aqua!important;
        }
        `);
    });
})();

console.log('USw: CSS added');
§
Posted: 2023.04.22.

Thanks for your time past on my request.

A - Learn JavaScript and JavaScript's syntax:

I know, but its hard for me and sometime i don't know the English (and sometime the French term ..) mane of a JavaScript syntax...
by example it take to me a long time to found the English name of a backtick `.
in French, in Littéraux de gabarits [FR - MDN DOCS]:
"Caractères accent grave".
When i found an explanation in English vs French, it's a little bit confusing.

Maybe too old.

B -You can use backtick-delimited template / template string (` `):
Haaa yes, i use it (the hell of copy/past...), but don't know it was possible in other places:
Good tip for me which i need to studies or test.

1 - For @include vs. @match:
I know the problem, but i use Waterfox Classic and Greasemonkey 3.16 and sometime //@match don't work.
By example for some userscripts i install, i need to add identical @include to make the script working.
I never understand why.

So, normally i use both.
It is seems possible to mixing them.

2 - Writing protocol, use *:
I know too, but here it was just a test.

3 - Always use tabulation:
Yeap, i need to remember that.
Here it's just the result of many copy past of snippets i found a long time ago...
:-)

§
Posted: 2023.10.01.

I need similar help for Flickr too.

I want Small Hi-Res thumbnail in a Info modal.
But here, it use background image.
by example:
background: rgba(0, 0, 0, 0) url("//live.staticflickr.com/65535/53222737116_15cf94e456_s.jpg") repeat scroll 0 0;

I want replace the "_s.jpg" by "_w.jpg" of it.
I tested your solution but fail, as usual :-)

I think i found the right Regexp for it:
const newSource = elem.style.replace(/\_s\.jpg/, getNewSource);

The CSS selector should be:
.recent-photos a

Note:
(It's difficult to "capture" this type of modal:
It open and close to quickly on mouse hover...)

NotYouMod
§
Posted: 2023.10.02.

Firstly, where's URL man?

And secondly, I'm not writing an entire script again just for you.

But, there is a little bit of code that may help you in solving your problem:

function toHighRes(imageNode) {
  imageNode.style.backgroundImage = window.getComputedStyle(imageNode).backgroundImage.replace(/_s\.jpg/, '_s.jpg')
}

imageNode should be an element of document that contains background-image CSS property.

I highly recommend you to learn JavaScript by yourself, it's not that hard as you think.

There are some articles from docs to help you with solving:

§
Posted: 2023.10.02.

Thank for the reply!

The url?
By example this one:
https://www.flickr.com/photos/derek_animal/52154319200

The modal Info appear when you hover the User and the Pool Buddy icon.
In it they are small thumbnails very tiny.
That's these one i want in HI-res.

Thank for the function.
I go to check the links you provided .

NotYouMod
§
Posted: 2023.10.02.

Oh, looks like element is loading dynamically to the page, then you need something like this StackOverflow - How to wait until an element exists?

§
Posted: 2023.10.02.

Oh, looks like element is loading dynamically to the page, then you need something like this StackOverflow - How to wait until an element exists?

Yes.... i suspected something like that when i said to you it was in a modal which appear on hover....

Thanks for the link, but....
It "became difficult" - in fact since a long time - for me:
too many things to approach without enough knowledge.

Anyway, by reusing your precedent help,
i have find a way to have Hi-Res thumbnail in pool (their Admin Small view which is provide only for ... the admin of the pool and not the other users).

I need it because i written an huge userstyles which make these thumbnails (in modal and this particular view) a little bigger and of course a little blurry.

Note:
If you want test it (ONLY with a Large screen, i don't like Flickr on a small Mobile screen):
Flickr WideScreen - BigONE

Post reply

Sign in to post a reply.