Go Back   vb.org Archive > vBulletin Modifications > Archive > vB.org Archives > vBulletin 3.0 > vBulletin 3.0 Full Releases
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Automatic Image Resizing Javascript Details »»
Automatic Image Resizing Javascript
Version: 1.01, by Dorign Dorign is offline
Developer Last Online: Jan 2011 Show Printable Version Email this Page

Version: 3.0.8 Rating:
Released: 08-17-2005 Last Update: 08-17-2005 Installs: 14
Template Edits
Code Changes  
No support by the author.

This is my first mod. So.. God be with you all. :ninja:


Description: This is, to my knowledge, an image resize script that works any time an image is displayed in a post on your forum. It uses a simple javascript and the onload function found in many body tags. I have heard that there is some problem with the WYSIWYG, and though I'm not sure what that means, surely this modification corrects that.
This javascript resizes images when the following occurs:
- If an image appears over the limit you specify on any given post..
--- when in showthread mode (...showthread.php?t=####).
--- when in showpost mode (...showthread.php?p=####).
--- when in newreply mode while replying (topic review display).

Difficulty: Oughtta be fairly easy, just a few simple steps. Five minutes, if that.

Edits: Three PHP file edits, and one template edit.
root/showthread.php
root/includes/functions_showthread.php
root/includes/functions_editor.php
template:headinclude


Pros: Fast modification, doesn't slow down the forum display, resizes the images on every instance of the post, cached or not. Works in both IE and Mozilla browsers (fairly old and simple javascript, probably works with old browsers as well), and also on Apple's Safari.

Cons: The user must have java enabled or they will not see the code work, the page must be fully loaded before the resizing takes place, it will only resize images on posts (not private messages or other areas, though this could be added if needed).

Support: I have agreed to support this, as if it breaks your forum, I'd naturally want to help; that's not going to happen, though! :up: Simple, easy code. If I can't support you, I'll break my back trying.

Warning: Again, this is my first mod, so I'm sorry if it's a bit crude. It works 100% for me, but I'm posting it in beta since.. well, since no one else has tested it; since I'm not really a coder, only advanced coders should install this until someone looks at it and says "It's good to go!" :nervous:

Version History:
8/18/05 - 1.00 - It's born and submitted as a beta. :ninja:
8/20/05 - 1.01 - No additions, but tested on cross platforms. Works! Released, no longer beta!

After I've had a few installs and :up:'s from people, I'll request to have it made "official."
And without further delay, away we go.

------
START
------
STEP 1
------
In template headinclude
Scroll to bottom of file - Paste
HTML Code:
<script language="javascript" type="text/javascript"> 
<!-- 
  function resize_images() 
  { 
    for (i = 0; i < document.images.length; i++) 
    { 
      while ( !document.images[i].complete ) 
      { 
       break; 
      } 
      if ( document.images[i].width > XREPLACEX ) 
      { 
        document.images[i].width = XREPLACEX; 
      } 
    } 
  } 

//--> 
</script>
Be sure to change both XREPLACEX instances to a width, such as "500."
------
STEP 2
------
In php file (root) showthread.php
Find
PHP Code:
// workaround for header redirect issue from forms with enctype in IE
// (use a scrollIntoView javascript call in the <body> onload event)
$onload ''
Replace with, or modify to
PHP Code:
// workaround for header redirect issue from forms with enctype in IE
// (use a scrollIntoView javascript call in the <body> onload event)
$onload 'resize_images();'
Still in php file (root) showthread.php
Find
PHP Code:
    if (!$QRrequireclick AND $WYSIWYG >= 1)
    {
        
$onload .= " editInit();";
        
    } 
Replace with, or modify to
PHP Code:
    if (!$QRrequireclick AND $WYSIWYG >= 1)
    {
        
$onload .= " resize_images(); editInit();";
        
    } 
Save file showthread.php, upload to root directory.
------
STEP 3
------
In php file (includes) functions_showthread.php
Find
PHP Code:
$onload " if (is_ie || is_moz) { fetch_object('currentPost').scrollIntoView(!is_moz); }"
Replace with, or modify to
PHP Code:
$onload "resize_images(); if (is_ie || is_moz) { fetch_object('currentPost').scrollIntoView(!is_moz); }"
Save file functions_showthread.php, upload to includes directory.
------
------
STEP 4
------
In php file (includes) functions_editor.php
Find
PHP Code:
        // set the onload event for the body tag
        
$onload ' onload="editInit();"'
Replace with, or modify to
PHP Code:
        // set the onload event for the body tag
        
$onload ' onload="resize_images(); editInit();"'
Still in php file (includes) functions_editor.php
Find
PHP Code:
$onload ' onload="editInit();"'
Replace with, or modify to
PHP Code:
$onload ' onload="resize_images(); editInit();"'
Save file functions_editor.php, upload to includes directory.
------
DONE
------
If you use it, please hit install! :P
------

If you have questions, please ask in this thread.
If you appreciate the modification, as a thanks, you could always link to my forum or try and get me more members. ^_^

http://www.forum-central.com/

For those of you who need screenshots, here you go. :nervous:

Supporters / CoAuthors

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #12  
Old 08-20-2005, 04:54 AM
Dorign's Avatar
Dorign Dorign is offline
 
Join Date: Jul 2004
Location: Missouri
Posts: 241
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Unless anyone has any objections, I think I'll be making this a full version. No code edits would be required; I just can't seem to find any errors with the code.
Reply With Quote
  #13  
Old 08-20-2005, 08:39 PM
Dorign's Avatar
Dorign Dorign is offline
 
Join Date: Jul 2004
Location: Missouri
Posts: 241
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I've just been told this modification also works when viewed with Safari. Yay. ^_^ I'd say this is done being beta tested. Release, woo.
Reply With Quote
  #14  
Old 08-20-2005, 09:03 PM
dai-kun dai-kun is offline
 
Join Date: Jul 2005
Posts: 238
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Nice, Only problem is that my forum logo gets resized too as well
Reply With Quote
  #15  
Old 08-20-2005, 09:15 PM
Dorign's Avatar
Dorign Dorign is offline
 
Join Date: Jul 2004
Location: Missouri
Posts: 241
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Well, for that, you could simply split your logo into parts, and then put them in a table. That's what I did for Forum Central. ^_^
Reply With Quote
  #16  
Old 09-04-2005, 06:45 PM
ggiersdorf ggiersdorf is offline
 
Join Date: Aug 2005
Posts: 251
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Nice Hack though I have a request can you make it clickable to show you full size in another window???
Reply With Quote
  #17  
Old 09-05-2005, 02:40 PM
Dorign's Avatar
Dorign Dorign is offline
 
Join Date: Jul 2004
Location: Missouri
Posts: 241
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

The script would need to be rewritten to make posted images clickable, and it would slow the speed of the script down by over 200% surely. As for your header image, this script isn't programmed to be integrated with the vB post code (which slows forums down if you do it that way), so it will resize every single image over your set width, regardless if it's in a post or on the page. The work around to this, and the one I use at www.forum-central.com, is to break the header up into a 2 or 3 part image and use tables to align it. That would be more webfriendly than having an 800 pixel wide image, anyway.
Reply With Quote
  #18  
Old 09-06-2005, 02:08 AM
vietfancy's Avatar
vietfancy vietfancy is offline
 
Join Date: Feb 2005
Posts: 278
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

is this work with 3.07?
Reply With Quote
  #19  
Old 09-08-2005, 01:07 AM
Dorign's Avatar
Dorign Dorign is offline
 
Join Date: Jul 2004
Location: Missouri
Posts: 241
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Works with any 3.0.x version.
Reply With Quote
  #20  
Old 09-11-2005, 10:56 AM
wirewolf's Avatar
wirewolf wirewolf is offline
 
Join Date: Jun 2004
Location: New York City
Posts: 74
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Nice hack Dorign. Simple and edits very easy (clicks' install).
Here's an example on my forum (3.0.9):
http://www.shipmodeling.net/vb_forum/thread907.html
Just what I needed. The original image my user posted was over 1100 px's wide. I set my limit to no more than 600 px's.
Tested it with IE, Firefox and Nutscape. All seem ok

PS, I added a little notice to my users in the "Post Thread' and in the 'Edit Post' templates to let them know that any over sized image they link to will be resized automatically so they don't think they're going crazy.
Reply With Quote
  #21  
Old 09-26-2005, 05:31 PM
Inferno Dragon's Avatar
Inferno Dragon Inferno Dragon is offline
 
Join Date: Sep 2005
Location: United Kingdom
Posts: 153
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

is there any way of adding a small notice below the resized image like "Click here to View the Full Image" and then it's open in a new window?
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:21 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04964 seconds
  • Memory Usage 2,332KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)bbcode_html
  • (10)bbcode_php
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (6)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete