Check for valid linked image and resize if too large

I hate it when users link to images that are really large and cause the layout of the site to become all distorted. It's also annoying to see the image placeholder and the red "X" whenever the site hosting an image is unavailable.

This check will check the width of a linked image and if it's wider than the size you would like to allow, it will add a width attribute to the <img> tag so it will be resized. If the image is not available on the linked site, then it will display a message saying the linked image is currenty unavailable.

It only requires an edit to admin/functions.php.

Open functions.php and find the following line:

PHP Code:

$bbcode = preg_replace("/\[img\](\r\n|\r|\n)*((http|https):\/\/([^;<>\(\)\"".iif($allowdynimg,"","!\*\?\&")."]+)|[a-z0-9\/\\\._\- ]+)\[\/img\]/siU", "<img src=\"\\2\" border=\"0\" alt=\"\">", $bbcode); 


REPLACE it with the following code:

PHP Code:

      if (strstr($bbcode, "[img]")) {
          ob_start();
          $img_url=preg_replace("/\[img\](\r\n|\r|\n)*((http|https):\/\/([^;<>\(\)\"".iif($allowdynimg,"","!\*\?\&")."]+)|[a-z0-9\/\\\._\- ]+)\[\/img\]/siU", "\\2", $bbcode);
          $img_url=trim(ereg_replace('<[^>]*>', '', $img_url));

          $img_size = getimagesize($img_url,$info);
          if ($img_size==false) $dont_display=true;
          ob_end_clean();
      }
      if ($img_size[0]> 400) {
          $bbcode = preg_replace("/\[img\](\r\n|\r|\n)*((http|https):\/\/([^;<>\(\)\"".iif($allowdynimg,"","!\*\?\&")."]+)|[a-z0-9\/\\\._\- ]+)\[\/img\]/siU", "<img src=\"\\2\" border=\"0\" width=\"400\" alt=\"\">", $bbcode);
      } else {
          $bbcode = preg_replace("/\[img\](\r\n|\r|\n)*((http|https):\/\/([^;<>\(\)\"".iif($allowdynimg,"","!\*\?\&")."]+)|[a-z0-9\/\\\._\- ]+)\[\/img\]/siU", "<img src=\"\\2\" border=\"0\" alt=\"\">", $bbcode);
      }
      if ($dont_display==true) $bbcode="<br><i>".htmlentities("<linked image unavailable>")."</i>";
    } 


Replace $img_size[0]> 400 & width=\"400\" with the your max width and that's it.

[Aaron1]

I was just thinking, if you can automatically add this onload function below in the IMG tag, the resizing of the imageswill crossbrowser friendly.

<img src="http://www.vbulletin.org/layout/header.gif" OnLoad='if(this.width > 580 || this.height > 435) if((this.width / this.height) > (580/435)) {this.width=580} else {this.height=435}'>

Where 580 is the maximum width the picture will appear, the only thing it lacks is the link to the pop-up with the original picture..

Can somebody try to get this working properly pehaps? I am not a script wizard

[Royal]

yea im also looking for the fix

i tried it myself but i cant seem to find it

[aakk]

works great! thanks!!!

[94supratt]

Originally Posted by QiQme

Hi,

I use the following file as the solution.

I'm sure someone here can make this better but it's a start.

In the zip file is a image.js and a html file as an example.

Greetz

Works awesome!

[94supratt]

Originally Posted by TheLab

QiQme thats a great idea and it works great on IE, but not on Netscape/Opera/Mozilla. Is there any code fix for this?

Any fix? Works fine in IE but not Mozilla.