Check for valid linked image and resize if too large

[Locutus2999]

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:


$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:


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.

[Boofo]

What if we have "Allow Dynamic URL for [img] tags?" set to no? Can we use this for the regular image tags? And is there a way to do this for attached images, too?

[gmarik]

A great hack idea, the same questions as Bo.

[Boofo]

It's Boofo, not Bo.

[Locutus2999]

Yes this will work regardless if you have Dynamic URL's turned on or off.

As for attached images you can already specify a max width in vB options in the admin control panel.

[Boofo]

But that only works in the Admin CP if you have view images turned on. I have it turned off. I am using Slynderdale's Show Image attachments hack and I am looking for a way to do it with that. Any ideas? ;)

[yxboom]

After installing ALL image tags became <linked image unavailable>

[Locutus2999]

The getimagesize requires PHP 4.0.5.

Comment out ob_start() and ob_end_clean() and see if it is returning an error message.

[Boofo]

I am running PHP 4.3.1 and I am also getting the <linked image unavailable> error.

[Erwin]

Using getimagesize WILL increase server load as the image needs to be downloaded, then MySQL needs to check the image size, and resize it on the fly if it's too big, and then display it... just so you know.

[QiQme]

This doesn't work for me at all :(

If i change:

if ($img_size[0]> 400) {

to

if ($img_size[0]< 400) {

It works but that's the other way ;)

It just don't resize with if ($img_size[0]> 400) {

Any ideas ?

[Xxman]

This doesn't work for me at all :(

If i change:

if ($img_size[0]> 400) {

to

if ($img_size[0]< 400) {

It works but that's the other way ;)

It just don't resize with if ($img_size[0]> 400) {

Any ideas ?

The same problem...

[MaDCaT75]

good idea but doesnt work good....

[CVMagic]

Using getimagesize WILL increase server load as the image needs to be downloaded, then MySQL needs to check the image size, and resize it on the fly if it's too big, and then display it... just so you know.

I was actually thinking about making a hack like this with that exact method, what you should do is make postings.php and edit.php check for images, <img> and the bb tag form, 1st check if the image using any dynamic tags if it does then leave it be, then with the images that are not you make both scripts change the tags so something like "/postimage.php?postid=1234&imageid=2" then download them and resize them with gd or otherwise, you can look at my hack https://vborg.vbsupport.ru/showthread.php?t=59410 as an example how to, then you store both the original and the resized copy over to a new table that looks somewhat like the ones used for attachments, and reason being you'd want to store the original is to allow the admins if they want to disable this hack to have regular sized images put back in their place and also incase the image becomes a dead link in the future your board will still keep a copy of it, but also what you can do is just store the url of the original if you dont want to do that or both if you really want to give more options to admins. Oh and by the way on the posting data make sure that you somehow marker the dynamic images so later on when your doing the on the fly check for these your script wont also check the ones you created for the resized copies. Now as for editing, when a post is submitted you delete any and all entries that previously was there using something like "DELETE FROM imagestable WHERE postid='$post[id]'" That was on the posting side of the processing now for the showthread.php end, now Just check for the images with your special markers and force them with i dont know javascript or something I actually dont have the slightest clue on how to do checking and resizing on the fly that wont kill the performance aside from actually attaching the image a " NAME='postid1234imageid5' " and having an OnLoad="" javascript right in the image to resize it accourdingly. Well thats my idea on how to go about it, its not perfect but its a better method than going about it on the fly.

[Xxman]

Thanks a lot CVNMagic , but i'm not an expert coder .. I look for an hack that resize on-the-fly linked images not images as attachmate , anyone know that a hack working already exist ??

[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

[Xxman]

Sorry , but I'm not sure to have understood.

[MindTrix]

Not understood what mate?

[Xxman]

Not understood what mate?

How can I use the QiQme suggestion , and implementing it into some php script of Vbulletin ..

[QiQme]

Just look at the html file.

See the code used.

Paste <script type="text/javascript" src="http://www.yoursite.com/image.js"></script> in the header of your vbulletin site

Paste <SCRIPT language=javascript>check_images();</SCRIPT> in the footer of your vbulletin site

Upload the image.js to your server

and that's about it

[Xxman]

Cool ! I'll try it .
Thanks.

[Royal]

i saw this option on an other dutch forum (not vbulletin) isnt is posible to make the hack like this :

http://forum.fok.nl/showtopic.php/447356


so when u click on it that it opens in a popup with a clickable close on it :)

this is what QiQme is meaning

[Xxman]

Cool ! I'll try it .


Damn! It doesent work for me on Vbulletin..

I put this :<script type="text/javascript" src="http://www.mysite.com/portal/image.js"></script> into my vbulletin header template and this : <SCRIPT language=javascript>check_images();</SCRIPT> into my vbulletin footer template after uploaded image.js into www.mysite.com/portal folder..

Why not work ??

QiQme , what does it mean this piece of code?
if(!url.match(/vwforum.nl/) && !url.match(/athena.webmagix.net/)){

[Xxman]

..anybody ? :(

[Aaron1]

I am in the dark too XXman, i would love to see this hack work properly too.

The example over at: http://forum.fok.nl/showtopic.php/447356
Is exaclty how it should be done, although i really have no clue how they have done that, or how to incorporate it into vbulletin.

So if someone could help us out i would be eternally gratefull!

[QiQme]

Damn! It doesent work for me on Vbulletin..

I put this :<script type="text/javascript" src="http://www.mysite.com/portal/image.js"></script> into my vbulletin header template and this : <SCRIPT language=javascript>check_images();</SCRIPT> into my vbulletin footer template after uploaded image.js into www.mysite.com/portal folder..

Why not work ??

QiQme , what does it mean this piece of code?
if(!url.match(/vwforum.nl/) && !url.match(/athena.webmagix.net/)){

Just change vwforum.nl and athena.webmagix.net to yoursite.com

[QiQme]

In the attachement ( https://vborg.vbsupport.ru/showpost.php?p=454813&postcount=16 ) you can see that it works.

There's just nothing more to say about it i think.

[Aaron1]

Hey thanks!

That works perfect, well almost it does, the only problem i have now is that the pop-up has some white space above the enlarged image. Strange, although the pop-ups on the the example page: http://forum.fok.nl/showtopic.php/447356

Doesn't have that ugly whitespace. Any clues?

Hmm, i just checked and i think they used an image.php document, with unknown contents...

Also on your example zip file, the image in the pop-up is cropped somehow, it doesn't show the complete image... Argh :)

[Xxman]

Just change vwforum.nl and athena.webmagix.net to yoursite.com

I'm a fool ..

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

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

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]

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.