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

toddcshoe · 2019-10-14T01:42:23.000Z

I use ImgBB for hosting and edit all my pictures to 800x600 before I upload them. Seems to work just fine.

Barkuti · 2019-11-07T21:33:57.000Z

Major update. Had a brief conversation with sb56637 concerning forum box width computation and image fitting, I'll paste it here:

Barkuti:

Hi sb56637, this is just to comment about an issue concerning this forum's implementation. It looks like the forum box width is somehow determined by the visitors' internet browser, which looks into the device resolution it is running on, then it places and renders posted images on the forum box regardless of their pixel (width) size versus the effective forum box width which is determined at the user side. This usually is no problem, or no big deal, with high resolution desktop monitors until someone posts some big resolution photo or the like. However, it is a common inconvenience in portable devices, take a look at a couple screenshots:

For illustrative purposes, the above CRI reports from maukka barely are 1K pixels width, and the device from which the screenshots were taken is a “standard” 1080 × 1920 pixels screen smartphone.

This is just to ask, is this in any way fixable by changing the forum engine's code? Of course I believe the answer is yes, and it must involve the engine instructing browsers to fit images and videos strictly within the rendered forum box width, no matter their size. I think this must be easily attainable with some change in the engine's code.

What do you think?

sb56637:

Hi there!

Good to hear from you.

Well, surprisingly, I think I found a simple fix for the issue that you describe. Please test some of the pages that you’ve noticed this problem on and let me know if it’s better now. Please also let me know if you find any other unwanted side-effects.

Thanks for suggesting this!

Cheers,
Sb

Barkuti:

Thanks a lot sb56637, many will thank the change.

Take a look at the previous thread's opening post, there's a table in it and it extends beyond the forum box width. So there's still issue with that, albeit it is more than a lot less frequent and I'm not sure if it's worth messing with, or does it? In this case it has to do with the way the forum box width is computed, which should stretch out to contain the full table width. Just for your information.

Thanks again.

sb56637:

Looks like tables aren’t worth the trouble, I can’t find a way of enforcing table width without causing other problems.

Thanks to you too!

This is all for now. While the relative width parameter is still worthwhile being used, the major issue is now fixed.

Thu, 11/07/2019 - 20:17

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