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>

[GoNz00]

works fine for me bud.

[egelforum]

I don't understand why it doesen't work then.

I have changed the line in class_bbcode.php, and put the script at the top of the headinclude template, but absolutely nothing happens... Any ideas?

[GoNz00]

i put the script at the bottom, wonder if that will make it work, dont think it matters tho' ?

[egelforum]

I already tried in the bottom, nothing happens. It's strange because it is a simple script...
I suspect that the problem lies within the class_bbcode.php
I will upload a clean version of the file and see if it works.

Edit: nopes

[GoNz00]

heres mine, give it a try ?

i removed my licence number copy yours over

[egelforum]

Appreciate that. It didn't worked neither =(
It really puzzles me...
We need this or a similar addon very badly because of the thin layout of our forums... A big image simply destroys the design in a thread...

Edit: Can you post here exactly the code you put in the headerinclude?
They were so many changes all along the thread that maybe i have a broken one (?)

[GoNz00]

<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.id == "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><br />Image resized, click for original';
            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>

after the
</if>
</if> that was already there..

this is the entire page with mod for you to compare

<meta http-equiv="Content-Type" content="text/html; charset=$stylevar[charset]" />
<meta name="generator" content="vBulletin $vboptions[templateversion]" />
<if condition="$show['threadinfo']">
<meta name="keywords" content="$threadinfo[title], $vboptions[keywords]" />
<meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$threadinfo[title] $foruminfo[title_clean]" />
<else />
	<if condition="$show['foruminfo']">
<meta name="keywords" content="$foruminfo[title_clean], $vboptions[keywords]" />
<meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$foruminfo[description_clean]" />
	<else />
<meta name="keywords" content="$vboptions[keywords]" />
<meta name="description" content="$vboptions[description]" />
	</if>
</if>

<!-- CSS Stylesheet -->
$style[css]
<if condition="is_browser('opera') AND !is_browser('opera', '8.0.1')">
<style type="text/css">
ul, ol { padding-left:20px; }
</style>
</if>
<!-- / CSS Stylesheet -->

<script type="text/javascript">
<!--
var SESSIONURL = "$session[sessionurl_js]";
var IMGDIR_MISC = "$stylevar[imgdir_misc]";
var vb_disable_ajax = parseInt("$vboptions[disable_ajax]", 10);
// -->
</script>

<script type="text/javascript" src="clientscript/vbulletin_global.js?v=$vboptions[simpleversion]"></script>
<if condition="$show['popups']"><script type="text/javascript" src="clientscript/vbulletin_menu.js?v=$vboptions[simpleversion]"></script></if>
<if condition="$vboptions['externalrss']">
<link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] RSS Feed" href="external.php?type=RSS2" />
<if condition="$show['foruminfo'] OR $show['threadinfo']">
<link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] - $foruminfo[title_clean] - RSS Feed" href="external.php?type=RSS2&amp;forumids=$foruminfo[forumid]" />
</if>
</if>
<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.id == "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><br />Image resized, click for original';
            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>

all i can think is to revert headinclude and try again ?

[egelforum]

It doesn't work even trying with your very same class_bbcode.php and headinclude template... I's very strange.
Not even with the default vB style!
Thank you for your patience.

[GoNz00]

maybe its time to try the other version thats out there, the one with javascript you need to upload ?

i dropped it in place of this. but it worked fine.

[nsanden]

Originally Posted by egelforum

It doesn't work even trying with your very same class_bbcode.php and headinclude template... I's very strange.
Not even with the default vB style!
Thank you for your patience.

How are you testing to see if it works? What browser are you using? So far only confirmed to work in Firefox and IE 6+ on Windows.

You might also check the demo link, I believe 3rd or so post in this thread. If it doesn't work for you there, its your browser.