4.1.10 Dynamic image resizing

[Christos Teriakis]

Hello all,

As I seen, 4.1.10 has a great featue to dynamically resize an image according to browser's window. I tried to implement this feature in my own addon, but something I'm missing. Maybe a css file or a js file. Currently I'm loading the following files:

  <script type="text/javascript" src="clientscript/vbulletin-editor.js?v={vb:raw vboptions.simpleversion}"></script>
  <link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}editor.css" />
  <link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}bbcode.css" />
  <link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}postlist.css" />
  <link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}postbit.css" />
  <link rel="stylesheet" type="text/css" href="{vb:var vbcsspath}showthread.css" />

and my template code is:

<div class="content">
    <blockquote class="postcontent restore ">
        {vb:raw album_bodytext}
     </blockquote>
</div>

What I'm missing?

Thank you all
Chris

--------------- Added [DATE]1329333080[/DATE] at [TIME]1329333080[/TIME] ---------------

Finally, due to my limited knowledge in CSS syntax I was unable to make it work, using vB stylevars. That's why I tried to find my own way to do it and finally I got good result with just a few lines of code:

1.- PHP code
Using PHP I got the image's width:

list($photowidth, $photoheight, $phototype, $photoattr) = getimagesize("test.jpg");

Then I assigned a variable to be available in the template:

...........
$templater->register('photowidth', $photowidth); 
...........

2.- Template
I added a block where I want the image to appear. Blocks are resizing when the browser window is resizing. Resizing to lower was what I was looking for, but I wanted to prevent resizing to higher that's why I used the attr: max-width

<div id="photo" style="max-width:{vb:raw photowidth}px;"></div>

Finally I added the image tag inside this block, giving a width=100% and ...that's all.

<div id="photo" style="max-width:{vb:raw photowidth}px;">
    <img border="0" src="test.jpg" width="100%" title="" />
</div>

I tried to post an article for it, but I got permission error, so I post (in a short way) here, if someone wants to use it.

Chris