Page 1 of 1

Resize Image BBCode

Posted: Sun Oct 18, 2020 12:37 am
by DirectorPr
Hey guys, I was looking for help with creating a bbcode or editing the default [img] bbcode to include resizing images, and then if not resizes to default to the auto value. How I currently have it written is a mix of what I've found in other places, but as follows.

BBCode Usage

Code: Select all

[image={NUMBER1},{NUMBER2}]{URL}[/image]
HTML Replacement

Code: Select all

<img src="{URL}" style="width: {NUMBER1}px;height: {NUMBER2}px;" />
If there isn't a way to edit the default [img] code that's not anything serious I can just disable it board wide and funnel people through a new custom tag, but is there a way to make this custom bbcode use the image's default resolution if not the custom width and height set?

Re: Resize Image BBCode

Posted: Sun Oct 18, 2020 3:28 am
by thecoalman
You can disable the [img] tag using permissions. Can use [img] BBCode tag, that's found in the forum permissions. If you have used roles to assign forum permissions you can just edit the role and it will apply to all forums that role is used.

A browser will default to native resolution if no height and width is set which I believe is what is used for [img] tag.

Applying it to the BBcode would probably require JS.In fact you could probably skip the custom BBcode and apply JS directly to existing [img].

Re: Resize Image BBCode

Posted: Sat Oct 24, 2020 9:03 pm
by DirectorPr
Yeah I figured if I can get a custom bbcode to work I could just disable the default one. Any good tutorials that you could suggest to help learn applying JS to current bbcodes? Even if I don't use it for the base [img] tag I'm sure it'll come handy in the future.

Re: Resize Image BBCode

Posted: Mon Oct 26, 2020 3:18 pm
by JoshyPHP
I don't recommend disabling default BBCodes. If you do, you may find yourself unable to use image-related extensions that expect an IMG BBCode, not an image one.

Extensions can replace—or preferably extend—default BBCodes. You can keep the default IMG thing, add the height and width attributes so users can specify the dimensions, and modify the BBCode's template to add those attributes to the <img> element. If you want to let users specify the dimensions as a comma-separated pair rather than individually named values, you have to reparse the default attribute's value.

Writing code is faster than explaining it so here's the same thing in code form: https://github.com/s9e/phpbb-ext-imgsize

I don't intend to maintain those files so feel free to fork/reuse at your convenience.

Re: Resize Image BBCode

Posted: Thu Oct 29, 2020 7:40 am
by Floyd
Here's what I wrote. It dynamically resizes an image based on a percentage of the forum column width.

BBCode usage: [imgresize={NUMBER}]{URL}[/imgresize]

HTML replacement: <img src="{URL}" style="width: {NUMBER}%; height: {NUMBER}%;" />

Help line: Resize Image: [imgresize=%window]http://image_url[/imgresize]

Re: Resize Image BBCode

Posted: Tue Nov 10, 2020 2:42 pm
by Edson Quadros
JoshyPHP wrote:
Mon Oct 26, 2020 3:18 pm

Writing code is faster than explaining it so here's the same thing in code form: https://github.com/s9e/phpbb-ext-imgsize
Great, that's what I was looking for.
Wonderful, thank you very much

Re: Resize Image BBCode

Posted: Sat Nov 21, 2020 4:32 pm
by Bruce Banner
JoshyPHP wrote:
Mon Oct 26, 2020 3:18 pm
Writing code is faster than explaining it so here's the same thing in code form: https://github.com/s9e/phpbb-ext-imgsize
Hi. Could you please explain how to use this extension?

Re: Resize Image BBCode

Posted: Mon Nov 23, 2020 3:46 pm
by Bruce Banner
Bruce Banner wrote:
Sat Nov 21, 2020 4:32 pm
JoshyPHP wrote:
Mon Oct 26, 2020 3:18 pm
Writing code is faster than explaining it so here's the same thing in code form: https://github.com/s9e/phpbb-ext-imgsize
Hi. Could you please explain how to use this extension?
Sorry, never mind. Have figured it out.

Code: Select all

[img width=X]image url[/img]
or

Code: Select all

[img height=Y]image url[/img]
I know it's also possible to write

Code: Select all

[img width=X, height=Y]image url[/img]
or

Code: Select all

[img height=Y, width=X]image url[/img]
but I don't really see the point of that as only the second of the two dimensions is actually applied.

Re: Resize Image BBCode

Posted: Sat Nov 28, 2020 9:47 am
by Bruce Banner
I see now. I thought I had to put a comma in but I don't. It should be

Code: Select all

[img width=X height=Y]image url[/img]
or

Code: Select all

[img height=Y width=X]image url[/img]