Greasy Fork

Display Image Name Under Thumbnails?

Hey,

Is it possible someone could produce a simple script which displays the image name underneath each thumbnail on a webpage? The thumbnails I would like to display the image names underneath are all sized at 160x107. I'm not sure whether a script could be advanced enough to only display the names under image which are this exact size. Would be most appreciated because I have been after something which can do this for a while!

Thanks!

The simplest case: labels are added after a page has been loaded:

// ==UserScript==
// @name         Image captions 160x107
// @match        http://*/*
// @match        https://*/*
// ==/UserScript==

[].forEach.call(document.getElementsByTagName('img'), function(img) {
    if (img.naturalWidth == 160 && img.naturalHeight == 107) {
        img.insertAdjacentHTML('afterend',
            '<div class="caption160x107">' +
                img.src.match(/([^\/?#&]+)[^\/]*$/, '$1')[1] +
            '</div>'
        );
    }
});

Wow, awesome work! I didn't expect anyone to respond so soon, if at all, so it surprised me when I came online and found a script here. At first I was unsuccessful in getting the script to work, but then realised I had actually made a mistake with the dimensions; it should've been 107x160 rather than 160x107. Once I had swapped the values around in the script and re-saved it, it worked.

On the website there are also a few larger thumbnails which are sized at 145x217. These aren't as important but it would be nice to add the same support for these as well. Would it be possible to adapt the script to display image names under both the 145x217 sized thumbnails as well as the 107x160 ones?

Also, I know this is a long shot, but would there be a method of hiding the last 11 characters of the filename? I'm only interested in the first 5 characters because these hold the gallery number; the rest of the filename for each thumbnail is made up with random characters which are irrelevant.

Would it be possible to adapt the script to display image names under both the 145x217 sized thumbnails as well as the 107x160 ones?

if (' 107x160 145x217 '.indexOf(' '+img.naturalWidth+'x'+img.naturalHeight+' ') >= 0) {

would there be a method of hiding the last 11 characters of the filename?

img.src.match(/([^\/?#&]+)[^\/]*$/, '$1')[1].slice(0,-11) +

Thank you so much, that's fantastic! I would have no idea how to do any of this stuff. It looks great now I've updated the script with your further modifications and added some enhancements to the CSS in Stylebot.

At first I had a problem where the 107x160 labels weren't showing when the new 145x217 ones were activated, but it seemed to right itself after some fiddling around so i'm not sure what happened there. Once again, I really appreciate your assistance, this will be a massive time-saver for me in the future!

It's been a few years since I made this thread and I'm still using the script on a weekly basis. Just wondering, would it be possible to adjust the script so it centers the filename text which is shown beneath the image? And could this text specifically be increased in size from 11px to say, 17px?

One more thing, is it possible to add a parameter to adjust padding above and below the filename text?

Thanks! :) I have copied the current script underneath:

// ==UserScript==
// @name         Photo Number
// @match        http://*/*
// @match        https://*/*
// ==/UserScript==

[].forEach.call(document.getElementsByTagName('img'), function(img) {
    if (' 230x129 145x217 107x160 107x60 '.indexOf(' '+img.naturalWidth+'x'+img.naturalHeight+' ') >= 0) {
        img.insertAdjacentHTML('afterend',
            '<div class="PhotoNumber">' +
                img.src.match(/([^\/?#&]+)[^\/]*$/, '$1')[1].slice(0,-15) +
            '</div>'
        );
    }
});