Greasy Fork

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 ?

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).

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

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 ?

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.

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;

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')

@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.

// @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)

// ==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')

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 */
}
`)

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');

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...
:-)

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...)

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:

• Loops and iteration
• Document: querySelectorAll() method

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 .

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

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