inline images

As an FYI, Tumblr doesn’t make your inline images blurry randomly or for no reason. It’s a predictable outcome of two conflicting rules fighting each other (because Tumblr is a well designed site).

1. If you try to post an inline image that’s more than 810 pixels tall, Tumblr will resize it so that it’s 810 pixels tall, adjusting the width proportionately. On the face of it this is reasonable; if this rule didn’t exist, assholes could bork your dash by posting an image that’s one pixel wide and a million pixels tall, forcing you to scroll forever.

e.g., if you post an inline image that’s 600 pixels wide and 2000 pixels tall, it will be resized to 243 pixels wide and 810 pixels tall, enforcing a maximum height of 810 pixels while retaining the same relative dimensions.

2. If you post an image that’s at least 300 pixels wide, Tumblr stretches it to be exactly as wide as the main column (currently 540 pixels), adjusting the height proportionately. This rule seems to exist in order to give Tumblr the freedom to tinker with the width of the main column without creating weird gaps at the sides of historical posts; whether this is a reasonable solution to that problem or not is… debateable.

e.g., if you post an inline image that’s 350 pixels wide and 500 pixels tall, it will be stretched to 540 pixels wide and 771 pixels tall, setting the width exactly equal to the main column width while retaining the same relative dimensions.

Now here’s the trick: rule 2 does not take any resizing performed due to rule 1 into account; it decides whether or not to stretch the image based on whether the original width was at least 300 pixels wide.

So let’s take that first example a step further. First, it takes your 600x2000 image and resizes it to 243x810 to achieve a maximum height of 810 pixels. Then, because the original width was at least 300 pixels, it takes the resized 243x810 image and stretches it to 540x1800, an effective “zoom” of over 220% - hence the blurriness.

This rules conflict can lead to some entertainingly stupid results in certain edge cases. For example, suppose that you posted an inline image 350 pixels wide by 10000 pixels tall - a real dash-buster! Tumblr would resize it to 28x810 - but since the original image was at least 300 pixels wide, it would promptly stretch that 28x810 image to 540x15621, resulting in an even more obnoxious image than you started out with, while also rendering its contents almost entirely indecipherable due to the effective 1900% zoom.

Of course, you can avoid all this simply by keeping any inline images that are taller than they are wide under 810 pixels in height and either under 300 pixels or at least 540 pixels in width, which is probably the best way to go unless you enjoy doing math. (With the caveat that it could all break hilarious the next time @staff dinks with how undersize and oversize images are handled, of course, but that would have been true anyway.)

Technology is fun!

In lieu of a huge dash-stretching twitter screenshot thread I’m just gonna copy/paste the tweets I made:


We all make fun of tumblr and say it’s worthless but literally no other site lets you make and interact with posts like that Longform writing with cutoffs, images, audio with text comments, video, the ability to add inline images

Twitter has 2 of those things and no easy way to view comments

The culture around adding a comment for your followers but not anyone else’s is also gone now, since tags on tiwtter are embedded into the tweet itself and not a supplemental addon.

Tumblr is my favorite social network for precisely how much freedom you have in how you make a post and in how easy it is to share said posts

Also: Chronological timeline and private likes and following lists with built-in separation of various accounts means that I didn’t have to have 3 fucking emails if I wanted to keep my horny off main

Fully customization themes and tag filtering ALSO means that artists have lost a really good way to have an all-inclusive gallery that lets them interact with their followers while filtering the art by finished pieces, sketches, stupid doodles, etc

Tumblr is a genuinely great social network and it’s really fucking saddening to watch the staff annihilate it with the orbital laser 

In short:

image

Thank you tumblr user hustlerose for summarizing and also allowing me to show off two things I’m gonna miss about tumblr: inline images and links

@thankchaosforspellcheck​ asked: “🔥 Magic Kaito” ((And then when I hit publish it just vanished. Fortunately I have a text caching add-on specifically to thwart Tumblr.))

[solicit an unpopular opinion]

None of Gosho’s newer stuff has the mad energy of old Magic Kaito, where literally just any fucking thing was happening.

image

Every single chapter premise is insane with no ramping up period whatsoever. Every single character is as freakishly competent as they are incredibly stupid. The actual levels of danger and violence in Gosho’s work have remained the same, but the tone shifted from ‘adventure serial’ to ‘7 gruesome brain tinglers to enjoy in front of the fire’, and I enjoy the former more.

image

The old art was good, too. It wasn’t as polished, but the cartoony look had a ton of energy that was traded in for the stiff, glossy realism of Gosho’s later style. I enjoy looking at it.

image
image

(Fuck this door specifically.)

The physical comedy and sight gags were also Choice.

image
image

Like, classic MK was a fucking Mess, but its modern form is a sleeker-looking, less exciting mess. We’re still knocking Aoko out for plot convenience, but it’s not even happening on an exploding pirate submarine to balance it out.

I understand the impetus to smooth out the property to align with the tried and true Detective Conan Brand™ (and maybe the mangaka’s shifting tastes, though that can’t account for adaptations), but I also feel like everybody is sleeping on how camp and stupid MK is. The cast when the lead is in class is “a teen phantom thief with a stage magic gimmick, a police inpector’s daughter, an English detective with a trained hawk who dresses like it’s 1890, and a literal magical witch.” Who’s going to take full advantage of this. I understand that og MK must have been a difficult level of deranged insanity to maintain, but still. Press F.

Tumblr Inline Image Width Limits:
Inserting an inline image into the caption of your post? If your image is fewer than 300 pixels wide, Tumblr shows your image at its exact width on the Dashboard. But if it’s 300 pixels or more wide, Tumblr resizes the image to span the full 540-pixel width on the Dashboard. That means a 300-pixel-wide image would bloat to 540 pixels wide, degrading image quality on the Dashboard. (Some blog themes, such as Optica, will also expand inline images.) For best results, either embrace the 540-pixel width or keep inline image widths at 299 pixels or fewer.

Theme Checklist

I wanted to try and make a theme checklist encompassing everything I’ve typically forgotten when making themes. This list is not exhaustive. I’m going to update this as I discover more bugs, but hopefully this will help somewhat. Please add to this if you feel I’ve forgotten something, and refer to tumblr’s custom theme documentation for more specifics. Items I consider optional will be italicized.

Basics:

  • sidebar/header
  • sidebar images/icons
  • blog title
  • blog description
  • basic/custom links
  • credit
  • formatted all kinds of posts
  • pagination/infinite scroll
  • post info (date, tags, via/source)
  • tags
  • link to permalink page somewhere
  • postnotes
  • reblog and like buttons
  • all meta tags and options have been accounted for

Stylistic Adjustments:

  • photos/videos/general posts are all the same width and aren’t pixelated/stretched
  • included fonts have bold/italic options
  • size of sidebar image(s) adjust automatically/aren’t stretched
  • any other images are not pixelated/stretched
  • line height has been specified
  • custom scrollbar
  • blockquotes, lists, and titles have all been stylized
  • pre has been stylized so it doesn’t run off the post
  • links have been differentiated
  • any stylistic differences between the index and permalink pages are specified and accounted for
  • inline iframe videos and images have been width/height adjusted
  • items like post info/reblog buttons/like buttons are not on pages like ask and submit pages
  • tumblr’s built in via/source have been removed or stylized
  • custom bold/italic stylizing
  • iframe tumblr controls have been stylized
  • search bar

Good Coding Practices:

  • no “dead code”
  • classes/ids are clearly labeled
  • all divs, spans, and other tags are closed
  • code is indented and easy to read
  • code is commented with helpful labels and/or terms of service