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

22 posts / 0 new
Last post
Barkuti
Barkuti's picture
Offline
Last seen: 1 hour 13 min ago
Joined: 02/19/2014 - 14:46
Posts: 4270
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.

Edited by: Barkuti on 11/07/2019 - 14:22
kennybobby
kennybobby's picture
Offline
Last seen: 10 hours 27 min ago
Joined: 05/10/2017 - 09:13
Posts: 151
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: 6 hours 41 min ago
Joined: 12/16/2015 - 13:27
Posts: 1715
Location: mid USA 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: 2 hours 22 min ago
Joined: 07/22/2013 - 13:10
Posts: 3916
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: 1 hour 13 min ago
Joined: 02/19/2014 - 14:46
Posts: 4270
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

Barkuti
Barkuti's picture
Offline
Last seen: 1 hour 13 min ago
Joined: 02/19/2014 - 14:46
Posts: 4270
Location: Alhama de Murcia, Spain

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

 

 

KevinZA1988
KevinZA1988's picture
Offline
Last seen: 2 hours 6 min ago
Joined: 02/26/2018 - 02:26
Posts: 714
Location: South Africa

What are all the compatible image hosting websites?

Astrolux MF01 Mini, BLF Q8, BLF A6, 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 51 sec ago
Joined: 10/06/2010 - 02:35
Posts: 13274
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
Online
Last seen: 50 sec ago
Joined: 09/07/2012 - 17:04
Posts: 15949
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: 1 hour 13 min ago
Joined: 02/19/2014 - 14:46
Posts: 4270
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.

toddcshoe
toddcshoe's picture
Offline
Last seen: 3 hours 24 min ago
Joined: 01/24/2018 - 23:49
Posts: 1975
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: 1 hour 13 min ago
Joined: 02/19/2014 - 14:46
Posts: 4270
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

raccoon city
raccoon city's picture
Online
Last seen: 5 min 51 sec ago
Joined: 10/06/2010 - 02:35
Posts: 13274
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: 1 hour 13 min ago
Joined: 02/19/2014 - 14:46
Posts: 4270
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.

sb56637
sb56637's picture
Offline
Last seen: 8 hours 37 min ago
Joined: 01/08/2010 - 09:29
Posts: 6528
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 51 sec ago
Joined: 10/06/2010 - 02:35
Posts: 13274
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: 8 hours 37 min ago
Joined: 01/08/2010 - 09:29
Posts: 6528
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: 1 day 10 hours ago
Joined: 05/18/2013 - 08:14
Posts: 289
Location: South West UK

Thanks Barkuti and sb Smile

raccoon city
raccoon city's picture
Online
Last seen: 5 min 51 sec ago
Joined: 10/06/2010 - 02:35
Posts: 13274
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: 1 hour 13 min ago
Joined: 02/19/2014 - 14:46
Posts: 4270
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. 

Barkuti
Barkuti's picture
Offline
Last seen: 1 hour 13 min ago
Joined: 02/19/2014 - 14:46
Posts: 4270
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? 

sb56637
sb56637's picture
Offline
Last seen: 8 hours 37 min ago
Joined: 01/08/2010 - 09:29
Posts: 6528
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!