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

[dlst]

Originally posted by epic

Sorry,i mean attachment is image.

Epic, I see you're a man of few words. Please make an exception for me and try to explain, in more than 6 words, what exactly you're having trouble with.

Do you mean your image attachments are images? Isn't that, by definition, what they are?

Do you mean your attachments are being viewed as images? If so, what's the problem?

And what about answers to the rest of my questions? URL to your test forum? Browser you are using to view your pages?

I don't mean to be short, but it's hard to help with so little input, so be a little bit more verbose!

Thanks!

[Gutspiller]

Originally posted by dlst


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.

Warning: Unknown modifier 'g' in **********/admin/functions.php on line 785

Fatal error: Cannot redeclare randomstring12345() in **************/admin/functions.php on line 771

[dlst]

Totally weird. Can you attach your functions.php file so I can take a look?

[dlst]

Oh yeah, and what version of PHP are you running? In older versions you can't declare a function within a function...

[epic]

Originally posted by dlst


Epic, I see you're a man of few words. Please make an exception for me and try to explain, in more than 6 words, what exactly you're having trouble with.

Do you mean your image attachments are images? Isn't that, by definition, what they are?

Do you mean your attachments are being viewed as images? If so, what's the problem?

And what about answers to the rest of my questions? URL to your test forum? Browser you are using to view your pages?

I don't mean to be short, but it's hard to help with so little input, so be a little bit more verbose!

Thanks!

I attach a image in post.
when i viewing the post the image(attachment) do not been auto resized.
Thx.Can you help me?

[dlst]

Originally posted by epic

I attach a image in post.
when i viewing the post the image(attachment) do not been auto resized.
Thx.Can you help me?

What is the URL to your forum?

[epic]

Oh,i have some error when edit file.
Now it is be fixed.
Thx.dlst

[Gutspiller]

How do I find out what php version I am using? I am using Ventures Online and I would think they are using the latest php, since many other VB users are using them.

here's my functions.php, I am using 2.0.3 of VB.

[Lesane]

Originally posted by Gutspiller
How do I find out what php version I am using? I am using Ventures Online and I would think they are using the latest php, since many other VB users are using them.

make a file called for example info.php and put this code in it:

PHP Code:

<?php 
phpinfo();
?>

save it , upload it to your webserver and execute the file and then you will get a long table with information about the installation of your php.

[dlst]

Originally posted by Gutspiller
here's my functions.php, I am using 2.0.3 of VB.

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