Image auto resizer

Hello first post \o/. I'm a long time vB lover/coder, first time poster here (having purchased my own liscence earlier... no more hanging off friend's forums for me).

Brief outline:

This mod is designed to prevent images horizontally stretching the screen, while giving you the ability to revert them to their full size if you wish.

How does this affect the user

This is a silent script - after its installation, there is no configuration or further modification required.

Lets see it then!

There are two images of the mod in action attached.

What versions will this support?

Defiantly 3.5.3 and 3.5.0 (I believe it was RC2) although it was a slightly different string you needed to search for in the php file, but it's in essentially exactly the same. I imagine that with a little messing around, it'll support earlier versions also.

Installation:

First, download the attached zip file (autoresize.zip). A copy of these instructions are also there.

Upload autoresize.js to /clientscripts/ from your forum directory.

Log into your forum admin panel, go to styles & templates > style manager > edit templates.

Edit the "SHOWTHREAD" template (Under Show Thread templates), find </head>

Just above it, add

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

Save it.

Repeat, adding it in the same place to the newthread template.

Now, from your forum directory, open /includes/class_bbcode.php

search for:

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

Replace it with:

return '<div style= "display: none; background-color: black; color: white" onClick="catflap_toggle_image_size(this); return false">&nbsp;</div><img src="' . $link . '" onLoad="catflap_resize_image(this); return false;" border="0" />';

Give it a test, under different templates with different boundaries, it may well still stretch the table make the image a little/be a little too small.

Should this be the case, open /clientscript/autoresize.js

modify the 100 in

size_available = winwidth - 100;

either up or down (start by moving it up and down in 100's, then when it gets closer to perfect, 10's) until an image that would normally stretch the table fits completely within the forum boundaries. 100 is perfect for the default vbulletin 3.5.3 template.

Enjoy! If you have any problems, just give a shout and I'll do my best to put you right. All feedback/suggestions are also welcome.

[Xzyte]

Same here, not working with FF 1.5.0.1
The strange thing is that the sample in his forum ( http://www.timbashford.com/forum/sho....php?p=7#post7 ) works on my FF.

[ubblite]

Originally Posted by Zia

Sounds nice...a java script...

does that touce sigs ? image hosted on imageshack/photobucket would be re-size too?
instead of klik ..cant it re-size the image to a pre-defined size?

I'd like to know this too. And the Firefox issue worries me a bit.

[wrang]

It dosent work for me at all
i run 3.5.4

[Kanustep]

Don't work here too...Using 3.5.4

[Mr Chad]

Originally Posted by Kanustep

Don't work here too...Using 3.5.4

it works in 3.5.4 in IE, not FF tho.

[cloyal]

Originally Posted by chatbum

it works in 3.5.4 in IE, not FF tho.

This is the same thing I have, works in 3.5.4 just not FF, IE works great.


Is there a way to address this for FF?

[aladinliverpool]

Originally Posted by cloyal

This is the same thing I have, works in 3.5.4 just not FF, IE works great.


Is there a way to address this for FF?

ive just installed this as well. maybe ill start reading what happens to users first.

[himring]

Hi, I modified the script this way, thanks to stcont, and it work perfectly in Firefox and Opera.

 
function catflap_resize_image (imageref)
  {
    var winwidth = 0;
    var size_available = 700; //to set 700pixel as your max image size
    if (self.innerWidth) winwidth = self.innerWidth;
      else if (document.documentElement && document.documentElement.clientWidth) winwidth = document.documentElement.clientWidth;
        else if (document.body) winwidth = document.body.clientWidth;
    //size_available = winwidth - 600;
    if (imageref.width > size_available)
      {
        var pc = Math.round (size_available / imageref.width * 10000) / 100;
        imageref.catflap_original_width=imageref.width;
        imageref.catflap_shrunk_width=size_available;
        imageref.catflap_shrunk_pc=pc;
        imageref.catflap_shrunk_status=1;
        imageref.style.width=size_available+'px';
        if (imageref.previousSibling)
          {
            imageref.previousSibling.style.width=size_available+'px';
            imageref.previousSibling.firstChild.nodeValue="Immagine ridimensionata al " + pc + "% delle sue dimensioni. Clicca qui per vederla nelle dimensioni originali.";
            imageref.previousSibling.style.display = 'block';
          }
      }
  }
function catflap_toggle_image_size (imageref)
  {
    if (imageref.nextSibling)
      {
        if (imageref.nextSibling.catflap_shrunk_status == 1)
          {
            imageref.firstChild.nodeValue="Immagine a dimensioni originali. Clicca qui per rimpicciolirla.";
            imageref.style.width=imageref.nextSibling.catflap_original_width+'px';
            imageref.nextSibling.style.width=imageref.nextSibling.catflap_original_width+'px';
            imageref.nextSibling.catflap_shrunk_status=0;
            imageref.style.display = 'block';
          }
         else
          {
            imageref.firstChild.nodeValue="Immagine ridimensionata al " + imageref.nextSibling.catflap_shrunk_pc + "% delle sue dimensioni. Clicca qui per vederla nelle dimensioni originali.";
            imageref.style.width=imageref.nextSibling.catflap_shrunk_width+'px';
            imageref.nextSibling.style.width=imageref.nextSibling.catflap_shrunk_width+'px';
            imageref.nextSibling.catflap_shrunk_status=1;
            imageref.style.display = 'block';
          }
      }
  }

Now I have another problem, if I load a thread with large image under IE, the first time tha script work nice, but if I reload the page it doesn't anymore. For example io con go here:

http://www.sapphireitaly.com/forum/showthread.php?t=13

the image should load resized, try now to hit the reload button (F5) and as you can see the image are not resized any more, and from now on they never been resized any more.

Any suggestion.

P.S.: Sorry of my english :cry:

[KeeperPL]

Originally Posted by himring

Now I have another problem, if I load a thread with large image under IE, the first time tha script work nice, but if I reload the page it doesn't anymore. For example io con go here:

http://www.sapphireitaly.com/forum/showthread.php?t=13

the image should load resized, try now to hit the reload button (F5) and as you can see the image are not resized any more, and from now on they never been resized any more.

I have the same problem

[robert_2004]

adding the <script> to the SHOWTHREAD template didn't work for me. i ended up adding it to the heardinclude template instead.