Is there any way to specify a percentage size for images within a post?

Darkle

I'm trying to find a way either via BBCode or Markdown to add inline images with a percentage size so I can put images on the same line at 50% each or 4 smaller images at 25% each.

Right now I've managed to do it with fixed sizes like this:
[img width=200]https://image.com[/img] [img width=200]https://image.com[/img]
Images followed by a space so they appear on the same line.

With this result:

But it would be nice to be able to do it with percentage sizes so that it adapts to the size of the user's screen.

clarkwinkelmann

Darkle you want the width to apply just to that specific post, or any post on the forum?

For something that applies on all the forum, some custom CSS with some media queries should do it. But then all posted images will have that width, even if there's a single one.

Darkle

clarkwinkelmann yes, for that specific post (there are a lot of images), the CSS is a good idea but it's true that it would be inconvenient for the rest of the posts.

I don't really understand why BBCode doesn't allow any size measurement, I thought it was with just % but actually it doesn't work if you specify px, em or rem either.

So there's not much I can do I'll have to use the fixed sizes?

clarkwinkelmann

Darkle using the Flarum extension API you could add a new bbcode tag for special images, or alter how the base image bbcode works. But that requires a bit of coding.

jordanjay29

Darkle I looked into how Flarum implements BBCode.

That is, how s9e implements it, as Flarum just borrows straight from its BBCode repository.

You can see the img definition here, which allows general text for the title and alt attributes, only seems to allow numeric entries for height and width which I found after a little investigation. So none of the %, pt, px, em, rem definitions will work either.

It looks like @luceos ran into a similar problem a while ago, so you might borrow from the solution that JoshyPHP suggested. Or open a new issue there to ask how you can address percentage support for s9e directly yourself.

010101

How about a BBCode that lets you add a class name. Then you have custom CSS that targets that class name?

Or, I feel like the percentage would work in a BBCode. s9e may not allow it directly it sounds like according to what jordanjay29 said. But, maybe you could “trick” it.

Hmmm. So I guess the request is a robust image BBCode? With a class name option, and anything else the default image BBCode doesn’t allow?

Darkle

jordanjay29 Thanks for all the info! Now I understand better how BBCode works in Flarum, I had no idea it borrowed it.

It looks like @luceos ran into a similar problem a while ago, so you might borrow from the solution that JoshyPHP suggested.

I'll have to take a look at this with time and see what I can do, I'll post it here if I find something interesting.

010101 Could be a way to approach this, so that way you would add a class to an image (in the BBCode tag?) and then be able to specify the maximum size of that class in the CSS? Sounds great, you could even add other CSS settings...

Justoverclock

this is extension material for someone, a template to upload images into the posts as a little gallery 🙂

jordanjay29

Justoverclock the way I understand the need, the purpose would be to have images side-by-side without using a table, and that respond properly on different resolutions.

So not necessarily a gallery. Maybe a header or separator in the middle of a post.

Darkle

Justoverclock It gives a certain feeling of that, especially it works very well with a Fancybox extension like the @[deleted] one, so even if the images are small with a click you can see them at their size.

Here's one of the examples I'm going to use (still with fixed sizes until I find a solution):

jordanjay29 Yeah, the post I'm doing has +50 pictures, I realised it was a bit annoying to read the text and have a very long scroll of images until you get to the next piece of text and so on, this little solution would help a lot with this.

That's why I thought that images with a percentage would be the easiest way to make it responsive at all sizes. But yes, maybe it's an idea for a more complex extension to already have those image sizes preconfigured as templates.

jordanjay29

Darkle I had no idea it borrowed it.

Flarum is tall because it stands upon the shoulders of giants. PHP, Laravel, TextFormatter, etc.

010101

Darkle Maybe tonight. Maybe. I’ll make a BBCode that might help you. Depends on how my day goes.

010101

@Darkle here you go:

https://github.com/zerosonesfun/flarum-bbcode-advanced-image

Official Flarum Discuss extension post to come soon. This will let you do width as percentage. And add a class. If you add a class, then you may target the image with any custom CSS you want by adding the CSS in the appearance section of Flarum's admin.