Dynamic Image Resize Hack

Ok, so your users DEMAND that you have [IMG ] tags activated, so you finally gave in, but now people are including huge 2000 pixel wide images that screw up your forum tables and generally make things a mess.

So, what's an easy way of preventing this huge image from beaking the page? Dynamically resize it!

The way it works is this:

When the IMG tag is parsed with the vbcode parser, the image is give a name="" attribute. It is assigned a random name, beginning with "ri_".

A Javascript function is run "onload" and "onresize"... when the page loads and when the user resizes their browser.

The function looks for all the image in the page beginning with "ri_" filename and resizes them based on some maximum width you specify. The height is calculated automatically in proportion to the width.

All those image resize, and VIOLA! Your page format stays intact and no one has to scroll forever to the right to read the posts.

Now, for the bad news:

This ONLY works on newer browsers, basically 4.0+ across the board, and I have NOT tested them all (that's your job).

This only resizes the image, not reduce them... in other words, it will take just as long to download the image as it normally would. So those 3MB 2000 pixel monsters some dummy took with his new Mavica will still take forever to load. The reason this doesn't matter to me, is that most of the time other forum users will complain to the poster, not the admin.

Whew! All legalities aside, here's the good stuff:

First, you need to modify admin/functions.php. Go to about line 784 and look for the following line:

$bbcode = preg_replace("/(\[)(img)(])(\r\n)*([^\"".iif($allowdynimg,"","\?\&")."]*)(\[\/img\])/siU", "<img s

(I didn't copy the whole line, this section is unique enough for a search)

REPLACE that line with the following:

PHP Code:

// DLST Hack: this is what needs to change to incorporate maximum file size hack
// Every file needs to have a "name" (name="") for the resize Javascript to work, and it needs to be ri_NAME where NAME is some alphanumeric randomness

// return a randomly-generated string with input length
//# Blake Caldwell <blake@pluginbox.com>
function randomString($length=15){
    static $srand;
    if($srand != true){
        $srand = true;
        srand((double)microtime()*1000000);        # only seed once!
    }
    $chars = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    for($i=0; $i<$length; $i++){
        $result .= substr($chars,rand(0,strlen($chars)-1),1);
    }
    return $result;
}

$ran_file_name = "ri_" . randomString();
$bbcode = preg_replace("/(\[)(img)(])(\r\n)*([^\"".iif($allowdynimg,"","\?\&")."]*)(\[\/img\])/siU", "<img src=\"\\5\" border=\"0\" name=\"$ran_file_name\" alt=\"\">", $bbcode); 


Got it so far? Cool. Now, go to the "headinclude" template. Find the following line (it's near the end):

</style>

and add the following BELOW that line:

PHP Code:

<script name="Resize Images" language="JavaScript1.2">
        <!--
        var fixed_width = 350; // can be changed
        var original_width;
        var original_height;
        var iw;
        
        function init() {    
            original_width = new Array(document.images.length); original_height = new Array(document.images.length);    
            return resizeImages();
        }
        
        function resizeImages() { 
            iw = window.innerWidth ? window.innerWidth : document.body.clientWidth; 
            if (document.images) {      
                for (var i=0; i < document.images.length; i++) {            
                    if (document.images[i].name.substring(0,3) == "ri_") {                      
                        if (!original_width[i]) {                   
                            original_width[i] = document.images[i].width;                   
                            original_height[i] = document.images[i].height;             
                        }                       
                    if (document.images[i].width > (iw - fixed_width)) {                    
                        document.images[i].height = Math.floor(document.images[i].height * ((iw - fixed_width) / document.images[i].width));                    
                        document.images[i].width = Math.floor((iw - fixed_width));              
                    }               
                    else if (document.images[i].width < original_width[i]) 
                    {                    
                        var new_width = Math.min(original_width[i], (iw - fixed_width));                    
                        document.images[i].height = Math.floor(document.images[i].height * (new_width / document.images[i].width));
                        document.images[i].width = Math.floor(new_width);               
                    }           
                }       
            }   
        }   
        return 1;
        }
// -->
        </script> 


Before you close that menu, edit the "fixed_width" variable (in the line that reads var fixed_width = 350 to the "reserved space" in your page.

Now let me repeat... since this is the confusing part: There is a certain number of horizontal space taken up by your page, say by the navigation bar at the left, by the space where the username and user info is when view a post, etc. All that stuff takes up a certain amount of space, measured in pixels. That's the number to put in here.

And, of course, experiment. It varies a little from browser to browser. 350 worked well for me, and I have a pretty much stock forum with a 120 pixel nav bar on the left.

And that's it! Pretty easy ay?

As always, remember this is the beta forum for a reason, so please provide as much feedback as possible, the badder the better and let me know what works and what doesn't!

-dlst

[Gutspiller]

error:

Warning: Unknown modifier 'g' *******/functions.php on line 751

Fatal error: Cannot redeclare randomstring() in *******/functions.php on line 737

line 751:

PHP Code:


$bbcode = preg_replace("/([)(img)(])(\r\n)*([^\"".iif($allowdynimg,"","?&")."]*)([/img])/siU", "<img src=\"\5\" border=\"0\" name=\"$ran_file_name\" alt=\"\">", $bbcode); 


line 737:

PHP Code:


function randomString($length=15){ 


[dlst]

I don't get that problem on mine...

Try renaming the function to something else, and modify the call (it's a couple lines down) as well, and see what happens.

Let me know if you need "baby step" instructions.

[epic]

no any change after install it

[dlst]

Originally posted by epic
no any change after install it

Let's verify, shall we?

Go to a page in your forum where users have posted images via the [IMG ] tag.

View the source of that page, and see if the images have the name= attribute in the image tag... you're looking for a tag that looks something like this:

<img src="/images/testimage.gif" border="0" name="ri_L1nNQBYG9I5ZPxu" alt="">

See the name="ri_L1nNQBYG9I5ZPxu" part? That's what you're looking for.

Also, please report the following:

What browser are you using?
Do you have vbCode turned on?
Do you have IMG code turned on?
What is the URL to your test forum?

-dlst

[Crapforum]

This hack can be done without changing any documents.

insert the following in your style sheet(headerinclude):
.imgfix {width:expression(document.body.clientWidth -330)}

change the number "330" when the fixed images are still to large/small. (test this number with different screen resolutions)


create a vbcodetag [IMGFIX]
use this code replacement:
<img src="{param}" class=imgfix><br>
<a href="{param}">Click for full image</a><br>


to finish it, add an IMGFIX in your vbcodebuttons
See a demo at http://www.crapforum.nl

Good luck.

[dlst]

Originally posted by Crapforum
This hack can be done without changing any documents.

Hey Crap, thanks for posting.

I don't think we're talking about the same thing. Go to http://crapforum.caveo.nl/showthread.php?threadid=381 and take a look at the second post on the page. You will see there a very wide image that forces the user to scroll if the browser window is set narrow.

I'm not saying your solution is a bad, ineffective one. It just appears we are not trying to do the same things.

Thanks.

[epic]

Originally posted by dlst


Let's verify, shall we?

Go to a page in your forum where users have posted images via the [IMG ] tag.

View the source of that page, and see if the images have the name= attribute in the image tag... you're looking for a tag that looks something like this:

<img src="/images/testimage.gif" border="0" name="ri_L1nNQBYG9I5ZPxu" alt="">

See the name="ri_L1nNQBYG9I5ZPxu" part? That's what you're looking for.

Also, please report the following:

What browser are you using?
Do you have vbCode turned on?
Do you have IMG code turned on?
What is the URL to your test forum?

-dlst

Sorry,i mean attachment is image.

[Gutspiller]

Originally posted by dlst
I don't get that problem on mine...

Try renaming the function to something else, and modify the call (it's a couple lines down) as well, and see what happens.

Let me know if you need "baby step" instructions.

yes, baby steps would be good for my noobie a$$.

Thanks!

[dlst]

Originally posted by Gutspiller
yes, baby steps would be good for my noobie a$$.

Ok, here goes:

In the line below that reads:

PHP Code:

function randomString($length=15){ 


CHANGE that to

PHP Code:

function randomString12345($length=15){ 


Then find the line that reads:

PHP Code:

$ran_file_name = "ri_" . randomString(); 


and CHANGE that to

PHP Code:

$ran_file_name = "ri_" . randomString12345(); 


And then let me know what happens.