Help brainstorm ways to make images misbehave

[roadrunnertwice]

A while back, I submitted a patch that sometimes shrinks images within post and comment bodies, to make sure they fit inside their container and fit on a single screen.

It seems to mostly be working, but there's also times when you don't WANT it to work; for example, it's perfectly fine for a long vertical comic strip to flow off the page.

So I'm messing with a way to let people click-to-zoom on individual images!

»» Here's the demo. ««

That demo has several different cases I thought about — for example, I'm not enabling click-to-zoom for images that are links, because links already do something when you click on them (and most of the time it's "go to the full size image" anyway). I'm also not zooming poll bar graph images, because those are special and weird.

Anyway, the trick with this is to make it do what people want most of the time, but hopefully never do anything really nonsensical. So I need help thinking of things that people do with images in their posts/comments that might cause nonsense, and then I can figure out which nonsense to mitigate and which nonsense to just accept. The only ones I came up with so far are:

• If an image didn't need to shrink, it gets a "click to zoom" cursor on hover but it doesn't actually do anything.
• If someone used the width="x" / height="x" attributes to make an image bigger than its natural size, the zoom cursor hints will be reversed (i.e. "zoom in" will actually shrink it).

What else have you got?

Comments

[siderea]

Wait. I'm confused about the fundamental premise. How does your patch effect image size? Adding width/height image tags to the HTML? Serving a different sized image than the one called by the src attribute? Something in the CSS?

(FWIW, I have a whole bunch of posts with an egregious number of images in them, and those images are mostly in tables, and if this is useful to you...? You could take copies I guess? See https://siderea.dreamwidth.org/tag/influenza1918 Content advisory: mass death.)

[roadrunnertwice]

All CSS (and some tiny JS to toggle a class on click).

The actual image your browser downloads is always the same here, but it might get shrunk to fit if it’s too big. (In which case the browser resamples it on the fly; this used to look like garbage, but got good circa 2005.)

This patch just lets you turn the shrink-to-fit on and off by clicking.

[siderea]

Oooo, very cool! So the idea is that if someone has an irritatingly wide image in one's reading page, one can click the button and all the images are constrained to the column width? (Or on an image-by-image basis?)

[roadrunnertwice]

It's constrained by default now in the built-in styles, as of a couple code pushes ago; this lets you UN-constrain it (per-image) if you want to see the full size and don't care about layout blowouts.

[jducoeur]

Concept makes sense, but the demo is broken -- looks like Markdown formatting is turned off, or some such...

[roadrunnertwice]

Yeah, I updated to the most recent code and got whomped by some unrelated changes that straight-up broke Markdown. 😭 I was planning to investigate the root cause of that, but in the meantime, lemme see if I can just revert the problematic changes and fix this temporarily.

...ok whew, looks like that worked. Should be legible now!

[jducoeur]

Yep, looks generally right to me. If straightforward, I would suppress the `+` mouse pointer if the image is already at 100% (it's a bit misleading, suggesting that if you click it will zoom), but I think it's an improvement as-is...

[roadrunnertwice]

👍🏼

Suppressing the useless “+” cursor is so much more complex than it sounds that it’s actually kind of absurd. I wanna, but it’s gonna take some time and thought, if it ends up feasible at all.

(Short version: need to recalculate which images are 100% every time window size changes or device rotates, plus whenever new images are added via cut tag or comment expand.)