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

32 posts / 0 new
Last post

Pages

Barkuti
Barkuti's picture
Offline
Last seen: 36 min 34 sec ago
Joined: 02/19/2014 - 14:46
Posts: 4511
Location: Alhama de Murcia, Spain
FIXED: How to properly insert images into your posts without breaking the forum page layout

This forum has a small problem of what frequent mobile users like me are well aware of. Let me a brief description: threads/posts and its contents are drawn inside boxes whose width is less than screen width pixels. When inserting images, by default the forum does nothing to give images proper size format. This means careless and/or unaware users can (and often) break the forum page layout when inserting big images (which nowadays are common).

For this reason, to properly insert an image without breaking the page layout always use the relative width option.

 

Fixed. See #12 update below.

The relative width option is worthwhile being used if you like:

 

Simple Post Editor users: insert the percentage value image width in the (OPTIONAL) Relative Width (%): section in the Insert Image box.

Advanced Post Editor users: insert the percentage value figure along with the % character behind it in the horizontal Dimensions attribute input box, and clear the vertical box.

 

Suffice to say larger than 100 points figures will “break the box”, therefore avoid such numbers. Wink

Thanks. 

 

P.S.: this thread has been created to be appended to my signature.

The Light Innocent I am

Edited by: Barkuti on 11/07/2019 - 14:22
kennybobby
kennybobby's picture
Offline
Last seen: 8 hours 34 min ago
Joined: 05/10/2017 - 09:13
Posts: 159
Location: huntspatch, alabama

Thank you that works great. i never knew what those (optional) values would do before.

But using 100% in the (optional) relative width field caused the image to be reduced to exactly fit within the border of the post field.

chinooker
chinooker's picture
Offline
Last seen: 5 hours 21 min ago
Joined: 12/16/2015 - 13:27
Posts: 1811
Location: mid left coast

Works like that on tablets and cellphones too, which helps a lot on the smaller screens.

Cereal_killer
Cereal_killer's picture
Offline
Last seen: 3 weeks 4 days ago
Joined: 07/22/2013 - 13:10
Posts: 4005
Location: Ohio

Wait, you can specify >100% relative width? I’m doing 300% from now on, thanks for the great idea!

 RIP  SPC Joey Riley, KIA 11/24/14. Now I am become death, the destroyer of worlds.

Barkuti
Barkuti's picture
Offline
Last seen: 36 min 34 sec ago
Joined: 02/19/2014 - 14:46
Posts: 4511
Location: Alhama de Murcia, Spain

Cereal_killer wrote:
Wait, you can specify >100% relative width? I'm doing 300% from now on, thanks for the great idea!

LoL behave yourself, that is food for some hoax. Or to kick out people from a thread…

 

Let's make a Wink test. Test done, 594% was enough. At 595% and up I was forced to scroll the screen sideways to see all content in a 1920 pixel wide screen device (smartphone/tablet in landscape).

 

 

Looks like it has some sort of limit. Will take a screenshot or two, and come back.

Screenshot coming for my next post.

 

Big Smile

Sun, 10/13/2019 - 03:36

The Light Innocent I am

Barkuti
Barkuti's picture
Offline
Last seen: 36 min 34 sec ago
Joined: 02/19/2014 - 14:46
Posts: 4511
Location: Alhama de Murcia, Spain

Well, take a look at what you get if you get Big Smile nasty:

 

 

The Light Innocent I am

KevinZA1988
KevinZA1988's picture
Online
Last seen: 7 min 48 sec ago
Joined: 02/26/2018 - 02:26
Posts: 749
Location: South Africa

What are all the compatible image hosting websites?

Armytek Prime C1 Pro, Armytek Prime C2 Pro, Armytek Tiara C1 Pro, Astrolux MF01 Mini, BLF Q8, BLF A6, BLF FW1A, BLF FW3A, BLF FW3C, Convoy L6, Convoy C8+ , Convoy S3, Convoy M21A, Convoy S11, Emisar D4, Fireflies E07, Jaxman E2L, Lumintop EDC18, Manta Ray C8.2 long version, Olight S1R Baton II special edition series, S2R Baton II, Nitecore HC65, Olight H1R Nova.

https://photos.app.goo.gl/JaJaDv4V838AEJf39

raccoon city
raccoon city's picture
Online
Last seen: 5 min 32 sec ago
Joined: 10/06/2010 - 02:35
Posts: 13745
Location: रॅकून सिटी Palm Desert CA USA

KevinZA1988 wrote:

What are all the compatible image hosting websites?

Most of them work with BLF.

I like abload.de and imgur.

djozz
djozz's picture
Offline
Last seen: 11 hours 4 min ago
Joined: 09/07/2012 - 17:04
Posts: 16418
Location: Amsterdam
Quote:
Advanced Post Editor users: insert the percentage value figure along with the % character behind it in the horizontal Dimensions attribute input box.

This distorts the picture, unless on top of putting the percentage in the horizontal box you also empty the vertical pixel box

Barkuti
Barkuti's picture
Offline
Last seen: 36 min 34 sec ago
Joined: 02/19/2014 - 14:46
Posts: 4511
Location: Alhama de Murcia, Spain

djozz wrote:

This distorts the picture, unless on top of putting the percentage in the horizontal box you also empty the vertical pixel box

Fixed, thanks.

The Light Innocent I am

toddcshoe
toddcshoe's picture
Offline
Last seen: 4 hours 31 min ago
Joined: 01/24/2018 - 23:49
Posts: 2082
Location: Foley, MO

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

"Everywhere I go, there I am"

Barkuti
Barkuti's picture
Offline
Last seen: 36 min 34 sec ago
Joined: 02/19/2014 - 14:46
Posts: 4511
Location: Alhama de Murcia, Spain

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

 

Barkuti wrote:

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

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

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

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

The Light Innocent I am

raccoon city
raccoon city's picture
Online
Last seen: 5 min 32 sec ago
Joined: 10/06/2010 - 02:35
Posts: 13745
Location: रॅकून सिटी Palm Desert CA USA

...

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
Barkuti's picture
Offline
Last seen: 36 min 34 sec ago
Joined: 02/19/2014 - 14:46
Posts: 4511
Location: Alhama de Murcia, Spain

raccoon city wrote:

...

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 LOL the forum.

The Light Innocent I am

sb56637
sb56637's picture
Offline
Last seen: 4 hours 3 min ago
Joined: 01/08/2010 - 09:29
Posts: 6592
Location: The Light

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

Budget Light Forum ...where Frugal meets with Flashlight!

raccoon city
raccoon city's picture
Online
Last seen: 5 min 32 sec ago
Joined: 10/06/2010 - 02:35
Posts: 13745
Location: रॅकून सिटी Palm Desert CA USA

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

sb56637
sb56637's picture
Offline
Last seen: 4 hours 3 min ago
Joined: 01/08/2010 - 09:29
Posts: 6592
Location: The Light
raccoon city wrote:

I just tried to make an image 120% wide with the Advanced Editor, and I couldn’t!  alt=" />  ;)

Wink

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

Budget Light Forum ...where Frugal meets with Flashlight!

Marc E
Offline
Last seen: 3 days 21 hours ago
Joined: 05/18/2013 - 08:14
Posts: 303
Location: South West UK

Thanks Barkuti and sb Smile

raccoon city
raccoon city's picture
Online
Last seen: 5 min 32 sec ago
Joined: 10/06/2010 - 02:35
Posts: 13745
Location: रॅकून सिटी Palm Desert CA USA

Marc E wrote:

Thanks Barkuti and sb Smile

Yes, thank you!  :BEER:

The forum is indeed better now.

Barkuti
Barkuti's picture
Offline
Last seen: 36 min 34 sec ago
Joined: 02/19/2014 - 14:46
Posts: 4511
Location: Alhama de Murcia, Spain

You never dared to try some nasty figure, raccoon city? Big Smile 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. 

The Light Innocent I am

Barkuti
Barkuti's picture
Offline
Last seen: 36 min 34 sec ago
Joined: 02/19/2014 - 14:46
Posts: 4511
Location: Alhama de Murcia, Spain

sb56637 wrote:

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? 

The Light Innocent I am

sb56637
sb56637's picture
Offline
Last seen: 4 hours 3 min ago
Joined: 01/08/2010 - 09:29
Posts: 6592
Location: The Light
Barkuti wrote:

sb56637 wrote:

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.

Budget Light Forum ...where Frugal meets with Flashlight!

ToyKeeper
ToyKeeper's picture
Online
Last seen: 9 min 3 sec ago
Joined: 01/12/2013 - 14:40
Posts: 10143
Location: (469219) 2016 HO3

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
Pete7874's picture
Offline
Last seen: 6 hours 4 min ago
Joined: 11/23/2011 - 16:47
Posts: 2968
Location: USA

max-width tag is no longer respected.

This is using {width:50%} tag:

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

xevious
xevious's picture
Offline
Last seen: 13 hours 27 min ago
Joined: 02/27/2013 - 21:55
Posts: 1197
Location: Hoboken, NJ USA

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

Barkuti
Barkuti's picture
Offline
Last seen: 36 min 34 sec ago
Joined: 02/19/2014 - 14:46
Posts: 4511
Location: Alhama de Murcia, Spain

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

The Light Innocent I am

kennybobby
kennybobby's picture
Offline
Last seen: 8 hours 34 min ago
Joined: 05/10/2017 - 09:13
Posts: 159
Location: huntspatch, alabama
xevious wrote:
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
sb56637's picture
Offline
Last seen: 4 hours 3 min ago
Joined: 01/08/2010 - 09:29
Posts: 6592
Location: The Light

ToyKeeper wrote:
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 wrote:
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.)

Budget Light Forum ...where Frugal meets with Flashlight!

sb56637
sb56637's picture
Offline
Last seen: 4 hours 3 min ago
Joined: 01/08/2010 - 09:29
Posts: 6592
Location: The Light

Barkuti wrote:

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.

 

Quote:
Or maybe a new forum engine. Wink

Nope. Smile

Budget Light Forum ...where Frugal meets with Flashlight!

Pete7874
Pete7874's picture
Offline
Last seen: 6 hours 4 min ago
Joined: 11/23/2011 - 16:47
Posts: 2968
Location: USA

sb56637 wrote:
(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 256×256 image gets expanded up to 983×983 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
Barkuti's picture
Offline
Last seen: 36 min 34 sec ago
Joined: 02/19/2014 - 14:46
Posts: 4511
Location: Alhama de Murcia, Spain

Pete7874 wrote:

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! LOL 

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.

The Light Innocent I am

Pages