Topic: Greasemonkey Script for Thumbnail Enlargement

Posted under General

I think that the thumbnails are being displayed a bit too small on my screen for my taste (resolution is 1920x1080), so I wrote this little script to resize them a little. As a little neat side effect, the thumbnails are also being re-aligned so there is less "wasted" space between thumbnails, which means more thumbnails per row.
Since without the script the thumbnails are being displayed in their correct sizes already, resizing them my way will pixelate them a little. Still perfectly fine with me, but decide for yourself if it's worth it. See below for a screenshot. You can see that it really depends on the picture and the thumbnail image itself. Some look fine, some look 1995-porn-bad. Those were horrible times my dear fellow furries..

This script was written by me. Please don't claim it as your own, but feel free to tweak it and give it to others. See bottom of this post for some words regarding the script.

You need the Greasemonkey AddOn for Firefox. I'm not providing any support for other browsers or other ways of implementing this script. I'm also not responsible for any damage done to your machine or yourself, neither by this script nor by tiny pink fluffy ninjas from.. BEHIND YOU!!

This is the script:

http://pastebin.com/jpF9NzHp

This is how it looks like on my machine:

http://s1.directupload.net/images/130117/alw6wcxr.png

Some words:
I'm merely setting some CSS properties to do the magic. To ensure that the metadata (rating, favorite count, comment count) is still visible, the image height has to be ~20px less than the thumbnail itself. Keep that in mind if you want to tweak the numbers for your needs.
I also just recognized a little bug which doesn't affect e621, but might affect other sides in case you want to reuse my ModifyCSS function.
JavaScript is awesome, and so is e621! \o/

Feedback is appreciated in either direction. I hope this script is usefull to some of you.

CJ is me by the way.

Enjoy! :3

Updated by Fum

To me, quite frankly, it's like if you viewed e6 on a mobile phone.

My res is 1600x900 and thumbnails are fine for me.

Do you have [ ] Resize Images
If enabled, images will be shrunk down to fit the screen.

Updated by anonymous

I use a mobile device and the images are just fine.

eh, this shows how brilliant my computer knowledge is, i thought you were talking about enlargement of ACTUALLY thumbnails. *thumb twitchs

Updated by anonymous

Mario583 said:
Do you have [ ] Resize Images

I don't even know what you're talking about. I searched through the FF settings but couldn't find anything like that.

//EDIT
Found it in about:config, but didn't do anything useful for me here.

Updated by anonymous

AtomicBolt said:
Read yourself

Its in your account settings mate

Updated by anonymous

also. here's a little tip. hit ctrl+plus, it makes your images bigger. no script required.

Updated by anonymous

null0010 said:
Agh, ponies.

sez the toaster pony…

Updated by anonymous

Aurali said:
also. here's a little tip. hit ctrl+plus, it makes your images bigger. no script required.

Only n00bs use that...
I use Ctrl + Mousewheel [master race]

Updated by anonymous

Aurali said:
also. here's a little tip. hit ctrl+plus, it makes your images bigger. no script required.

Which also increased the space between the thumbnails as well as the text size, reducing the number of thumbnails that can appear on each row, which may not be the desired outcome.

Updated by anonymous

Foobaria said:
Which also increased the space between the thumbnails as well as the text size, reducing the number of thumbnails that can appear on each row, which may not be the desired outcome.

Nothing to add on that matter.

Updated by anonymous

Foobaria said:
Which also increased the space between the thumbnails as well as the text size, reducing the number of thumbnails that can appear on each row, which may not be the desired outcome.

and? that's just additional steps and more background processes when none are really needed. BESIDES. things. silly things.

But hell.. the modding community for ouroboros is really starting to shine.. which makes me REALLY REALLY wanna push open sourcing this thing. But sadly I'm not the one who makes that call (and still make a paycheck anyway)

Updated by anonymous

Aurali said:
and? that's just additional steps and more background processes when none are really needed. BESIDES. things. silly things.

But hell.. the modding community for ouroboros is really starting to shine.. which makes me REALLY REALLY wanna push open sourcing this thing. But sadly I'm not the one who makes that call (and still make a paycheck anyway)

None of us are talking about server-side things, though, I'm pretty sure. I was saying why the Greasemonkey script (client-side) has a benefit over simply increasing the page's magnification.

Updated by anonymous

Foobaria said:
None of us are talking about server-side things, though, I'm pretty sure. I was saying why the Greasemonkey script (client-side) has a benefit over simply increasing the page's magnification.

I never mentioned the server :/

Updated by anonymous

Aurali said:
I never mentioned the server :/

You were talking about ouroboros, so I thought you thought we were talking about adding server-side config options, since Greasemonkey doesn't have anything to do with the backend.

Updated by anonymous

Thank you very much for the script. It works, but unfortunately messes up the whole sidebar layout and draws over it.

Any way I could fix that somehow?

EDIT:
I clobbered this together with some googling and it works well for me.

// ==UserScript==
// @name         Enlarge your E621
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http*://*e621.net/*
// @grant        none
// ==/UserScript==

function addGlobalStyle(css) {
   var head, style;
   head = document.getElementsByTagName('head')[0];
   if (!head) { return; }
   style = document.createElement('style');
   style.type = 'text/css';
   style.innerHTML = css;
   head.appendChild(style);
}

addGlobalStyle('span.thumb { width: 500px; }');
addGlobalStyle('span.thumb { height: auto; }');
addGlobalStyle('img.preview { height: auto; }');
addGlobalStyle('img.preview { width: 100%; }');

Just modify 500px to however large you prefer the thumbnail to be stretched to.

Updated by anonymous

Now that's the best darn necro I ever seen.

I'll give it a try later.

Updated by anonymous

GDelscribe said:
Now that's the best darn necro I ever seen.

It's the first google result for "e621 larger thumbnails" so I posted my solution here.

Also, after some more learning of CSS I came up with this set of values that work fine for my setup.

// ==UserScript==
// @name         En1arge your E621
// @namespace    http://e621.net/
// @version      0.2
// @description  Make 4K great again!
// @author       Fum
// @match        http*://*e621.net/post*
// @grant        none
// ==/UserScript==

function addGlobalStyle(css) {
   var head, style;
   head = document.getElementsByTagName('head')[0];
   if (!head) { return; }
   style = document.createElement('style');
   style.type = 'text/css';
   style.innerHTML = css;
   head.appendChild(style);
}

addGlobalStyle('div.content-post { width: 86%; }');
addGlobalStyle('span.thumb { width: 20vw; height: 30vh; }');
addGlobalStyle('img.preview { height: 27vh; max-width: 20vw; width: auto; }');

div.content-post is area where thumbnails reside. 86% is the highest I can set it to eliminate blank space to the right and still fit without it slipping under the sidebar.
span.thumb is the area for the thumbnail and decorations. 20vw is 20% of the viewport (browser window) width, 30vh is 30% of viewport height.
img.preview is the thumbnail image itself. Set height to slightly less than in span.thumb to prevent it from overlapping with the post score on the bottom.

Here's a before and after comparison.

Updated by anonymous

  • 1