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

raccoon · 2019-11-08T01:56:10.000Z

...

Cool!

I just posted my sig image, which used to be too wide for my screen, and it was automatically resized!

(But, the aspect ratio is all wrong unless I delete the height dimension manually.

I don't know if sb can fix that problem.)

Barkuti · 2019-11-08T03:50:20.000Z

raccoon city:

...

Cool!

I just posted my sig image, which used to be too wide for my screen, and it was automatically resized!

(But, the aspect ratio is all wrong unless I delete the height dimension manually.

I don't know if sb can fix that problem.)

I see raccoon, just had to fiddle with it for it to look good in your quote. I briefly observed this while pming with sb56637, happens on the Avanced Post Editor. Will report to him looks like an easy fix: empty the vertical dimension box/variable for it to always get properly resized on par with the horizontal, keeping aspect ratio. Improving :-)) the forum.

sb56637 · 2019-11-08T12:47:00.000Z

That’s correct raccoon* and *Barkuti, I never recommend specifying a height dimension. Just the relative width percentage is enough. (And in cases where the user forgets to specify the width, the forum style should now limit the width automatically to 100% maximum.)

raccoon · 2019-11-08T13:25:55.000Z

I just tried to make an image 120% wide with the Advanced Editor, and I couldn't!

sb56637 · 2019-11-08T13:39:13.000Z

raccoon city:

I just tried to make an image 120% wide with the Advanced Editor, and I couldn’t!

Where you can still cheat is with tables, you can take comfort in throwing off the page alignment for everybody by manually specifying a super-wide table. :innocent:

Marc_E · 2019-11-08T13:47:35.000Z

Thanks Barkuti and sb

raccoon · 2019-11-08T13:56:45.000Z

Marc E:

Thanks Barkuti and sb

Yes, thank you!

The forum is indeed better now.

Barkuti · 2019-11-08T14:23:33.000Z

You never dared to try some nasty figure, raccoon city? :-D I once did a 600+% here, the thread turned out really nasty looking I swear. It could have served as a shenanigan by a troll, forcing moderator intervention.

All that remains now is to unify the forum post editor. I am used to syntax reconstructing quotes made with the Simple Post Editor, it's a hardship which goes both ways (Advanced to Simple too). People wouldn't flee, at most they'd complain for a few days while re-learning and getting used to the new editor, wonderful time for a lot of jokes.

Barkuti · 2019-11-08T14:26:40.000Z

sb56637:

…

Where you can still cheat is with tables, you can take comfort in throwing off the page alignment for everybody by manually specifying a super-wide table. :innocent:

What about videos?

sb56637 · 2019-11-08T19:50:23.000Z

Barkuti:

sb56637:

…
Where you can still cheat is with tables, you can take comfort in throwing off the page alignment for everybody by manually specifying a super-wide table. :innocent:

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.

ToyKeeper · 2019-11-16T08:11:35.000Z

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.

Pete7874 · 2019-11-16T16:39:36.000Z

max-width tag is no longer respected.

This is using {width:50%} tag:

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

xevious · 2019-11-16T16:40:31.000Z

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

Barkuti · 2019-11-16T17:18:37.000Z

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. ;)

kennybobby · 2019-11-16T17:50:45.000Z

xevious:

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

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

sb56637 · 2019-11-16T20:24:00.000Z

ToyKeeper:

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.

Pete7874:

max-width tag is no longer respected.

This is using {width:50%} tag:

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

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.)

sb56637 · 2019-11-16T20:26:00.000Z

Barkuti:

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.

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

Or maybe a new forum engine.

Nope. :-)

Pete7874 · 2019-11-16T20:57:23.000Z

sb56637:

(I would recommend using just width:, not max-width: when you specify an image width.

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%:

Barkuti · 2019-11-16T21:55:13.000Z

Pete7874:

…

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.

…

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.

Mocarny · 2019-11-16T23:02:16.000Z

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