Wide image automatic resize for html and vB tags in posts - fixes template problems

Having trouble with large images in [img] or <img src> tags in your posts causing your templates to go too wide causing a horizontal scroll bar for all posts? I have many users that attach large images to their posts either through vB img or html img src tags. In vB2 it wasn't that much of an issue because it only caused their post to go wide causing a horizontal scroll bar. In vB3 it causes all the posts on that thread to go to that width.

This hack uses the img src width="xx" tag to resize the picture to whatever max size you wish. It also adds a link to the full size image in it's original location and retains any extra formatting the user puts in the tag. In addition it checks to see if the picture actually exists and if not show "Image link is broken" where the picture would have been. Please click install if you install it and please give feedback so I can go full release with it if it's bug free.

Updated on 07/30/2004 - R0.9
Updated on 08/06/2004 - R1.0 - Identical to R.9, no need to upgrade just changing to full release from beta
Updated on 08/10/2004 - R1.1 - Added max_imgsize to the 2nd section of code (and removed global max_imgsize line from both), some users had problems with the code grabbing the max_imgsize from the first section - this fixes that.
Updated on 09/09/2004 - R1.2 - fixed problem with duplicating the resize notice when using wysiwyg editor

[mr.gamesbay]

I dont know if u know this problem.
if in a thread are some dead images in it, to open this thread i need more then 2 minutes!?
I remove your code, then all work fine.
Is there a fix for this problem?

[Steve St.Lauren]

ForYou - It looks like your problem is a bug in the version of PHP that your server is running. Try upgrading to a newer version of php if you have that option. If you do a search on yahoo on "Warning: getimagesize(): stream does not support seeking" you'll find a bunch of information on it.

mr.gamesbay - that is a problem with using getimagesize but I haven't found a better solution. If it's taking more than 2 minutes then you must have a LOT of pictures in that thread that are bad links. Timeouts should only happen if the server is unreachable - if the server is reachable and the files just aren't there that should go through fast. The timeout is set to 5 seconds to get a response from the remote server - if after 5 seconds there is no response then it moves on. So to have it taking 2 minutes you'd have to have ~20 pictures on that thread that are linked to a non-active server. There is some discussion at the beginning of this thread on how to do a resize using Javascript that solves this problem but that doesn't work if the pictures are loaded from the cache so IMO it isn't a good solution.

[mr.gamesbay]

Originally Posted by Steve St.Lauren

mr.gamesbay - that is a problem with using getimagesize but I haven't found a better solution. If it's taking more than 2 minutes then you must have a LOT of pictures in that thread that are bad links. Timeouts should only happen if the server is unreachable - if the server is reachable and the files just aren't there that should go through fast. The timeout is set to 5 seconds to get a response from the remote server - if after 5 seconds there is no response then it moves on. So to have it taking 2 minutes you'd have to have ~20 pictures on that thread that are linked to a non-active server. There is some discussion at the beginning of this thread on how to do a resize using Javascript that solves this problem but that doesn't work if the pictures are loaded from the cache so IMO it isn't a good solution.

There was only 3 or 4 dead Links in it, not more.
First i think, it was an error with my webspace or my vB, but after i removed the code, the threads opend normal.

The code from Auros i used too, is imo faster, but it have a small bug if i use the WYSIWYG-Editor and i dont know how to remove the bug.


PS: Sorry about my bad English

[dis.pater]

Originally Posted by Aurous

Well written code, but pages load really slow! Not good for a big site.

Heres what Ive done, which works on client-side:

PHP Code:

 
//replace (around line 1015) in includes/functions_bbcodeparse.php
 
 
return '<img src="' . $link . '" border="0" alt="" />';
 
 
//with
 
 
return '<img src="' . $link . '" border="0" alt="" OnLoad="if(this.width > 500) {this.width=500; this.style.cursor=\'hand\'; this.title=\'Click Here to open the image in a new window\';}" onClick="javascript:window.open(\'' . $link . '\',\'\',\'scrollbars=1,toolbar=0,resizable=1,menubar=0,directories=0,status=0\')" />'; 


Thats it. It works fine, but if the images load from your cache, this fails! If theres something that can be done to cached images, this code will work perfectly!

I use this:

/* 
LEAVE THIS NOTICE IN PLACE 
FI Image Resizing script - Daz - ForumImages.com 
For use and distribution terms please check; 
http://www.forumimages.com/terms.php 

Modifications by Politics.be
-- Onclick handler is automatically handled bij JavaScript now, compatible with IE and Mozilla
*/ 
var imgResizeMsg = 'Click to view the image';
var imgWidthMax = 600; 
var imgWidthSizeTo = 400; 
var imgClassName = 'imglimit'; 
//window.onload = fiImageResize; 

function fiImageResize() { 
if (document.images.length) { 
var docImg = document.images; 
   for ( var i = 0 ; i < docImg.length ; i++) 
      if (docImg[i].width > imgWidthMax && docImg[i].id != 'forumlogo') { 
         docImg[i].width = imgWidthSizeTo; 
         docImg[i].title = imgResizeMsg; 
         docImg[i].className = imgClassName; 
         docImg[i].onclick = fiImageWinOpen;
      } 
   } 
} 

