Tumblr Dashboard - clickable links to images and display time-stamps

marp
2018-08-12T17:17:38Z

All Tumblr images receive direct link to their high-res variant. A colored box around each image indicates the vertical resolution of the high-res image.

This script modifies all image posts so that Tumblr-hosted images link directly to their highest resolution version.
Use Middle-Mouse Click to open this high-res version of an image in a new (background) tab.

The pixel height of each high-res image is indicated by a colored box around each image.
Hovering over an image will popup a small text indicating the image file size and, if the size is below 20MB, also the image dimension.
Depending on the image height, the color of the box changes:

above 2160p: a color between lime and cyan (hsl(160, 100%, 70%))

1080p - 2160p: blends from lime (1080p) to a color between lime and cyan

270p - 1080p: blends from red (270p) via yellow (675p) to lime

0 - 270p: blends from black (0p) to red (270p)

still checking dimension in background, or image larger than 20MB, or error: gray

This background image analysis causes additional network traffic, but most of it will be cached.

Tumblr injects HTML code into what should be a pure image binary file, against all standards and best practices. Thus, "Image | Right Click | Save Link As" from the dashboard doesn't work properly.
Instead, use middle-mouse to open images in a new tab. The script removes most of the injected HTML crap to present a clean image-only view.
In this new tab, you can use "Image | Right-Click | Save Image As" to save the high-res version of the image.

Experimental feature: Posts with a "Community Label" are cropped to a height of 300px. The script removes this height limitation so that the post displays normally like any other post without any special Community Label.

Tested on Firefox with TamperMonkey. GreaseMonkey should also work but has not been tested.

The script is presented AS-IS with no guarantees - feedback is welcome.