IMDB bigger thumbnails/images/poster on chart pages

edits image url to get the full size picture and increases poster size

< Feedback on IMDB bigger thumbnails/images/poster on chart pages

Review: Good - script works

§
Posted: 2023-04-18

Your script can work on search too.

Modifications i do ...

ADD:
// @match https://www.imdb.com/find/?q=*
// @include https://www.imdb.com/find/?q=*

AND:
// for sites like search
// https://www.imdb.com/find?q=invin
// Array.from(document.querySelectorAll(".primary_photo a img")).map(x => makeMods(x, false));
Array.from(document.querySelectorAll(".ipc-media.ipc-media__img img")).map(x => makeMods(x, false));

I use this CSS to achieve a good result to view the full poster on hover with an addon / userscript which preview image on hover:

/* (new30) TEST for GM BIG THUMBNAILS" */
.ipc-media.ipc-media__img img {
display: inline-block !important;
width: 100% !important;
min-width: 50px !important;
max-width: 50px !important;
height: 100% !important;
min-height: 74px !important;
max-height: 74px !important;
object-fit: contain !important;
border: 1px solid aqua !important;
}

§
Posted: 2023-04-19
Edited: 2023-04-19

Some corrections for the CSS (MAtch Only Search results POSTERs and PERSONs):

/* START == (new30) URL-PREF - SEARCH PAGES */
@-moz-document url-prefix("https://www.imdb.com/find/?q=") {

/* (new30)URL-PREF - SEARCH PAGES - TEST for GM BIG THUMBNAILS" */

/* (new30)URL-PREF - SEARCH PAGES - RESULTS - MOVIES /PERSONS */
.ipc-page-section[data-testid="find-results-section-name"] .ipc-media.ipc-media__img img ,
.ipc-page-section[data-testid="find-results-section-title"] .ipc-media.ipc-media__img img {
display: inline-block !important;
width: 100% !important;
min-width: 50px !important;
max-width: 50px !important;
height: 100% !important;
min-height: 74px !important;
max-height: 74px !important;
object-fit: contain !important;
/* border: 1px solid aqua !important; */
}
/* (new30) URL-PREF - SEARCH PAGES - POSTER - RECENTLY VIEWVED */
.ipc-media.ipc-media--poster-m.ipc-poster__poster-image.ipc-media__img img {
height: 100% !important;
object-fit: contain !important;
}

/* END == (new30) URL-PREF - SEARCH PAGES */
}

Alistair1231Author
§
Posted: 2023-04-28

I will take a look at this soon. Thanks for the suggestion!

§
Posted: 2023-04-29

:-)

Alistair1231Author
§
Posted: 2023-05-03

I made the changes you proposed and added GM_addStyle to apply the CSS. This doesn't actually change the search result image sizes for me. This is the script I came up with, however the images don't get bigger on the search page.

Modified Script ```javascript // ==UserScript== // @name IMDB bigger thumbnails/images/poster on chart pages and search // @namespace https://github.com/Alistair1231/my-userscripts/ // @version 0.3.4 // @description Edits image URL to get the full-size picture and increases poster size // @author Alistair1231 // @match https://www.imdb.com/chart* // @match https://www.imdb.com/find/?q=* // @icon https://www.google.com/s2/favicons?domain=imdb.com // @downloadURL https://github.com/Alistair1231/my-userscripts/raw/main/imdbBigCharts.user.js // @grant GM_addStyle // @license GPL-3.0 // ==/UserScript== GM_addStyle(` .ipc-media.ipc-media__img img { display: inline-block !important; width: 100% !important; min-width: 50px !important; max-width: 50px !important; height: 100% !important; min-height: 74px !important; max-height: 74px !important; object-fit: contain !important; border: 1px solid aqua !important; } /* START == (new30) URL-PREF - SEARCH PAGES */ @-moz-document url-prefix("https://www.imdb.com/find/?q=") { /* (new30)URL-PREF - SEARCH PAGES - TEST for GM BIG THUMBNAILS" */ /* (new30)URL-PREF - SEARCH PAGES - RESULTS - MOVIES /PERSONS */ .ipc-page-section[data-testid="find-results-section-name"] .ipc-media.ipc-media__img img , .ipc-page-section[data-testid="find-results-section-title"] .ipc-media.ipc-media__img img { display: inline-block !important; width: 100% !important; min-width: 50px !important; max-width: 50px !important; height: 100% !important; min-height: 74px !important; max-height: 74px !important; object-fit: contain !important; /* border: 1px solid aqua !important; */ } /* (new30) URL-PREF - SEARCH PAGES - POSTER - RECENTLY VIEWED */ .ipc-media.ipc-media--poster-m.ipc-poster__poster-image.ipc-media__img img { height: 100% !important; object-fit: contain !important; } /* END == (new30) URL-PREF - SEARCH PAGES */ } `); function makeMods(x, late) { if (x.flag == null) { x.flag = 0; } if (late == false && x.flag != 2) { try { let scale = 140 / x.width; x.width *= scale; x.height *= scale; if (x.height >= 208) { x.height = 208; } x.setAttribute("style", "object-fit: cover;"); let match = x.src.match(/https:\/\/m\.media-amazon\.com\/images\/[MS]\/[^\.]+\._V\d_/); if (match != null) { x.src = match[0] + ".jpg"; } x.flag++; } catch (e) { console.error(e); } } else if (late == true) { try { let scale = 80 / x.width; x.width *= scale; x.height *= scale; x.setAttribute("style", "object-fit: cover;"); let match = x.src.match(/https:\/\/m\.media-amazon\.com\/images\/[MS]\/[^\.]+\._V\d_/); if (match != null) { x.src = match[0] + ".jpg"; } } catch (e) { console.error(e); } } } function run() { // for sites like popular movies // https://www.imdb.com/chart/moviemeter/ Array.from(document.querySelectorAll(".posterColumn a img")).map(x => makeMods(x, false)); // for sites like search // https://www.imdb.com/find?q=invin Array.from(document.querySelectorAll(".primary_photo a img")).map(x => makeMods(x, false)); Array.from(document.querySelectorAll(".ipc-media.ipc-media__img img")).map(x => makeMods(x, false)); // actor images Array.from(document.querySelectorAll(".loadlate")).map(x => makeMods(x, true)); setTimeout(run, 2000); } (function () { run(); })(); ```

