Forum Display Enhancements - Resize large [IMG] images and link them to original

This mod should resize [IMG] images wider than 'max_width' and link them to their original size. Not very well tested, i'm hoping for some feedback/suggestions. I have tested in firefox/IE latest versions and it seems to work fine. Should be a pretty quick install.

INSTALL:

1) Edit /includes/class_bbcode.php around line 1879 for me.

Look for:

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

Change to:

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

2) Add the following to the headinclude template.

<if condition="THIS_SCRIPT == 'showthread'">

<script type="text/javascript">

max_width = 700;

if(document.documentElement.outerHTML == null) {
   HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {
   var r = this.ownerDocument.createRange();
   r.setStartBefore(this);
   var df = r.createContextualFragment(sHTML);
   this.parentNode.replaceChild(df, this);
});
}

function resizeImages() {
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i];
      if(img.className == "img_tag") {
         if(img.width > max_width) {
            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a>';
            img.outerHTML = strNewHTML;
         }
      }
   }
}

if (window.addEventListener) {
  window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', resizeImages);
} else {
  window.onload = resizeImages;
} 

</script>

</if>

[principino1984]

Originally Posted by nsanden

I have changed it a couple times.

Just look for the: <style>#img_tag { display: none } </style> part and remove it from the headinclude template.

where do i found this code?

listen this is the fourth time i try to install this hack, i put the code in the class_bbcode.php, then the other code in the headinclude at the begin of it and the images won't work anymore... as soon as I get off the headinclude code everything restart working...

Marco

[nsanden]

Originally Posted by principino1984

where do i found this code?

listen this is the fourth time i try to install this hack, i put the code in the class_bbcode.php, then the other code in the headinclude at the begin of it and the images won't work anymore... as soon as I get off the headinclude code everything restart working...

Marco

Nobody is making you install the hack. Feel free to uninstall it and find something else to suit your needs. I'm just trying to help get it working for you and anyone else that wants to use it.

<style>#img_tag { display: none } </style> is part of the code you added to the headinclude template. Remove <style>#img_tag { display: none } </style> and it SHOULD fix it.

[nsanden]

Originally Posted by teedizz

well tha reason i ask is because I allow usres to have sigs 600x350 which doesnt break my design. on the other hand I have members who add pictures to threads which are like 1568x900 which does break my design. for instance, we have a thread named " post your desktop " & people are literally just taking screen shots & posting the whole thing. if this doesnt affect a sig thats 600x350 thats wrapped in [img] tags then i will install. thanks.

Change max_width = 700 to max_width = 600; and only images wider than 600 (thus not your signature images) will get resized down.

[principino1984]

Originally Posted by nsanden

Nobody is making you install the hack. Feel free to uninstall it and find something else to suit your needs. I'm just trying to help get it working for you and anyone else that wants to use it.

<style>#img_tag { display: none } </style> is part of the code you added to the headinclude template. Remove <style>#img_tag { display: none } </style> and it SHOULD fix it.

thanks for helpin me, and sorry if I seemed upset or what, i didn't want to , but for real I can't fine the tad you tell me to remove...

Marco

[Ricsca]

Finally a product that works me with my forum integrated in the portal...

Possible ? to make to see a notice when the image resize?

Thanks 1000

[Tralala]

Originally Posted by nsanden

Yeah doesn't suprise me. Sorry

So it doesn't work for any forum visitor using Firefox, Mozilla, Safari... instead of resizing, it makes ALL IMAGES DISAPPEAR.

"Sorry."

How about a browser-detect instead, where visitors using those browsers see the original?

[PersianImmortal]

This hack has promise, but is it possible to set both the maximum width and maximum height in the code - remembering that very 'tall' images can also be very annoying in making threads much longer than they have to be.

Also, I notice in Firefox 2 RC1 when you click on the image in the test link you provide, it goes to the enlarged image rather than either showing the image enlarged in the current thread, or opening the larger image in a popup.

[nsanden]

Originally Posted by Ricsca

Finally a product that works me with my forum integrated in the portal...

Possible ? to make to see a notice when the image resize?

Thanks 1000

Yep, look for:

var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a>';

in the hack, and simply add to the end of it like:

var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a><br />Image Resized Down';

[nsanden]

Originally Posted by Tralala

So it doesn't work for any forum visitor using Firefox, Mozilla, Safari... instead of resizing, it makes ALL IMAGES DISAPPEAR.

"Sorry."

How about a browser-detect instead, where visitors using those browsers see the original?

It works for Firefox and Internet Explorer on Windows. I haven't tried it for any other browsers or OS's. That individual was using Safari on Mac, so it didn't surprise me that it didn't work.

Also, it shouldn't make any images dissapear (anymore). It should either resize or NOT resize depending on whether the browser understands the javascript or not.

[nsanden]

Originally Posted by PersianImmortal

This hack has promise, but is it possible to set both the maximum width and maximum height in the code - remembering that very 'tall' images can also be very annoying in making threads much longer than they have to be.

Not possible currently. Could be done though.

Originally Posted by PersianImmortal

Also, I notice in Firefox 2 RC1 when you click on the image in the test link you provide, it goes to the enlarged image rather than either showing the image enlarged in the current thread, or opening the larger image in a popup.

That's true, it doesn't have a target="_blank" (which would make the image open in a new window) in the demo. This is because the demo is using a slightly older version of the hack. The current hack code has the target="_blank" in it and indeed would open the image in a new window.