Recent Comments Image Size

Site and Policy » Recent Comments Image Size Search Posts
Background Pony #AD47
This message is mostly for site’s devs.
 
Hi, so, I haven’t really used “recent comments” page before and today i went to check it out and while it’s a cool feature and I like it, what I find odd is the size of images. They are way too small. Most of the time I’m having real hard time to understand what am I even looking at. I feel like if images were the same size as in the main image lists, it would’ve made it a lot better. To illustrate my point I made a quick mockup of what i mean.
 
How it looks now. How it could look with bigger images.
 
I’d like to use recent comments page a lot more, but with images that small it’s hard to even tell if the image I’m looking at is something that I would care to read comments about, and I have to click on every image to see it first, then read the comments, which kinda defeats the purpose of recent comments page for me.
 
I don’t really know how much work I’m asking you to do, but it would be really cool if you could make those images bigger. :3
Background Pony #AD47
I’m back!
 
So, I did it all by myself. With greasemonkey and stylish addon. And it looks pretty nice if I do say so myself :3
 
Here is a greasemonkey script:  
// ==UserScript==
// @name Derpibooru Recent Comments Thumbnails
// @namespace puppetmaster001@gmail.com
// @description Replaces tiny thumbnails on recent comments page with normal size thumbnails.
// @include https://derpibooru.org/lists/*
// @include https://derpiboo.ru/lists/*
// @version 1
// @grant none
// ==/UserScript==
// This fetches all of the <img> tags and stores them in “tags”.
var tags = document.getElementsByTagName(‘img’);
// This loops over all of the <img> tags.
for (var i = 0; i < tags.length; i++) {
// This replaces the src attribute of the tag with the modified one
tags[i].src = tags[i].src.replace(‘thumb_tiny’, ‘thumb’);
}
 
Here’s a stylish script:  
@-moz-document domain(“derpibooru.org”) {
div.post-image-container{
width:160px;
height:160px;
}
div.image-container.thumb_tiny{
width:160px;
height:160px;
}
}
 
I think it should be possible do everything in greasemonkey, but I just started using it and I don’t know what I’m doing (in fact, it’s not my greasemonkey script, it’s just a script that I found and modified), so stylish is my crutch.
 
I haven’t got any kind of response to my request, so I don’t know why it hasn’t been implemented, but I think it looks neat and a lot more usable then tiny thumbnails. And, as you can see from scripts, all that needs to be done to change tiny thumbnails to regular ones and to enlarge the container for them to about 160px by 160px.
 
But hey, I got what I wanted, so I won’t bug you about it anymore. And if someone else wants it, here are the scripts.
 
Peace out. *drops the mic*
Background Pony #AD47
I’ve changed container size to 250px by 250px. I’m not sure why I didn’t do so in the first place, cause that the size of a regular thumbnail, but now I did and now it’s even better :3
Background Pony #E762
Situation in this thread is kinda funny and sad at the same time.
 
Try to change domain to regular expression https?://(?:www.)?(?:derpi|trixie)booru.org/.* to fit all domains
Background Pony #AD47
I tried pasting this code in include, instead of the list of urls, and the script has stopped working. But, as I said, I might just not know what I’m doing.
Background Pony #E762
@Background Pony #CFDB  
It should work with stylish. With userscript I had to manually paste all known domains
 
And you may add  
tags[i].style.height = “250px”;  
tags[i].style.width = “250px”;  
to remove needing in userstyle at all. Should work, if I didn’t mess up
Background Pony #AD47
@Background Pony #E0FD  
Domain thing doesn’t work with stylish either. If I pass it like this:
domain(https?://(?:www.)?(?:derpi|trixie)booru.org/.*) - it messes up brackets. If I pass it like this:
domain(“https?://(?:www.)?(?:derpi|trixie)booru.org/.*”) - then brackets are okay, but now it’s just a string. And if I put it instead of the whole “domain(“derpibooru.org”)”, like this:
@-moz-document https?://(?:www.)?(?:derpi|trixie)booru.org/.* { - it just doesn’t work.
 
“tags[i].style.height/width”, did do something, but not quite the thing that’s needed. The trick is that the size of the img doesn’t matter (and “img” is what’s containted in “i” here), it will be “held down” by the size of divs containing it. So targeting the size of img won’t actually change anything, but tageting the size of specific divs containing it - should do the trick. Or stylish will just do it with css.
 
But whether it worked or not, thanks for trying to help :3
Background Pony #AD47
I found something about multiple domains in stylish, and example I found looks like this:
 
@-moz-document regexp(“^https?://((?!(addons|bugzilla|developer|forums|wiki|services))[^/]*?)\\.mozilla\\.org.*”)
{
 
Apperently this works (or so I’ve been told by the internet), now I just need to figure out how to mod it to work for me :3
Background Pony #AD47
Also this works:
 
@-moz-document domain(“derpibooru.org”), domain(“derpiboo.ru”), domain(“trixiebooru.org”), domain(“trixieboo.ru”) {
 
I went with this for now. It should work whether it has something before a domain name or not (so, with and without “www.” should work, and both “http” and “https” should work as well).
Background Pony #AD47
I’ve also added a huge list of domains to a greasemonkey script:  
// @include https://derpiboo.ru/lists/*
// @include https://trixiebooru.org/lists/*
// @include https://trixieboo.ru/lists/*
// @include http://derpibooru.org/lists/*
// @include http://derpiboo.ru/lists/*
// @include http://trixiebooru.org/lists/*
// @include http://trixieboo.ru/lists/*
// @include https://www.derpibooru.org/lists/*
// @include https://www.derpiboo.ru/lists/*
// @include https://www.trixiebooru.org/lists/*
// @include https://www.trixieboo.ru/lists/*
// @include http://www.derpibooru.org/lists/*
// @include http://www.derpiboo.ru/lists/*
// @include http://www.trixiebooru.org/lists/*
// @include http://www.trixieboo.ru/lists/*
And, as much as it’s unpalatable in terms of cut-and-paste coding, people say that having domains just as a list, even if it’s huge, will work the best in terms of performance and cross-browser-ness or whatever.
Background Pony #AD47
Unfortunately stylish script also breaks homepage and notifications page. Here is a more precisely aimed version of the script:  
div.post-image-container{
width:250px;
height:250px;
}
div.image-container.thumb_tiny{
width:250px;
height:250px;
}
}
Yeah, it doesn’t look as nice, but it’s not here for looking :3
Background Pony #E762
@Background Pony #CFDB  
I got it  
var tags = document.querySelectorAll(‘div.post-image-container’);
// This loops over all of the <div> tags.
for (var i = 0; i < tags.length; i____) {
// This replaces the src attribute of the tag with the modified one
tags[i].getElementsByTagName(‘img’)[0].src = tags[i].getElementsByTagName(‘img’)[0].src.replace(‘thumb_tiny’, ‘thumb’);
tags[i].childNodes[0].style.width=’250px’;
tags[i].childNodes[0].style.height=’250px’;
tags[i].style.width=’250px’;
tags[i].style.height=’250px’;
}
 
Should work without userstyle
Background Pony #AD47
And still nope.  
In fact, now it doesn’t seem to do anything, not even replacing the thumbnails.
Background Pony #E762
Strange has been doubled, looks like derp’s code now switching old src back.  
// ==UserScript==
// @name Derpibooru Recent Comments Thumbnails
// @namespace puppetmaster001@gmail.com
// @description Replaces tiny thumbnails on recent comments page with normal size thumbnails.
// @include https://derpibooru.org/lists/*
// @include https://www.trixiebooru.org/lists/*
// @include https://derpiboo.ru/lists/*
// @version 1
// @grant none
// @run-at document-idle
// ==/UserScript==
setTimeout(function() {
// This fetches all of the <img> tags and stores them in “tags”.
var tags = document.querySelectorAll(‘div.post-image-container’);
// This loops over all of the \<div\> tags.
for \(var i = 0; i \< tags.length; i++\) {

    // This replaces the src attribute of the tag with the modified one
    tags\[i\].childNodes\[0\].classList.remove\('thumb\_tiny'\);
    tags\[i\].childNodes\[0\].classList.add\('thumb'\);
    tags\[i\].childNodes\[0\].style.width='250px';
    tags\[i\].childNodes\[0\].style.height='250px';
    tags\[i\].style.width='250px';
    tags\[i\].style.height='250px';
    tags\[i\].getElementsByTagName\('img'\)\[0\].src = tags\[i\].getElementsByTagName\('img'\)\[0\].src.replace\('thumb\_tiny', 'thumb'\);
}
}, 1000);
 
This one fully functional for now
Background Pony #AD47
A little bit of a fix, since now images aren’t only stored in “src” but also in “scrset”, and without replacing both some images would stay tiny. This should fix the problem:  
// ==UserScript==
// @name Derpibooru Recent Comments Thumbnails
// @namespace puppetmaster001@gmail.com
// @description Replaces tiny thumbnails on recent comments page with normal size thumbnails.
// @include https://derpibooru.org/lists/*
// @include https://www.trixiebooru.org/lists/*
// @include https://derpiboo.ru/lists/*
// @version 1
// @grant none
// @run-at document-idle
// ==/UserScript==
setTimeout(function() {
// This fetches all of the <img> tags and stores them in “tags”.
var tags = document.querySelectorAll(‘div.post-image-container’);
// This loops over all of the <div> tags.
for (var i = 0; i < tags.length; i++) {
// This replaces the src attribute of the tag with the modified one
tags[i].childNodes[0].classList.remove(‘thumb_tiny’);
tags[i].childNodes[0].classList.add(‘thumb’);
tags[i].childNodes[0].style.width=’250px’;
tags[i].childNodes[0].style.height=’250px’;
tags[i].style.width=’250px’;
tags[i].style.height=’250px’;
tags[i].getElementsByTagName(‘img’)[0].src = tags[i].getElementsByTagName(‘img’)[0].src.replace(‘thumb_tiny’, ‘thumb’);
tags[i].getElementsByTagName(‘img’)[0].srcset = tags[i].getElementsByTagName(‘img’)[0].srcset.replace(‘thumb_tiny’, ‘thumb’);
}
}, 1000);
And if someone is using the old script, here’s a fix for it as well:
// ==UserScript==
// @name Derpibooru Recent Comments Thumbnails
// @namespace puppetmaster001@gmail.com
// @description Replaces tiny thumbnails on recent comments page with normal size thumbnails.
// @include https://derpibooru.org/lists/*
// @include https://derpiboo.ru/lists/*
// @version 1
// @grant none
// ==/UserScript==
// This fetches all of the <img> tags and stores them in “tags”.
var tags = document.getElementsByTagName(‘img’);
// This loops over all of the <img> tags.
for (var i = 0; i < tags.length; i++) {
// This replaces the src attribute of the tag with the modified one
tags[i].src = tags[i].src.replace(‘thumb_tiny’, ‘thumb’);
tags[i].srcset = tags[i].srcset.replace(‘thumb_tiny’, ‘thumb’);
}
Background Pony #AD47
So, switch to Philomena happened. And it’s a good thing, because recent comments page was kinda broken for many months and now it’s working again. But now the script needs an update.
 
I ended up going back to the old code separated between Stylish and Tampermonkey because I don’t know how to fix all in one script. I’m not a programmer, so I just randomly tried things that made sense to me, but nothing worked, so.
 
Stylish code (Stylish doesn’t have urls in the code anymore, instead you need to enter them in a separate “applies to” panel below the code):  
/*Recent comments image container size*/
div.post-image-container{
width:250px;
height:250px;
}
div.image-container.thumb_tiny{
width:250px;
height:250px;
}
What to put in “applies to” panel:
Choose “URLs starting with” in a dropdown menu and put “https://derpibooru.org/comments” in the panel near it.
If you want you can press a plus sign on the right and do the same for trixiebooru.org, derpiboo.ru, trixieboo.ru, www.-variants and all that jazz.
Tampermonkey code:  
// ==UserScript==
// @name Derpibooru Recent Comments Thumbnails
// @namespace https://derpibooru.org/forums/meta/topics/recent-comments-image-size
// @version 1.2
// @description Replaces tiny thumbnails on recent comments page with normal size thumbnails.
// @author some background ponies
// @match https://*.derpibooru.org/comments*
// @match https://*.trixiebooru.org/comments*
// @grant none
// ==/UserScript==
(function() {
‘use strict’;
// This fetches all of the <img> tags and stores them in “tags”.
var tags = document.getElementsByTagName(‘img’);
// This loops over all of the <img> tags.
for (var i = 0; i < tags.length; i++) {
// This replaces the src attribute of the tag with the modified one
tags[i].src = tags[i].src.replace(‘thumb_tiny’, ‘thumb’);
tags[i].srcset = tags[i].srcset.replace(‘thumb_tiny’, ‘thumb’);
}
})();
Background Pony #AD47
Fixed all in one script!  
// ==UserScript==
// @name Derpibooru Recent Comments Thumbnails (all in one)
// @namespace https://derpibooru.org/forums/meta/topics/recent-comments-image-size
// @version 1.2
// @description Replaces tiny thumbnails on recent comments page with normal size thumbnails.
// @author some background ponies
// @include https://*derpibooru.org/comments*
// @include https://*trixiebooru.org/comments*
// @include https://*derpiboo.ru/comments*
// @include https://*trixieboo.ru/comments*
// @grant none
// ==/UserScript==
(function() {
‘use strict’;
setTimeout(function() {
// This fetches all of the <img> tags and stores them in “tags”.
var tags = document.querySelectorAll(‘div.post-image-container’);
// This loops over all of the <div> tags.
for (var i = 0; i < tags.length; i++) {
// This replaces the src attribute of the tag with the modified one
tags[i].childNodes[0].classList.remove(‘thumb_tiny’);
tags[i].childNodes[0].classList.add(‘thumb’);
tags[i].childNodes[0].style.width=’250px’;
tags[i].childNodes[0].style.height=’250px’;
tags[i].style.width=’250px’;
tags[i].style.height=’250px’;
tags[i].getElementsByTagName(‘img’)[0].src = tags[i].getElementsByTagName(‘img’)[0].src.replace(‘thumb_tiny’, ‘thumb’);
tags[i].getElementsByTagName(‘img’)[0].srcset = tags[i].getElementsByTagName(‘img’)[0].srcset.replace(‘thumb_tiny’, ‘thumb’);
}
}, 1000);
})();
I still don’t like the fact that it takes a second for the script to kick in, so images start out small and resize a second after, and the whole page rearranges when it happens. With Stylish it’s not as jarring, images still start small and resize when the script kicks in, but the page arrangement doesn’t change, because containers start out big right away. So I think I’ll still stick with my old code.
Interested in advertising on Derpibooru? Click here for information!
Ponies Online! - April 13-14

Help fund the $15 daily operational cost of Derpibooru - support us financially!

Syntax quick reference: **bold** *italic* ||hide text|| `code` __underline__ ~~strike~~ ^sup^ %sub%

Detailed syntax guide