Taming the Squish

[roadrunnertwice]

Hello! Sorry in advance for the non-code-sharing post, but hopefully I can make this worth the interruption.

I'm trying to tune DW's image shrinker to leave decorative codes alone, and to do that I need to identify something that almost all codes have in common.

After browsing the archives for a bit, it looks like almost every code shared here puts all its important stuff inside one of the following:

• A <table>
• A <div style="..."> (that is, a div that has some kind of inline CSS on it.)

Is that about right? Can anyone point to a decorative code for character sheets or playlists or whatever that isn't either a table or an inline-styled div? Is there other markup you've seen where the image resizing screwed it up but it wasn't inside a table or a styled div?

(If no, I can start working on making codes exempt from The Squish; if yes, I might need to think a bit harder first.)

Thanks!

---

Context: A few months back, we added CSS that sometimes shrinks images in entries and comments; more recently, we applied it more consistently on different page types and added click-to-zoom (for images that aren't also links).

This is so people can casually post images without accidentally trashing a thread or a reading page. Almost every social site does something to keep large images from making a mess, and this CSS lets us do that without sacrificing any of our free-for-all journal styling system. Now that we have click-to-zoom (for tall comic strips and other stuff that needs to expand), it seems to be working okay for most casual image posts.

However, it's still been vandalizing decorative markup for things like character sheets, since it shrinks <img> elements to make them fit the width of their container (when usually images expand their container to their width).

That's unintended and annoying, so we're going to try and make it stop doing that. The trick is finding a way to leave your codes alone while still shrinking any casual images that need it.

Comments

[loupnoir]

I don't believe there are any out there right now, due to how Dreamwidth handles CSS (aka we aren't allowed to use style tags). The only thing that would come to mind is if div elements were stacked vertically as opposed to horizontally, but those aren't as comment and usually don't use images of any kind.

Wishing you luck on tuning the code!

[shangri_bullshit_la]

Alright, admitting I don't know much about much here, but: Might a solution be to add a class that overrides this behavior that we could apply to images that shouldn't be affected?

In general though yeah, most things start off with a table or div from what I've seen.

[roadrunnertwice]

That’s a solution that would be extremely easy for ME, so, thanks for thinking of your humble dev friends. 😄 And it would work exactly the way you think. But: it would be secret knowledge that everyone has to hear from someone or run across in a faq, and I would Very rather that things just work, more or less intuitively.

Anyway, thanks for the additional confirmation! I’ve gotten a solution working to exclude descendants of tables and styles divs, so now reviewers can check if I missed something and hopefully we can eventually turn it on.

[dray]

I love your problem outline on that link. Great to see you're thinking of us weird anachro-coders!