Big Picture messing up your design? Install this

[Dimitrix]

What does this hack do?
This hack will check if an image that a member of your forums has inserted in the post is below the allowable width. If not, the image will be replaced with a small button that basicly says "Image too big, click here to view". When clicked, the image will appear right in the post but without messing up your forum design one bit.

Example?
Working example can be found here:
http://www.designworldwide.com/forum/t35-s.html (note: This is on VB2 but should have the same effect. If you installed it on Vb3, send me a link so I can post it here)
VB2 thread if anyone wants it:
https://vborg.vbsupport.ru/showthread.php?t=63429

Please post any bugs/comments/questions here.
While making this hack I had some trouble with reg. expressions and had to go around them a little (php developers can see this). Ive been coding for years now but never had the need to learn those :p

Image:
https://vborg.vbsupport.ru/showthread.php?p=495725#post495725
(Image now included in ZIP)

Anyways,
Enjoy!
Dimitry

[Vivi Ornitier]

u got a pic we can use?

[Dimitrix]

Completely slipped my mind
Here's one I made quickly

Dimitry

[xware]

if there have many images in on post the getimagesize function maybe slowly.

[tnguy3n]

interesting, but does it work for images that link from other servers?

[gmarik]

a nice mode you have

[NuclioN]

object js error :( (object required: line 722 - character 2 in showthread.php)

It is displaying the image but with that error

[colicab-d]

oooh now this is handy :D thnx a lot this is gonna save a few headaches with clients :D

[mikeee]

I tried this on VB3, nothing changed. Doesnt display the image too big button, doesnt give errors. Strange.

[tomp]

very very nice mod

[Boofo]

Is there a way to have the button say "Close this image" (or something like that) after clicking it to open it? I had to play with it to figure out I had to hit the same button to close the image. ;)

[Dimitrix]

I dont have VB3 myself (Have Vb2 installed on my server), so I cant test the hack. It was made blindfolded (after testing with Vb2 of course).

If anyone whos having trouble is willing to give me access to their server, Ill be willing to figure it out and fix the hack.

Sorry, not much time this morning, Ill reply to all posts in a few hours
Dimitry

[Aceman]

Installed at: www.scifi-meshes.com and working fine.

It turns on a layer with the image when you click on the button. I'm concerned that this will work in all browsers.. but it looks fine in IE for me.

Aceman

[Aceman]

I've found that for images that are say 1024x768 the icon shows up fine. But for some reason I have to reload the page sometimes to get it to work and show the layer with the image when you click on it. Additionally, some images only showed part of the images, it's like it would only show upto the hieght of the post. I think this pertained to threads that were posted before I put in the hack. But new threads seemed to show all the image. It's like it didn't know how tall the image was. (pulled this hack from server pending a revision.. but I really would like to use it.)

Is it possible to modify the code so that it just pops up another window completely with just the image, rather then show it in a hidden layer?

Aceman

[Dimitrix]

Installed at: www.scifi-meshes.com and working fine.

It turns on a layer with the image when you click on the button. I'm concerned that this will work in all browsers.. but it looks fine in IE for me.

Aceman

Yes, I always work in Mozilla, so it'll work in it for sure (FireFox). In IE I noticed that the layer comes up but <select> form objects appear on top of the image. After doing further reading this is an IE bug that has been an issue since IE 4 (Thanks Microsoft). There are ways to go around it but would require some template edits.

Yes, it's really easy to make it open in a new window. I will add 2 revisions of the hack later today. One will be so you can use text instead of an image. And 2nd, to open in a new window.

Thanks for the ideas
Dimitry

[NuclioN]

Any solution for the javascript error? :)

[Dimitrix]

Any solution for the javascript error? :)

Can you post a link so I can view JS?
Dimitry

[mtha]

very nice mod.
I would still display the image with the limitation of width=$img_max_width

$inp_string = "<a href=\"#\" onclick=\"window.open('".$link."','OgiginalImage','statusbar=no,menubar=no,toolbar =no,scrollbars=yes,resizable=yes,width=".$img_width[0].",height=".$img_width[1]."'); return false;\"><img src=\"".$link."\" alt=\"Original Image is too big\" border=\"0\" width=\"".$img_max_width."\"/></a><br />\n";
return $inp_string;

[vau7]

It runs perfectly ( No Problems in Opera with the js )

THANK YOU!

