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]

Originally posted by dlst


This version of function.php is not modified... post your modified version so I can find the error.

OK I have PHP Version 4.1.0 (Thanks Lesane)

and here is the attachment of the modified index.php.


I just found the line you said, made sure the entire line was selected and pasted in the new code, I don't see how I could of messed anything up.

[dlst]

Originally posted by Gutspiller


OK I have PHP Version 4.1.0 (Thanks Lesane)

and here is the attachment of the modified index.php.


I just found the line you said, made sure the entire line was selected and pasted in the new code, I don't see how I could of messed anything up.

Hey Gutspiller...

I'm really sorry, but I can't diagnose your problem any further. I'm using vb 2.2.1 and it has a different functions file... I don't have a copy of the old vb, so I can't test your file any further. Sorry man.

Is there anyone out there that is still using the old version of vb that would like to help diagnose this?

[Synicide]

Well, talk about bringing a thread out from the dead...
Does this hack work with any versions after 2.2.1? Because I believe I have a different functions.php file. o_O;