FIXED: How to properly insert images into your posts without breaking the forum page layout

What about videos?

I think I fixed video width too, unless it’s posted with the Advanced Post Editor, which appears to use an iframe.

The new change appears to override inline styles for images now, unless I add a “!important” flag. That flag is generally not meant to be used that way though, so I’m not sure how best to add images which aren’t maximum width.

Usually I just post images via a macro or script which generates the relevant markup, so extra markup isn’t much of an issue for new posts… the new change definitely reformatted some of my older posts though.

Looking into the site’s stylesheets, I see that there’s a style like this:

img {
    max-width: 100% !important;
    height: auto !important;
}

Does it still work without the !important bit? That’s what makes it override regular-priority local styles.

max-width tag is no longer respected.

This is using {width:50%} tag:

And this is using {max-width:50%} tag:

I use 99% as it’s really easy to type and virtually the same as 100%.

The max-width tag never worked well with the advanced editor, it broke the aspect ratio at least as far as I know. And since the simple editor doesn't supports web addresses with special characters, I do not endorse it.

Not the first time I say this, but I'll say it once more: the post editor needs unification, in my honest opinion. Quoting posts back and forth between simple and advanced editor is often burdensome and ultimately unnecessary.

Or maybe a new forum engine. ;)

Great outside the box thinking and a very clever idea, thanks for sharing.

OK, let’s try removing !important from max-width: in the site CSS. This will probably result in a few badly formatted posts where the poster added an unreasonable max-width, but should be a decent compromise all around. (I would recommend using just width:, not max-width: when you specify an image width. And image height should almost never be specified.)

We'll get there eventually, sorry for the inconvenience.

Nope. :-)

Thanks.

The problem with just using ‘width’ is that if the image is small and you choose a larger % width, it is going to expand that image making it look blurry/not sharp/pixellated/terrible, especially if you’re browsing on a larger high res monitor.

For example, on my monitor this 256x256 image gets expanded up to 983x983 pixels when I choose width of 75%. On the other hand, max-width helps avoid that expansion beyond the image’s native resolution. Anyway, it looks like you’ve fixed it, so thank you.

Original:

75%:

Yep. But that's how it is, there's nothing wrong with it. Look at this dude I often use, it is one of these gifs of yesteryear, many of them are pretty cool and I must admit I even miss lots of 'em which still may be hosted in some old web sites. When images or gifs are so small resolution-wise, if we aim to increase their size it is best to work it out mentally/manually with some small fixed multiplier (2x, 3x, 4x maybe), or use a very small percentage as relative width.

There it is, Mr handsome coffee drinker at 4x. Rocks! :-))

One of the “problems” with people who doesn't wants to see pixelated stuff is that by default Android browsers do not allow to zoom in all web pages. Suffice to say I always enable the force enable zoom option, and you should too.

Now I don’t have to scroll to see maukka’s tests :partying_face: