[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