vb.org Archive - Auto resize Huge images for [IMG] bbcode

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.0 Full Releases (https://vborg.vbsupport.ru/forumdisplay.php?f=33)

- - Auto resize Huge images for [IMG] bbcode (https://vborg.vbsupport.ru/showthread.php?t=68677)

I like this hack a lot but it causes funny things when used with

https://vborg.vbsupport.ru/showthread.php?t=73040 the geek gallery popup hack

any chance to make it work with it ?

what's the difference with this hack?
https://vborg.vbsupport.ru/showthrea...t=image+resize

Awesome hack, thanks!

clicked install !
works fine, thanks ;)

Quote:

Originally Posted by hollyboy

what's the difference with this hack?
https://vborg.vbsupport.ru/showthrea...t=image+resize

This one resizes on the client using JavaScript appended to each image tag, whereas the other one (the one you quoted) uses server fetch requests to get the image and check the size and adjusts the tag as applicable.

This hack will still load pages slowly for the client, but the layout will be fine. It will be fast for the server, slow for the browser.

That hack will still load pages slowly for the client, and the layout will be fine. But it will be slow for the server, fast for the browser.

May I make a suggestion about this hack though? Perhaps another method?

Instead of adding JavaScript to every IMG tag within every post, and firing that many onloads... why not just add javascript to your headinclude template that parses all images onload?

Example... Put this in your headinclude... and don't bother hacking any vBulletin files:

HTML Code:

<script type="text/javascript">

function resizeImages() {

  if (document.images) {

    var mw = 800;

    var mh = 800;

    for (var ii = 0; ii < document.images.length; ii++) {

      var i = document.images[ii];

      var iw = i.width;

      var ih = i.height;

      if (ih > iw && ih > mh) {

        i.style.height = mh + 'px';

      } else if (iw > mw) {

        i.style.width = mw + 'px';

      }

    }

  }

}

if (window.addEventListener) {

  window.addEventListener('load', resizeImages, false);

} else if (window.attachEvent) {

  window.attachEvent('onload', resizeImages);

} else {

  window.onload = resizeImages;

}

//-->

</script>

mw = maximum width in pixels.
mh = maximum height in pixels.

I've got mine set to 800 x 800, but you could put what you want in there.

Any img on the page will be resized to fit that area.

Of course, the end user still has to download them, but this resolves the problem with the script part going through to edits and quotes, and is also an easier install.

You don't have to use this version, but it's simpler methinks.

Quote:

Originally Posted by buro9

HTML Code:

<script type="text/javascript">

function resizeImages() {

  if (document.images) {

    var mw = 800;

    var mh = 800;

    for (var ii = 0; ii < document.images.length; ii++) {

      var i = document.images[ii];

      var iw = i.width;

      var ih = i.height;

      if (ih > iw && ih > mh) {

        i.style.height = mh + 'px';

      } else if (iw > mw) {

        i.style.width = mw + 'px';

      }

    }

  }

}

if (window.addEventListener) {

  window.addEventListener('load', resizeImages, false);

} else if (window.attachEvent) {

  window.attachEvent('onload', resizeImages);

} else {

  window.onload = resizeImages;

}

//-->

</script>

This version works better for me and doesn't have problem with the WYSIWYG Editor.
Is there a chance to add a link in the resized picture to open the original version and size in a new window?

Quote:

Originally Posted by buro9

I've got mine set to 800 x 800, but you could put what you want in there.

Any img on the page will be resized to fit that area.

Of course, the end user still has to download them, but this resolves the problem with the script part going through to edits and quotes, and is also an easier install.

You don't have to use this version, but it's simpler methinks.

Just tried it out and it works as intended in the WYSIWYG text editor (edited a post and pasted the image code in, and it works on those as well). Fast too.

Ahhhhhh, finally no more table breaks. :)

Chris

Quote:

Originally Posted by Onkel_Tom

This version works better for me and doesn't have problem with the WYSIWYG Editor.
Is there a chance to add a link in the resized picture to open the original version and size in a new window?

Yup, that's not too hard... but you know what would happen ;)

You either:
1) Add javascript onclick to each image... which breaks the WYSIWYG again.
or
2) You wrap an A element around the image, but it's messy and might not work cross browser.

I can look into it though, I have some old DOM tree javascript lying around and I might already have a method to convert a child element to a grandchild by creating a new parent.

If I do have that and it doesn't affect image placement in the post I'll show an example of that too.

hey i had cinq install this hack on http://www.talkweed.com/forums/ but its not working, do you know why ?

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_html_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)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 pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01076 seconds Memory Usage 1,751KB 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 (2)bbcode_html_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)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 pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: