Skip to content

Instantly share code, notes, and snippets.

@bitWolfy
Last active December 24, 2022 23:45
Show Gist options
  • Save bitWolfy/4a3e72fafa3f26e0a11a0198cf55259f to your computer and use it in GitHub Desktop.
Save bitWolfy/4a3e72fafa3f26e0a11a0198cf55259f to your computer and use it in GitHub Desktop.
// ==UserScript==
// @name E621 ReScaler
// @namespace bitwolfy.com
// @version 1.2
// @description Scales up the thumbnails on e621.net
// @author bitWolfy
// @match https://e621.net/posts
// @match https://e621.net/posts/
// @match https://e621.net/posts?*
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js#sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=
// @grant none
// ==/UserScript==
// Settings
const cropImages = true,
thumbWidth = 280,
thumbHeight = 320;
// Main Script
(function() {
'use strict';
// Reset the attached stylesheet
$("<style>")
.appendTo("head")
.html(`
div#posts-container {
display: grid;
grid-template-columns: repeat(auto-fill, ${thumbWidth}px);
justify-content: space-between;
}
article.post-preview {
width: ${thumbWidth}px;
${cropImages ? ("height: " + thumbHeight + "px") : ""};
}
article.post-preview img {
max-width: 100%;
max-height: 100%;
width: ${thumbWidth}px;
${cropImages ? ("height: " + (thumbHeight - 16) + "px") : ""};
object-fit: ${cropImages ? "cover" : "contain"};
}
`);
// Rewrite the thumbnail URLs
$("article.post-preview").each((index, entry) => {
let $thumb = $(entry);
$thumb.find("source").remove();
let $img = $thumb.find("img").first();
if($thumb.attr("data-large-file-url")) { $img.attr("src", $thumb.attr("data-large-file-url")); }
});
})();
@JovoLounard
Copy link

JovoLounard commented Apr 11, 2020

I did a little mod of your script...
A little less wasted space i think.
Im not coder by trade, so this probably isnt perfect, but i like it.

(function() {
'use strict';

$("div#posts-container").css({
    "display": "grid",
    "grid-template-columns": "repeat(auto-fit,minmax(300px,1fr))",
    "grid-auto-rows":"320px",
    "grid-gap":"5px",
    "justify-content": "space-between",
});

$("article.post-preview").each((index, entry) => {
    let $thumb = $(entry);
    $thumb.find("source").remove();
    $thumb.css({
        "max-width": "1fr",
        "max-height": "100%",
        "width": "100%",
        "height": "100%",
        "object-fit":"contain",
    });

    let $img = $thumb.find("img").first();
    if($thumb.attr("data-large-file-url")) { $img.attr("src", $thumb.attr("data-large-file-url")); }
    $img.css({
        "max-width": "100%",
        "max-height": "300px",
        "width": "100%",
        "height": "300px",
        "object-fit": "contain",
    });
});

})();

@bitWolfy
Copy link
Author

bitWolfy commented Apr 11, 2020

It's a matter of preference, I suppose.
Personally, I like having a bit of padding between thumbnails. But to each their own.

@JovoLounard
Copy link

Updated my post... somehow I had an older set of code in the clipboard last time.
But thanks for looking. Just figured I'd send it in case you like it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment