Simple PHPBB2 forum CSS image width limiter
When users are allowed to post images in a PHPBB forum, they often post large images that affect the layout of the forum. This simple mod will limit the size of images that can be posted.
When a user first goes on to the page the image will be cropped to the width that you have specified (depending on the layout of your pages). When the user clicks the image, the full image will be displayed. If the image is less than your specified size, then it will be displayed as normal.
Only uses CSS
This mod uses CSS to control the width of the image by containing it in a <div> with a maximum width to cut the image off. This means that there is no need to edit the forums PHP files with complicated code.
Install the image size limiter mod on a PHPBB forum
This mod is very simple to install, but as with all mods for PHPBB or any other system, I still recommend that you back up any files before you edit them - it only takes a second and can save you a lot of hassle.
Step 1
Open bbcode.tpl and find:
<!-- BEGIN img --><img src="{URL}" border="0" /><!-- END img -->
And (after you have backed it up) change it to:
<!-- BEGIN img --><div class="imglimiter" onclick="this.className='imglimiteroff'" title="Click on the image for full size"><img src="{URL}" border="0" /></div><!-- END img --> Step 2
Place the following in your forums CSS file, changing the width (in red) to suit your layout.
/* Image width limiter by BELLonline.co.uk */
div.imglimiter { width: 600px; overflow: hidden; cursor: pointer; }
div.imglimiteroff { } Step 3
I know its stating the obvious, but now upload the files to your server.
See a demo of the image size limiter in action
Install the image size limiter on other forums / blogs / web pages
The instructions above assume that you are using a PHPBB forum, however, you should be able to apply it to other forums and blogs etc as well. You will need to find the file that changes the [img] code to HTML and change it to:
<div class="imglimiter" onclick="this.className='imglimiteroff'" title="Click on the image for full size"><img src="{URL}" border="0" />
The CSS will be exactly the same as above, just pop that in your stylesheet and you're done.
I hope that this helps you, but don't blame me if you mess your forum up!