Auto Resize Your Images 3.52 compliant

I was looking for some code that would allow an image over size x to be resized in IE, Firefox, and Opera. I tried all the variations out there without luck some would work in IE, some in Firefox, etc.. So I finally got a tweaked version of some old code that actually works flawless in IE, Firefox, and Opera. I have included it below, but It needs 1 final tweak that I'm hoping someone in the community can help with.

i am NOT taking credit for this hack, all I have done is tweak it to get it working for me..


This code has been updated as of 8:30pm with the clickable link built in now!

Step 1: Edit your class_bbcode.php file located in (root/includes)

find

PHP Code:

return '<img src="' .  $link . '" border="0" alt="" />'; 


replace with the following.

PHP Code:

/* Start Image RESIZE */  

 $navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';   
if (stristr($navigator_user_agent, "msie")) {   
    return '<a href="' .  $link . '" target="_blank"><img src="' .  $link . '" border="0" alt="" style="width: expression(this.width > 640 ? 480 : true);" /></a>';   
} else {   
    return '<a href="' .  $link . '" target="_blank"><img src="' .  $link . '" border="0" alt="" style="max-width: 730px;" /></a>';   
}    

/* End Image RESIZE */ 


you can play with the widths to get what you want working.

[kal-L]

Originally Posted by SiMateoAko

Lots of info here. If you're like me and don't want to add 30 lines of code to your img tags, do what I did.

replace this:

return '<img src="' .  $link . '" border="0" alt="" />';

with this:

return '<img style="max-width:800px; width: expression(this.width > 800 ? 800: true);" src="' .  $link . '" border="0" alt="" />';

The code you want to replace is found in the function handle_bbcode_img_match() in class_bbcode.php. For me it was on line 1831.

This is fast and will work with either firefox or IE. It may even work with Opera, but I don't know.

Not only did this work for 3.6.4 but it worked fast and for IE,Firefox and Indeed Opera.:up:

[taydu]

Originally Posted by NeutralizeR

I've found an alternative solution (I'm running a vBulletin 3.6.1 board)

Open your /forum/includes/class_bbcode.php file:

On line 1879, replace:

PHP Code:

return '<img src="' .  $link . '" border="0" alt="" />'; 


with:

PHP Code:

return '<img class="resize" src="' .  $link . '" border="0" alt="" />'; 


Open your Style Manager > Main CSS > Additional CSS Definitions and add this code at the bottom:

.resize {max-width: 728px; width: expression(this.width > 728 ? 728: true);}

Save.

Tested both in IE7 RC1 & Firefox 1.5.0.7

Resized image will keep it's link if it has any.

Demo:
http://www.msxlabs.org/forum/dogadan...tml#post224010

Actual image width is 1024 pixels (resized to 728px) and the thumbnail keeps the link.

darn it, not working 3.6.4 for me

[Traxdata]

lol. still working even on 3.7.0. beta2

not sure why it is not default in vbulletin???

[phpnewbie]

Originally Posted by A-handreas

Hello guys,

I've tried your hack, it works perfect in IE but it didn't work with Firefox 1.5 :disappointed: Any idea ?

best regards
Andreas

i'm using FF 2.0.11 and it still works normally
this tut so cool, have no "product" & no javascript ^^

thank you very much

[phpnewbie]

problem:
if image width is smaller "max-width", it still makes a "link" on that image.

[csmcsm]

Made a slight tweak, to remove the link if the image was smaller than or 730px wide:

PHP Code:

/* Start Image RESIZE */  

         $navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : ''; 
         if (@fopen($link, "r"))
         {  
         list($width, $height, $type, $attr) = getimagesize($link);
         }
        if (stristr($navigator_user_agent, "msie")) {
            $image_size_link = '
            <img src="' .  $link . '" border="0" rel="lightbox" title="'.$link.'" alt="" style="width: expression(this.width > 640 ? 480 : true);" />';   
                } 
                else {   
            $image_size_link = '<img src="' .  $link . '" border="0" rel="lightbox" title="'.$link.'" alt="" style="max-width: 730px;" />';
        }
        if (@fopen($link, "r"))
         { 
            if($width <= 730)
            {
                $image_size = '<a href="' .  $link . '" target="_blank">'.$image_size_link.'</a>';
            }
            else 
            {
            $image_size = '
                
                <table cellpadding="0" cellspacing="0" border="1">
                    <tr><td style="background-color:#000000;color:#FFFFFF;">
                <a href="' .  $link . '" target="_blank" style="color:#FFFFFF;text-decoration:none;">Click to enlarge image</a>
                    </td></tr>
                    <tr><td><a href="' .  $link . '" target="_blank">' . $image_size_link . '</a></td></tr>
                    <tr><td style="background-color:#000000;color:#FFFFFF;">
                <a href="' .  $link . '" target="_blank" style="color:#FFFFFF;text-decoration:none;">Click to enlarge image</a>
                    </td></tr>
                </table>
                
            ';   
            }
         
        return $image_size;
         }
/* End Image RESIZE */ 


requires GD though

also working on getting lightbox2 working with it


ANYONE using My code pre 12:44 20th january 2008 CET please update your code!