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>

[Ricsca]

Originally Posted by nsanden

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';

Thanks

[PersianImmortal]

Originally Posted by nsanden

Not possible currently. Could be done though.

Actually it's fairly simple once I experimented with it (I shouldn't have been lazy in the first place ).

All you need to do is add a new variable at the top under max_width called max_height, and then add an else if statement to the resizeImages function so that it also checks maximum height and resizes. Seems to work without any problems on IE7 and Firefox, haven't tested it extensively yet.


The completed modified code to get this hack working with all the bells and whistles is this:

Edit /includes/class_bbcode.php as normal, that is changing:

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

to:

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

Then use the following code in headinclude instead:

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

<script type="text/javascript">

max_width = 500;
max_height = 400;

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.id == "img_tag") {
         if(img.width > max_width && ((max_width / img.width) * img.height) < max_height) {
            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
            img.outerHTML = strNewHTML;
         } else if(img.height > max_height && ((max_height / img.height) * img.width) < max_width) {
            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
            img.outerHTML = strNewHTML;
         } else if(img.height > max_height && img.width > max_width) {
            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" img width = "' +max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
            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>

(Note: code modified as per my post further below)

Here's some screenshots of how it looks and works on my forums:

Maximum width (set to 500 on my forums) enforced without affecting smaller images, note the neat notification under each image, so users won't be confused:


When the image is clicked it opens the full-sized image in a new window. Hovering the mouse over the image shows the 'Click to enlarge' alt text.

Maximum height (set to 400 on my forums) enforced again without any problems, and again with the notification:



Thanks for creating this code in the first place nsanden, and with some subtle modifications it seems to meet all my needs now, so I've clicked Install

[newbe_haselina]

Thanks for this hack ... *install* ... i like this one

I includes all the suggested changes, e.g. to resize also the hight of the images, but it doesn't seem to work correctly. I can't describe it, but what happens if the width AND the hight have to be resized? In my forum it seems that only one is resized .. .the hight OR the width? Some images are only resized in the width, not in the hight. Others are sized perfectly ...

Any idea?

Edit: To show what I tried to explain, please see this thread of my forum http://www.auftrab.de/Forum//showthread.php?t=336. In the first threadbox, the images are resized, in the second one they have the original size...

[PersianImmortal]

Actually after a moment's thought I realized that my max_height "fix" isn't really a true fix. All it does is check to see if a picture meets the maximum width first or the maximum height - one or the other, not both.

That is, if a picture is both wide and tall, it only resizes the width not the height because that's the first thing it checks. I'll test out some more code and post the full solution shortly.

/EDIT: OK, I believe I've solved this problem. I just included another else if statement and modified the first two statements to check more throughly. This should cover all situations and should keep the correct aspect ratio for resized images.

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

<script type="text/javascript">

max_width = 500;
max_height = 400;

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.id == "img_tag") {
         if(img.width > max_width && ((max_width / img.width) * img.height) < max_height) {
            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
            img.outerHTML = strNewHTML;
         } else if(img.height > max_height && ((max_height / img.height) * img.width) < max_width) {
            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
            img.outerHTML = strNewHTML;
         } else if(img.height > max_height && img.width > max_width) {
            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" img width = "' +max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
            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>

[newbe_haselina]

Thanks a lot for helping ... That's what I thought it would do ... but I'm very unexperienced in coding, so it was just a guess. Promise to wait patiently

[newbe_haselina]

Originally Posted by PersianImmortal

/EDIT: OK, I just included another else if statement and modified the first two statements. This should cover all situations. Note however that it can distort images which are both wide and tall - that is it will force an image which is both wider and taller than the maximums to be resized to be exactly the height and width of the maximums. This shouldn't be a huge problem, since people can click on the image to see the original in its proper shape. And usually most images are either too wide or too tall, not both.

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

<script type="text/javascript">

max_width = 500;
max_height = 400;

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.id == "img_tag") {
         if(img.width > max_width && img.height < max_height) {
            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
            img.outerHTML = strNewHTML;
         } else if(img.height > max_height && img.width < max_width) {
            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
            img.outerHTML = strNewHTML;
         } else if(img.height > max_height && img.width > max_width) {
            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" img width = "' +max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';
            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>

Thanks for your very fast help, I just included the code changes, but unfortunately it doesn't seem to have any impact on "my thread" ... the images which are to high haven't been resized ... I just changes the width from 500 to 400, all the rest is copied from your code ... :cross-eyed: ... I'm afraid I do something wrong ...

EDIT: It's funny ... in some other threads in my forum the images are resized in width AND hight, only in the thread I posted it doesn't seem to work ... ??

[PersianImmortal]

Try again, I just updated the code while you were testing it. Check my previous post. I missed some basic checks and I had to fix some things. Make sure to copy and paste the entire new code over your existing one in headinclude. It should work properly now.

[newbe_haselina]

Hmm, just overwrote it again ... but please have a look http://www.auftrab.de/Forum/showthread.php?t=336 ... in the first thread it's ok, in the second one nothing happend ...

but anyway ... thanks a lot for your help ...

[PersianImmortal]

Looks to be working fine for me - make sure to press CTRL+F5 on your browser to refresh all the code which is being displayed. Also which browser are you using? It works for me in Internet Explorer 7 and Firefox.

[newbe_haselina]

Thanks a lot, that may be the issue ... I'm in the office and there we have IE 6.0 ... :-) ... thanks for your help :-)