[Dimitrix]

Nice,
Glad to hear that.

I really dont see a reason why JS would give problems. Its very basic code (1 line).
Can you post a link? :)
Dimitry

[wolfgang2]

a very nice idea.
Heard from it in the german vB-Forums and tried it.
But , unfortunately the hack did not work quite properly.
Esp. in Mozilla and Netscape the window with the picture did not open itself.
Also it is not working with IE5, only with IE 6.

The 2nd problem:
If there is a thread with many pictures u can not klick one of the samll replacements pics at once.
u have to wait until all pictures in the thread are loaded.
If u klick to early no picture will load properly anymore and the pics will open for example 1/ 3rd of its size.

But when these problems are dealed with then i might insatll again because its a good idea.
THX

[Dimitrix]

There was a problem with Javascript. Not the actual JS, but the code executed an extra command that is NOT needed (This is a personal mod I did on my forum and forgot to undo changes)

Fix is attached (Tried just putting it in the reply but VB was replacing my code for some reason)

Dimitry

[NuclioN]

Tnx for the fix, works great now. :)

[vau7]

Another Problem:

Sometimes i get this Error:

Warning: getimagesize(http://www.ccc.de/campaigns/music/COPY_banner.jpg): failed to open stream: Connection refused in /home/www/web75/html/board3/includes/functions_bbcodeparse.php on line 1020

The Hack is 100% correct installed but sometimes it doesnt work and the whole Thread isnt reachable because of this error.

And if a whole Thread isnt reachable this Hack is not so good at all. Without this Error it is an absolut galant and beautiful way to solve this Problem. But can you fix this error?
That would be great!

[Dimitrix]

This is the error I seemed to be getting a LOT lately on my server after it took about 2 mins of loading time.
The problem seems to be with that function retrieving the image at times. This is not the code's fault. It's either server's, GD library's, or PHP, I have yet to figure it out.

Ill post here as soon as I get more info on this. On my forum I had to completely disable the hack which sux because I made it :p
Dimitry

[vau7]

Yes, i know that the fault isnt in the code. But there must be a way to handle it. :ermm:

[Dimitrix]

I figured everything out.
Had to restart some processes on my server to get it working so it wasnt the hacks fault.

Ive added a security check that checks if the file actually exists or not. And also added a Slowdown function, which will wait 1500 miliseconds before checking each minute. This helps the previous check to be finished and server doesnt get overloaded with constant outgoing connections piled up one on one (if you have a bunch [img] in thread). This barely slows down the load of the thread, 1500 miliseconds is nothing really, but enough (or SHOULD be enough) for server to complete previous task).

I will post the upgrade and update the hack later today when I get home :)
Dimitry

[edit]
Here's what broken images look like :) Replaced with text:
http://www.designworldwide.com/forum/showthread.php?s=&postid=172#post172

[vau7]

I will post the upgrade and update the hack later today when I get home :)
Dimitry


THANKS!

Thats awesome!

[vau7]

Something new bout the security check update?

[Raimund]

to check if the file/image exists, replace the following in functions_bbcodeparse.php

// ###################### Start handle_bbcode_img_match #######################
// this is only called by handle_bbcode_img
function handle_bbcode_img_match($link)
{
// IMPORTANT - REPLACE THE FOLLOWING 2 VARIALBS WITH YOUR INFORMATION
$img_replacement = "images/buttons/imagebig.gif"; // <-- This is the button/image that will be displayed instead of the big image.
$img_max_width = 640; // <-- This is the maximum width that an image is allowed to be viewed safely.

$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);