Even when I do something like this, it doesn't apply:

var searchImages = Array.from(document.querySelectorAll(".ipc-media.ipc-media__img img"))
    searchImages.map(x => makeMods(x, false));
    // remove width and height from search images
    searchImages.map(x => {
        x.removeAttribute("width")
        x.removeAttribute("height")
    });

I don't want to spend too much time digging around with the CSS and such right now.
Can you create a working version of the script and make a pull request at Alistair1231/my-userscripts?

Thanks for your interest and suggestions!

§
Posted: 2023-05-03
Edited: 2023-05-03

In fact, on search page , your script don't work now.
With or whithout adding:
// @include https://www.imdb.com/find/?q=*

So, yet, i can't see or review my CSS.
Before it worked fine and i had time to work on it with CSS.

It's a thing i noticed before:
Sometime your script work or not on search pages.
To be certain if a bigger Thumbnail in load, maybe you can add a class (.BT by example) to:
.ipc-media.ipc-media__img img


I tested v.0.3.3 on Waterfox Classic with Tampermonkey or Greasemonkey 3.16 (with or without include)

§
Posted: 2023-05-03

This one seems working (Greasemonkey + include).
I remove in my CSS the url-prefix to match only search pages:
normally the image selector should be only present in search pages.
Test link:
Rechercher « tueurs »


// ==UserScript== // @name IMDB bigger thumbnails/images/poster on chart pages and search TEST 0.3.4 INCLUDE
// @namespace https://github.com/Alistair1231/my-userscripts/
// @version 0.3.4
// @description Edits image URL to get the full-size picture and increases poster size
// @author Alistair1231
// @match https://www.imdb.com/chart*
// @match https://www.imdb.com/find/?q=*

// @match https://www.imdb.com/find/?q=*
// @include https://www.imdb.com/find/?q=*


// @icon https://www.google.com/s2/favicons?domain=imdb.com
// @downloadURL https://github.com/Alistair1231/my-userscripts/raw/main/imdbBigCharts.user.js
// @grant GM_addStyle
// @license GPL-3.0
// ==/UserScript==
GM_addStyle(`
/* (new31) For GM: "IMDB bigger thumbnails/images/poster on chart pages"
REQUEST:
https://greasyfork.org/fr/scripts/428201-imdb-bigger-thumbnails-images-poster-on-chart-pages/discussions/179078#comment-390028

SEARCH PAGES - RESULTS - MOVIES /PERSONS:
MOVIES: [data-testid="find-results-section-title"] .ipc-image
AND
PERSON: [data-testid="find-results-section-name"]

=== */
.ipc-page-section[data-testid="find-results-section-name"] .ipc-media.ipc-media__img img ,
.ipc-page-section[data-testid="find-results-section-title"] .ipc-media.ipc-media__img img {
display: inline-block !important;
width: 100% !important;
min-width: 50px !important;
max-width: 50px !important;
height: 100% !important;
min-height: 74px !important;
max-height: 74px !important;
object-fit: contain !important;
border: 1px solid yellow !important;
} `);

function makeMods(x, late) {
if (x.flag == null)
x.flag = 0;
if (late == false) {
if (x.flag != 2) {
try {
// let path = window.location.pathname.split('/');
// // if on search page
// if(path[1]=="find")

let scale = 140 / x.width;
x.width *= scale;
x.height *= scale;
if (x.height >= 208)
x.height = 208;
// crop instead of stretch
x.setAttribute("style", "object-fit: cover;");
let match = x.src.match(/https:\/\/m\.media-amazon\.com\/images\/[MS]\/[^\.]+\._V\d_/);
if (match != null)
x.src = match[0] + ".jpg";
// x.src = x.src.match(/https:\/\/m\.media-amazon\.com\/images\/[MS]\/[^\.]+/)[0] + ".UY220_CR160,220_AL_.jpg";
x.flag++;

} catch (e) { }
}
}
else if (late == true) {
try {
let scale = 80 / x.width;
x.width *= scale;
x.height *= scale;
// crop instead of stretch
x.setAttribute("style", "object-fit: cover;");
let match = x.src.match(/https:\/\/m\.media-amazon\.com\/images\/[MS]\/[^\.]+\._V\d_/);
if (match != null)
x.src = match[0] + ".jpg";
} catch (e) { }
}
}
function run() {

// for sites like popular movies
// https://www.imdb.com/chart/moviemeter/
Array.from(document.querySelectorAll(".posterColumn a img")).map(x => makeMods(x, false));
// for sites like search
// https://www.imdb.com/find?q=invin
// Array.from(document.querySelectorAll(".primary_photo a img")).map(x => makeMods(x, false));
Array.from(document.querySelectorAll(".ipc-media.ipc-media__img img")).map(x => makeMods(x, false));
// actor images
Array.from(document.querySelectorAll(".loadlate")).map(x => makeMods(x, true));
setTimeout(run, 2000);
}


(function () {
run();
})();

Post reply

Sign in to post a reply.