function fiImageWinOpen(e) { 
	if( window.event )
	   window.open(window.event.srcElement.src,'PoliticsViewer','menubar=no, toolbar=no, location=no, directories=no, fullscreen=no, titlebar=yes, hotkeys=no, status=no, scrollbars=yes, resizable=yes'); 
	else
	   window.open(e.target.src,'PoliticsViewer','menubar=no, toolbar=no, location=no, directories=no, fullscreen=no, titlebar=yes, hotkeys=no, status=no, scrollbars=yes, resizable=yes'); 
}

This works with cached images too, plus it saves bandwidth if you have a lot of images since it will only be downloaded once if you put it in a separate file and "include" it with src="" in your script tag.
All you have to do is add fiImageResize() to the onLoad handler of your body tag and it will resize all your images.

If you have images that shouldn't be resized, you have to give them an id and them on the following line:

if (docImg[i].width > imgWidthMax && docImg[i].id != 'forumlogo')

As style for the resized images I use:

.imglimit {
        cursor: pointer;
        border: dotted 1px black;
}

It might be usefull to others who don't want to waste load by resizing userposted images.

[mr.gamesbay]

This sounds good, but i dont realy know how to use ist.

This part i must put in the CSS of the Style?! Right?

.imglimit {
        cursor: pointer;
        border: dotted 1px black;
}

But where i have to put this part?

/* 
LEAVE THIS NOTICE IN PLACE 
FI Image Resizing script - Daz - ForumImages.com 
For use and distribution terms please check; 
http://www.forumimages.com/terms.php 

Modifications by Politics.be
-- Onclick handler is automatically handled bij JavaScript now, compatible with IE and Mozilla
*/ 
var imgResizeMsg = 'Click to view the image';
var imgWidthMax = 600; 
var imgWidthSizeTo = 400; 
var imgClassName = 'imglimit'; 
//window.onload = fiImageResize; 

function fiImageResize() { 
if (document.images.length) { 
var docImg = document.images; 
   for ( var i = 0 ; i < docImg.length ; i++) 
      if (docImg[i].width > imgWidthMax && docImg[i].id != 'forumlogo') { 
         docImg[i].width = imgWidthSizeTo; 
         docImg[i].title = imgResizeMsg; 
         docImg[i].className = imgClassName; 
         docImg[i].onclick = fiImageWinOpen;
      } 
   } 
} 

function fiImageWinOpen(e) { 
	if( window.event )
	   window.open(window.event.srcElement.src,'PoliticsViewer','menubar=no, toolbar=no, location=no, directories=no, fullscreen=no, titlebar=yes, hotkeys=no, status=no, scrollbars=yes, resizable=yes'); 
	else
	   window.open(e.target.src,'PoliticsViewer','menubar=no, toolbar=no, location=no, directories=no, fullscreen=no, titlebar=yes, hotkeys=no, status=no, scrollbars=yes, resizable=yes'); 
}

[dis.pater]

Originally Posted by mr.gamesbay

This sounds good, but i dont realy know how to use ist.

This part i must put in the CSS of the Style?! Right?

.imglimit {
        cursor: pointer;
        border: dotted 1px black;
}

Correct

But where i have to put this part?

I placed it in a separate javascript file which I called resizeall.js and uploaded it to the clientscript directory of vB.
All you should do then is add this line at the bottom of headinclude (you find it under common templates in the template manager).

<script type="text/javascript" src="clientscript/resizeall.js"></script>

At last you should change the onload in the body tag of the showthread template.
On my board, with vB3.3 the body tag now looks like this

<body onload="$onload; fiImageResize()">

[mr.gamesbay]

Thanks dis.pater!
Works PERFECT!

[mr.gamesbay]

Originally Posted by dis.pater

If you have images that shouldn't be resized, you have to give them an id and them on the following line:

if (docImg[i].width > imgWidthMax && docImg[i].id != 'forumlogo')

Can u me better explain this part ?
I have a pic. names (back_hi.gif) that shouldn't be resized.

[dis.pater]

Originally Posted by mr.gamesbay

Can u me better explain this part ?
I have a pic. names (back_hi.gif) that shouldn't be resized.

First you should add an id to your img tag.
Suppose you have this in your template:

<img src="back_hi.gif" />

This you should change into (the nr1 could be anything offcourse)

<img src="back_hi.gif" id="nr1" />

Then you should change this line below (which is in the javascript file)

if (docImg[i].width > imgWidthMax && docImg[i].id != 'forumlogo')

into (nr1 or whatever id you have choosen

if (docImg[i].width > imgWidthMax && docImg[i].id != 'nr1')

If you have more than one image you don't want to resize all you got to do is change the line above by adding && docImg[i].id != 'the_image_id' after [i]docImg.id != 'nr1'

edit:
Seems like vB is parsing vB tags inside the code tag :ermm:

[johnnyb]

PHP Code:

Warning: getimagesize([url]http://files.photojerk.com/matthieu/b1.jpg[/url]): could not make seekable - [url]http://files.photojerk.com/matthieu/b1.jpg[/url] in /home/XXX/public_html/forums/includes/functions_bbcodeparse.php on line 1134 


The whole page shows error such as this?

vBulletin Message is this:

PHP Code:

Unable to add cookies, header already sent.
File: /home/blazini/public_html/forums/includes/functions_bbcodeparse.php
Line: 1134