vb.org Archive - 4.1.10 Dynamic image resizing

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:

Code:

  <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:

Code:

<div class="content">

    <blockquote class="postcontent restore ">

        {vb:raw album_bodytext}

     </blockquote>

</div>

What I'm missing?:confused:

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:

Code:

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

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

Code:

...........

$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

HTML Code:

<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.

HTML Code:

<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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01203 seconds Memory Usage 1,716KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (4)bbcode_code_printable (2)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (1)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: