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

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

Let's make a ;-) 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.

:-D

Sun, 10/13/2019 - 03:36

Well, take a look at what you get if you get :-D nasty:

What are all the compatible image hosting websites?

Most of them work with BLF.

I like abload.de and imgur.

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

Fixed, thanks.

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

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

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

...

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.

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

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

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

Thanks Barkuti and sb :slight_smile:

Yes, thank you!

The forum is indeed better now.

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.

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: