Greasy Fork is available in English.
edits image url to get the full size picture and increases poster size
< Відгуки до IMDB bigger thumbnails/images/poster on chart pages
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 */
}
I will take a look at this soon. Thanks for the suggestion!
:-)
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.
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!
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)
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();
})();
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;
}