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.

[BluPhoenix]

change:

/* Start Image RESIZE */  

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

/* End Image RESIZE */

to:

/* 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 */

That'll make it clickable.. but what does the javascript addition do? from what I see your just using css no need for the javascript?

[ggiersdorf]

Actually you do not need the Java, it was a left over routine from an older version.
Thank you for you addition to this hack.. I truley believe this is the best auto-resize for vbulletin 3.5+

Now we need to add a Click here to enlarge text over the image!

I have tested and modified the code at the top.. any additions or modifications to make this better please let us know!

Otherwise enjoy!

Example is at http://www.gamereports.net/showthread.php?p=167#post167

[apfparadise]

Not resizing in Opera. IE looks great.

[joelabq]

Here's a modified version with "Click to enlarge image" text on top/bottom...Just a quick edit...

PHP Code:

/* Start Image RESIZE */  

         $navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : ''; 
           
        if (stristr($navigator_user_agent, "msie")) {
            $image_size_link = '
            <img src="' .  $link . '" border="0" alt="" style="width: expression(this.width > 640 ? 480 : true);" />';   
                } 
                else {   
            $image_size_link = '<img src="' .  $link . '" border="0" alt="" style="max-width: 730px;" />';
        }
            $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 */ 


[apfparadise]

This is weird, but my /includes/class_bbcode.php does not have this line at all, or even parts of it in any shape or form:

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

[Aaron RV]

Work but if I quote a message with the image the writing it appears "click to..." repeated.

[joelabq]

Originally Posted by apfparadise

This is weird, but my /includes/class_bbcode.php does not have this line at all, or even parts of it in any shape or form:

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

I had to take out some of the leading and trailing text to find it for some reason myself...

Try searching with the return ' part

I didn't try that quoting thing... I'm gonna go check that now.

Joel

[furst]

This looks pretty good and I'll most likely install it tomorrow.

..mind if I ask where you got a working link hider for 3.5.2?

[Link only for Registered Users. Please sign up and help us grow!]

[sensimilla]

Thats the best one from all I tried before! thanks