Tutorial: Image BBCode with customizable image dimensions

[Selene310187]

In this tutorial, I will show how you can create an image BBCode with customizable image dimensions for the forum software phpBB like I did here. The embedded image will be responsive and open in a lightbox if the Lightbox extension is installed and activated.


Go to your Administration Control Panel (ACP) and navigate to the POSTING tab. There you can see a list of (custom) BBCodes (it can be empty though). Click on the "Add new BBCode" button.

Under "BBCode usage" paste the following into the field:

Code: Select all

[imgc={NUMBER}]{URL}[/imgc]

This is the BBCode itself which can later used in posts when the HTML replacement is set up correctly. The {NUMBER} token is a placeholder for the max width of pixels the embedded image can have. The {URL} token stands for the direct link of the image. The c in "imgc" stands for custom image dimension but you can choose another name for your custom image BBCode (just keep in mind to adjust the first and third code snippet accordingly).



In the field under "HTML replacement" comes this code snippet:

Code: Select all

<img src="{URL}" style="max-width: {NUMBER}px!important; max-height: unset!important; width: 100%!important; height: 100%!important" class="postimage"/>

It's important that the tokens from the first field appear in the second field as well, otherwise you will get an error message when you try to save the BBCode.
The <img> tag lets you insert the image in the post. The look of the image is controlled with the style attribute. I used the max-width property to adjust the max width of the inserted image and set the width and height properties to 100% each to make the inserted image responsive. The !important rule makes sure that the previous styling rules for the element in question are overridden. Assigning the "postimage" class to the BBCode enables the lightbox from the Lightbox extension for the inserted image and the image opens in a lightbox when clicked on by the user.
Edit: I edited the code to unset the maximum height so that embedded images are displayed with the specified width, provided the browser window is large enough (my tests with the inspection tools show that the browser window needs to have a width that is greater than 1289 pixels)



In the third field (under "Help line"), you can write some helpful text for the user to show him or her how to use the BBCode. The text appears when the user hovers with the mouse over the BBCode in the posting buttons bar in the posting editor.
Example help line text:

Code: Select all

[imgc=number]image URL[/imgc]
embeds an image with a custom max width
sample 1000px max width:
[imgc=1000]https://staticdelivery.nexusmods.com/images/1151/287627-1612995239.jpg[/imgc]

Last but not least you can determine, if your new BBCode should be displayed in the posting editor by activating the small box next to "Display on posting page".

Image of the settings in the ACP:

Click on "Submit" to save your BBCode.


I took the sample from the sample help line text to show you how the final BBCode can look in posts:

Code: Select all

[imgc=1000]https://staticdelivery.nexusmods.com/images/1151/287627-1612995239.jpg[/imgc]

(the figure in the picture is my Fallout 4 character btw )

[Selene310187]

I expanded the HTML replacement code by adding max-height: unset!important; to the style section. This makes sure that the embedded image will have the width that the user had specified in the imgc BBCode, provided the browser window is large enough*.

* minimum width of 1290 pixels according to my recent tests with the inspection tools of the Opera browser