Mailing list

Our Services

Free Tools & Scripts

Email Related

Shoutcast Related

Miscellaneous

For Your Information

Service Updates

Service Status & Stats

Knowledgebase

Forums

Contact

Email Sales (new customers)

Support Tickets (existing customers)

Recommended Books

Free web services

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.

the image width limiter uses only 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:

<img src="{URL}" border="0" />

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

We don't currently have a demo.

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