$img_width = getimagesize($link);
if ($img_width[0] > $img_max_width) {
srand((double)microtime()*1000000);
$number = rand(10,100);

$inp_string = "<a href=\"javascript:toggle_imgview('bigimg".$number."')\"><img src=\"".$img_replacement."\" alt=\"\" border=\"0\" /></a><br />\n";
$inp_string .= "<div style=\"position:absolute;display:none;z-index:1;\" id=\"bigimg".$number."\"><img src=\"".$link."\" border=\"0\" alt=\"\" /></div>";

return $inp_string;

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

with

// ###################### Start handle_bbcode_img_match #######################
// this is only called by handle_bbcode_img
function handle_bbcode_img_match($link)
{
// IMPORTANT - REPLACE THE FOLLOWING 3 VARIALBS WITH YOUR INFORMATION
$img_replacement = "images/buttons/imagebig.gif"; // <-- This is the button/image that will be displayed instead of the big image.
$img_replacement2 = "images/buttons/imagenotexist.gif"; // <-- This is the button/image that will be displayed if file does not exist.
$img_max_width = 640; // <-- This is the maximum width that an image is allowed to be viewed safely.

$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);
$image= ($link);

if (@fclose(@fopen("$image", "r"))) {
$img_width = getimagesize($link);
if ($img_width[0] > $img_max_width) {
srand((double)microtime()*1000000);
$number = rand(10,100);

$inp_string = "<a href=\"javascript:toggle_imgview('bigimg".$number."')\"><img src=\"".$img_replacement."\" alt=\"\" border=\"0\" /></a><br />\n";
$inp_string .= "<div style=\"position:absolute;display:none;z-index:1;\" id=\"bigimg".$number."\"><img src=\"".$link."\" border=\"0\" alt=\"\" /></div>";

return $inp_string;

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

Raimund

[vau7]

Thanks, i think it works!

[mikeee]

Can anyone tell me why this doesnt work on my board? The install is quite simple, I double checked everything and it is installed correctly on my VB3

I am not getting any java error, no board error, it's as if I never modified anything. Any ideas? :ermm:

[mtha]

to check if the file/image exists, replace the following in functions_bbcodeparse.php

...
$image= ($link);

if (@fclose(@fopen("$image", "r"))) {
$img_width = getimagesize($link);
...
}

Raimund:) this is nice, but I run into another problem. My member sometime post WRONG images, they post html links as image something like http://w.w.w/a.html
which would give errors:
"Unable to add cookies, header already sent..."
and
"Warning: getimagesize(): stream does not support seeking ..."

how should I check if the link IS image (based on image extension?), before checking if it exist?

should I use
$ext = strrchr($image, ".");
or use
exif_imagetype("$image")
or something else?

[alkahf]

Hello
to check if the file/image exists, replace the following in functions_bbcodeparse.php
with

// ###################### Start handle_bbcode_img_match #######################
// this is only called by handle_bbcode_img
function handle_bbcode_img_match($link)
{
// IMPORTANT - REPLACE THE FOLLOWING 3 VARIALBS WITH YOUR INFORMATION
$img_replacement = "images/buttons/imagebig.gif"; // <-- This is the button/image that will be displayed instead of the big image.
$img_replacement2 = "images/buttons/imagenotexist.gif"; // <-- This is the button/image that will be displayed if file does not exist.
$img_max_width = 640; // <-- This is the maximum width that an image is allowed to be viewed safely.

$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);
$image= ($link);

if (@fclose(@fopen("$image", "r"))) {
$img_width = getimagesize($link);
if ($img_width[0] > $img_max_width) {
srand((double)microtime()*1000000);
$number = rand(10,100);

$inp_string = "<a href=\"javascript:toggle_imgview('bigimg".$number."')\"><img src=\"".$img_replacement."\" alt=\"\" border=\"0\" /></a><br />\n";
$inp_string .= "<div style=\"position:absolute;display:none;z-index:1;\" id=\"bigimg".$number."\"><img src=\"".$link."\" border=\"0\" alt=\"\" /></div>";

return $inp_string;

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

Raimund


What about these errors?

Warning: getimagesize(): stream does not support seeking in /home/client/public_html/vb/includes/functions_bbcodeparse.php on line 1023

Warning: getimagesize(): stream does not support seeking in /home/client/public_html/vb/includes/functions_bbcodeparse.php on line 1023

Warning: getimagesize(): stream does not support seeking in /home/client/public_html/vb/includes/functions_bbcodeparse.php on line 1023

Warning: getimagesize(): stream does not support seeking in /home/client/public_html/vb/includes/functions_bbcodeparse.php on line 1023

Thank you
alkahf

[WEForums]

Installed this and got errors galore. I'm guessing it has to do with my server, though.

What is required?

(I'd post the errors but there were so many that I had to fix it immediately. I'll post them later if you're interested)

[marcjd]

It would be nice to have a feature like this for signatures. I want to allow the use of the image tag in sigs., but would also like to control the size of the displayed image. Thanks.

[Sir_Yaro]

to check if the file/image exists, replace the following in functions_bbcodeparse.php

// ###################### Start handle_bbcode_img_match #######################
// this is only called by handle_bbcode_img
function handle_bbcode_img_match($link)
{
// IMPORTANT - REPLACE THE FOLLOWING 3 VARIALBS WITH YOUR INFORMATION
$img_replacement = "images/buttons/imagebig.gif"; // <-- This is the button/image that will be displayed instead of the big image.
$img_replacement2 = "images/buttons/imagenotexist.gif"; // <-- This is the button/image that will be displayed if file does not exist.
$img_max_width = 640; // <-- This is the maximum width that an image is allowed to be viewed safely.

$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);
$image= ($link);

if (@fclose(@fopen("$image", "r"))) {
$img_width = getimagesize($link);
if ($img_width[0] > $img_max_width) {
srand((double)microtime()*1000000);
$number = rand(10,100);

$inp_string = "<a href=\"javascript:toggle_imgview('bigimg".$number."')\"><img src=\"".$img_replacement."\" alt=\"\" border=\"0\" /></a><br />\n";
$inp_string .= "<div style=\"position:absolute;display:none;z-index:1;\" id=\"bigimg".$number."\"><img src=\"".$link."\" border=\"0\" alt=\"\" /></div>";

return $inp_string;

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

Raimund

after this modyfication i can see right pictures but after clicking on them nothing is happening

[NuclioN]

It shows the image correct but text under the image is underlined a behaves as a link. (??)

[Sir_Yaro]

<a href="http://justget.org/showpost.php?p=102313&postcount=18" target="_blank">http://justget.org/showpost.php?p=102313&postcount=18</a>

[jugo]

interesting, but does it work for images that link from other servers?


YES.....BUT READ THIS:

If the image is not found on the remote host wether it be that the image was deleted or the host no longer responds, 2 things happen:

1. The thread takes forever to load.
2. It errors out and it does not display the thread.

I tried to get the correct error in here but while trying to get the error to display I lost my patience and put my mouse through my monitor.

I just got back from CompUSA (sale on 19inch monitors by the way...good deals)....and I was not going to risk losing it again.

P.S. the mouse survived.

[Taco John]

Clicking uninstall... This thing works to a degree, but too many bugs and it really slows down the thread loading for some reason.

Thanks anyway.

[Raptor]

works great for me thanks

however the drop down box seem to appear over the image after its been expanded - weird ?

[DB8 MissingLink]

Yeah, bit too buggy. I'm clicking uninstall. But it's a great idea...

[Hotte@gun]

Another way to check if the file linked exists ins another function (i think you can use it in other linking, too)


//this function checks a link at 404 error
function is_404($url) {
$a = parse_url($url);
$sock = fsockopen($a['host'], empty($a['port']) ? 80 : $a['port']);
if(!$sock) {
return true;
} else {
preg_match("'\w+://[^/]+(.*)'", $url, $matches);
fputs($sock, 'HEAD ' . $matches[1] . " HTTP/1.0\r\nHost: " . $a['host'] . "\r\n\r\n");
preg_match("'(\w+)/([^ ]+) (\d+) (.*)'", $data = fread($sock, 4096), $matches);
fclose($sock);
if($matches[3] == '404') {
return true;
} else {
return false;
}
}
}


Then i modified the handle_bbcode_img_match


// this is only called by handle_bbcode_img
function handle_bbcode_img_match($link)
{
// IMPORTANT - REPLACE THE FOLLOWING 2 VARIALBS WITH YOUR INFORMATION
$img_replacement = "images/misc/button_imagebig.gif"; // This is the button/image that will be displayed instead of the big image.
$img_max_width = 600; // This is the maximum width that an image is allowed to be viewed safely.

$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);

if('!is_404') {
$img_width = @getimagesize($link);
if ($img_width[0] > $img_max_width) {
srand((double)microtime()*1000000);
$number = rand(10,100);

$inp_string = "<a href=\"javascript:toggle_imgview('bigimg".$number."')\"><img src=\"".$img_replacement."\" alt=\"\" border=\"0\" /></a><br />\n";
$inp_string .= "<div style=\"position:absolute;display:none;z-index:1;\" id=\"bigimg".$number."\"><img src=\"".$link."\" border=\"0\" alt=\"\" /></div>";

return $inp_string;

} else {
return '<img src="' . $link . '" border="0" alt="" />';
}
} else {
return '<img src="/cg/images/misc/404.gif" width="150" height="50" border="0" alt="Bitte editieren Sie diesen Link" />';
}
}


So i am able to send a special Image as notification that the Links isnt correct.

I will attach the GERMAN images at this post. Just put the to you /forum/images/misc/ folder (or whatever place you specified)

[Gutspiller]

Kinda a lame hack IMO. It should check the users resolution before deciding to shrink the image or not. Basically this hack doesnt make sense for anybody that has a liquid layout and the width of your forum depends solely on the users resolution. :(

[sunny001]

Hi,

I just installed it, but vB 3.5.4 looks a little bit different.
I had to change the code in includes/class_bbcode.php.
The exact code that has to be replaced it there, but when trying to add a new thread I'm forwarded to an empty page.

Any idea about it'll work with vB 3.5.4?

Sven

[sv1cec]

Dimitrix, I am using this hack and even though it works as it should (I have modified it to suite my needs), I am still occasionally running in the need for a delay. It happens only when there are too many missing pictures in a post.

Could you please let me know on how you implemented the delay you mentioned here:

https://vborg.vbsupport.ru/showpost.php?p=501551&postcount=27

[snake-boy]

A friend of mine sent me this code that invision users can use to resize images inline (images hosted elsewhere obviously).

Is there ANY way we can get this to work as a custom bb code for vbulletin?

I don't understand the code, but I'm sure someone with more coding skills can figure it out.

Here's the code:

<!--=== *** START RESIZED IMG *** ===-->

<script>
tds=document.getElementsByTagName("td");
for (p=0; p<tds.length; p++) {
if (tds[p].className.match(/post[0-4]/i)!=null) {
tds[p].innerHTML=tds[p].innerHTML.replace(/\[img=([0-9]+?(?x|%)?),([0-9]+?(?x|%)?)\](.*?)\[\/img\]/ig,"<img src='$3' width='$1' height='$2' style='display:inline'>");
}
}
</script>

<!--=== *** END RESIZED IMG *** ===-->

-snake

[sv1cec]

I am running vB 3.0.14, so I know this works in that version, I am not sure how 3.5 or 3.6 differ from the older versions, but here is a simpler method to handle this issue.

In your functions_bbcodeparse.php file, find this:

function handle_bbcode_img_match($link)

Replace the contents of that function with this:


function handle_bbcode_img_match($link)
{
$img_max_width = 800; // <-- This is the maximum width that an image is allowed to be viewed safely.
$img_max_height = 600; // <-- This is the maximum height that an image is allowed to be viewed safely.

$link = strip_smilies(str_replace('\\"', '"', $link));

// remove double spaces -- fixes issues with wordwrap
$link = str_replace(' ', '', $link);


if ($imginfo=@getimagesize($link))
{
if (($imginfo[0] > $imginfo[1] and ($imginfo[0] > $img_max_width or $imginfo[1] > $img_max_height)) or ($imginfo[0] < $imginfo[1] and ($imginfo[1] > $img_max_width or $imginfo[0] > $img_max_height)) or ($imginfo[0] == $imginfo[1] and ($imginfo[0] * $imginfo[1] > $img_max_width * $img_max_height)))
{
$inp_string="<a href=\"$link\" target=\"_blank\"><img src=\"images/misc/toobigimage.gif\" border=\"0\" alt=\"\"></A>";
return $inp_string;
}
else
{
return '<img src="' . $link . '" border="0" alt="" />';
}
}
else
{
if (!$allowimgsizefailure)
{
$inp_string="<img src='images/misc/notexistimage.gif'>";
return $inp_string;
}
}
}


You may alter the $img_max_width and $img_max_height, to suit your needs. The script will take care of images which are greater than the specified limit, either in portrait or landscape mode. In other words and for the example shown in the code, it will replace images which are larger than 800x600 or 600x800, depending on which dimension is larger (width or height).

You need to create two small images, as shown here:

https://vborg.vbsupport.ru/external/2006/11/2.gif

and

https://vborg.vbsupport.ru/external/2006/11/3.gif

Put these images in your images/misc directory and you are done.

[sv1cec]

Well after we run the above for a while, the delay it imposes on a page full of images make it undesirable.

I came up with a hack to check the images size during the posting of a message. If one image is larger than the specified file, then the message is not posted and an error is shown. If someone is interested, I can post it as a new hack, but since this is for vB 3.0.xx I am not sure if there is any interest.