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
LinkQuoteReply
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*
Posted Report
Edited
LinkQuoteReply
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
LinkQuoteReply
Background Pony #E0FD
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
Posted Report
Edited
LinkQuoteReply
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
LinkQuoteReply
Background Pony #E0FD
@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
Posted Report
Edited
LinkQuoteReply
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
Posted Report
Edited
LinkQuoteReply
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
Posted Report
Edited
LinkQuoteReply
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).
Posted Report
Edited
LinkQuoteReply
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.
Posted Report
Edited
LinkQuoteReply
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
Posted Report
Edited
LinkQuoteReply
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
LinkQuoteReply
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
LinkQuoteReply
Background Pony #CFDB
And still nope.
In fact, now it doesn’t seem to do anything, not even replacing the thumbnails.
Posted Report
LinkQuoteReply
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
Posted Report
Edited
LinkQuoteReply
Background Pony #CFDB
Huzzah! It works! Finally, all in one package.

And now – victory dance!

Thanks for help :3
Posted Report
LinkQuoteReply
Thank you to our advertisers for supporting Derpibooru
Syntax quick reference: *bold* _italic_ [spoiler]hide text[/spoiler] @code@ +underline+ -strike- ^sup^ ~sub~