Author: Ashley Taylor - [email protected]
Modification Description:: Very small MOD that will fix the known issue of images over flowing outside of the forum. Very handy MOD for gaming and computer related websites with alot of screenshots etc.
Modification Version:: Version 1.10 - released
Requirements: This mod is compatible with a fresh install.
Features: Simple JavaScript that automatically resizes the images in posts and signatures (any image that is rendered by the BBCode [IMG] tag).
Screenshots:
This is the image I posted:
http://www.planet-mu.com/image/discogra ... stance.jpg
This is a screenshot of it working:
http://img.getdarker.com/uploads/2008/1 ... -image.jpg
Demo URL: http://getdarker.com/forums/viewtopic.p ... =633#p1461
Modification Download: Download soon to come. Please follow the instructions below meanwhile.
------------------------------------------
I give you..the greatest image resizer of all time!!
DEMO: http://getdarker.com/forums/viewtopic.p ... =633#p1461
Update: Fixed the JS. If you found it was opening other images then please re download and overwrite the old one.
Problem/Scenario:
You have your fixed width forum, and someone decides to post an image that is 6 and a half billion pixels wide - and what happens? You can't see it. The forum doesn't stretch and most importantly the image is still half hidden. So what do you do? You install PIR! Posted Image Resizer. This also works for signatures too!
Solution:
PIR uses JavaScript to iterate through every image and checks if it's width is greater than a specified value. If it is, then boy oh boy do we have a suprise! PIR will resize the image and make it clickable. PIR will also display a neat bar down the side that has the text, "Click to enlarge". PIR also display's the pointer cursor icon so it looks like a normal link.
WTF HOW DO I USE IT?
Simple! Follow the easy steps below to install PIR.
-------------
Step 1, includes/bbcode.php
Open includes/bbcode.php
FIND
Code: Select all
<img src="$1" alt="' . $user->lang['IMAGE']
REPLACE THE WHOLE LINE WITH:
Code: Select all
'img' => '<img src="$1" alt="' . $user->lang['IMAGE'] . '" class="posted_image" />',
SAVE FILE AND UPLOAD
-------
Step 2, the side-bar.jpg and pir.js!
side-bar.jpg - Right click the link below and save target as and save it to your machine,
http://getdarker.com/forums/images/pir/side-bar.jpg
pir.js - Right click the link below and save target as and save it to your machine,
http://getdarker.com/forums/images/pir/pir.js
Note: You might want to edit the pir.js file if you want to increase your maximum width past 600 pixels.
-------
Step 3, the upload!
Upload these files to
Code: Select all
images/pir/
-------
Step 4, editing the templates!
Log into your admin control panel, click the styles tab at the top, click templates under style components. Edit your current theme.
Select overall_header.html from the drop down list.
Now copy this:
Code: Select all
<style type="text/css">
.posted_image_resized { background-image:url(/forums/images/pir/side-bar.jpg);background-repeat:no-repeat;background-position:left center;background-align:middle;padding-left:22px;cursor:pointer;border:0px;margin:2px;background-color:transparent; }
.posted_image_resized_hover { background-image:url(/forums/images/pir/side-bar.jpg);background-repeat:no-repeat;background-position:left center;background-align:middle;padding-left:22px;cursor:pointer;border:2px solid #cccccc;margin:0px;background-color:#cccccc; }
</style>
<script src="/forums/images/pir/pir.js" type="text/javascript"></script>
Paste this above the </head> tag.
Then on the body tag, add this:
Code: Select all
onload="updatePostedImages();"
Code: Select all
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}" onload="updatePostedImages();">
--------
Step 5, PURGEEEEEE!
In the admin control panel click the general tab, and then find the button "Purge the cache" and click the Run Now button, then click yes.
Sorted.
Installed.
Go find a huge ass image and post it on your forum to see what happens!