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)

Quote:

Originally Posted by ShaanuJaanu

nope..it doesnt resize anything.. :(

It didn't do anything for me either. But Tradjick's modification which specifies an absolute size worked for me.

- Sid

I had this installed and I thought the problems were hammered out, but my users pointed out that certain pictures smaller than a certain size caused text to show up after the image.

Unfortunately I have to click uninstall until these problems are resolved.

Good idea, though. And this is a needed hack that should be in the base code for vBulletin.

- Sid

Quote:

Originally Posted by SVTBlackLight01

In that thread, what is posted there now is just smaller pics linked to the full size pics (from the gallery). I'm not using the other hack any more. It was causing pages with lots of pictures to completely lock up.

Thanks for gettin back to me, I'll try and replicate similar results and see if what I've got locks up.

Quote:

Originally Posted by m0nde

I wouldn't give up bro I'd look over the install again, double check.. I got things running smoothly with no complaints but I haven't gone live yet I'm still messing with things. Keep trying. *Forgot to SO Click Install* :tired:

Quote:

Originally Posted by buro9

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.

I don't know coding that well. I tried to add the above to my POSTBIT LEGACY template to have it applied only on the signature part but it resizes all pictures. Here is where I applied the script:

Code:

                <!-- sig -->

                <div>

                __________________<br />

                $post[signature]



                                <script type="text/javascript">

                                function resizeImages() {

                                  if (document.images) {

                                    var mw = 300;

                                    var mh = 300;

                                    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>





                </div>

                <!-- / sig -->

How do I make it only apply to the signature?

Quote:

Originally Posted by TwinsForMe

I don't know coding that well. I tried to add the above to my POSTBIT LEGACY template to have it applied only on the signature part but it resizes all pictures. Here is where I applied the script:

Code:

                <!-- sig -->

                <div>

                __________________<br />

                $post[signature]



                                <script type="text/javascript">

                                function resizeImages() {

                                  if (document.images) {

                                    var mw = 300;

                                    var mh = 300;

                                    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>





                </div>

                <!-- / sig -->

How do I make it only apply to the signature?

Start by taking it out of the postbit... it would be inserting that over and over on showthread.php, so it's bloating your code.

And I haven't written a method for only reducing images in certain areas of the page, but you could conceivably add span tags around the signature area, and look for all images in all signature spans and then just reduce those.

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_code_printable (1)bbcode_html_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (5)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.01243 seconds Memory Usage 1,765KB 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_code_printable (1)bbcode_html_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (5)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: