Pony with care Remember to tag images from or related to the latest episode with spoiler:s08e11!

Recent Comments Image Size

Started by Background Pony #CFDB Posted Login to subscribe to responses
Background Pony #CFDB
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
Posted Report
Background Pony #CFDB
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:
@namespace url(http://www.w3.org/1999/xhtml);

@-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 #CFDB
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
Posted Report
Background Pony #CFDB
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.
Posted Report
Background Pony #CFDB
@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 #CFDB
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 #CFDB
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 #CFDB
I’ve also added a huge list of domains to a greasemonkey script:
// @include https://derpibooru.org/lists/*
// @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 #CFDB
Unfortunately stylish script also breaks homepage and notifications page. Here is a more precisely aimed version of the script:
@-moz-document url-prefix(https://derpibooru.org/lists), url-prefix(https://derpiboo.ru./lists), url-prefix(https://trixiebooru.org/lists), url-prefix(https://trixieboo.ru./lists), url-prefix(http://derpibooru.org/lists), url-prefix(http://derpiboo.ru./lists), url-prefix(http://trixiebooru.org/lists), url-prefix(http://trixieboo.ru./lists), url-prefix(https://www.derpibooru.org/lists), url-prefix(https://www.derpiboo.ru./lists), url-prefix(https://www.trixiebooru.org/lists), url-prefix(https://www.trixieboo.ru./lists), url-prefix(http://www.derpibooru.org/lists), url-prefix(http://www.derpiboo.ru./lists), url-prefix(http://www.trixiebooru.org/lists), url-prefix(http://www.trixieboo.ru./lists) {

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 #CFDB
Ha!
@-moz-document regexp('(http|https)://(www.|)(derpibooru|derpiboo|trixiebooru|trixieboo)\\.(org|ru)/lists/.*') {

div.post-image-container{
width:250px;
height:250px;
}

div.image-container.thumb_tiny{
width:250px;
height:250px;
}

}
I did fancy! :3
Posted Report
Background Pony #E0FD
@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
Posted Report
Background Pony #CFDB
And still nope.
In fact, now it doesn’t seem to do anything, not even replacing the thumbnails.
Posted Report
Background Pony #E0FD
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 #CFDB
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');
}
Thank you to our advertisers for supporting Derpibooru
Syntax quick reference: *bold* _italic_ [spoiler]hide text[/spoiler] @code@ +underline+ -strike- ^sup^ ~sub~