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.

[Aaron RV]

ok for vb 3.6?

[Traxdata]

Yes. Works fine with vb 3.6.

[GNDI]

Originally Posted by SiMateoAko

NEW METHOD:

I can't believe I didn't think of this before.

Some of you may have editted your class_bbcode.php ( as per my instructions before ) to have it work correctly. I'd now recommend you don't do that and just add a few lines to your CSS file instead.

Add the following to your CSS:

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

Obviously change your values appropriately.

The benefits of doing it this way are hopefully obvious. No code changes are required, so upgrading won't be an issue.

IE is the real problem here b/c they are not totally CSS2 compliant. I believe it's been fixed with IE7, but the second statement (width: expression..) is just for people using old browsers.

by doing it this way you loose the link to the ral fullsize image

[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.

[PersianImmortal]

Very useful, neutralizer thanks - this is by far the easiest way to do this.

I personally set both max width and max height in the CSS definition, as extremely 'tall' images can be annoying too, i.e. I use this CSS code:

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

This is on a VB 3.6.0 forum. The one thing I would like though is a way of making this resized image clickable so you can view the larger image with a click - anyone know how to easily add this function via CSS (even if it has to call a function in headinclude)?

/EDIT: Nevermind, I wound up modifying and using the code here and it works a treat for me

[smsmasters]

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.

Excellent!

[manutdvn]

Originally Posted by 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?

Thank you. It works great with IE 7.0 and Firefox. Click install. I am current with VBB 3.5.4

[RFViet]

I'm confused !! which code is used for vB3.5.5 ??

[smsmasters]

This works great but how do I stop the images in signatures from being resized too?

Thanks

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.

[Aaron RV]

in vb 3.6.3 not work.
when I can change the code?

thank's.