Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Dynamic Image Resize Hack Details »
Dynamic Image Resize Hack
Mod Version: 1.00, by dlst (Member) dlst is offline
Developer Last Online: Jan 2004 I like it Show Printable Version Email this Page

This modification is in the archives.
vB Version: 2.2.x Rating: (0 vote - 0 average) Installs: 1
Released: 28 Jan 2002 Last Update: Never Downloads: 1
Not Supported Is in Beta Stage  

Ok, so your users DEMAND that you have [IMG ] tags activated, so you finally gave in, but now people are including huge 2000 pixel wide images that screw up your forum tables and generally make things a mess.

So, what's an easy way of preventing this huge image from beaking the page? Dynamically resize it!

The way it works is this:

When the IMG tag is parsed with the vbcode parser, the image is give a name="" attribute. It is assigned a random name, beginning with "ri_".

A Javascript function is run "onload" and "onresize"... when the page loads and when the user resizes their browser.

The function looks for all the image in the page beginning with "ri_" filename and resizes them based on some maximum width you specify. The height is calculated automatically in proportion to the width.

All those image resize, and VIOLA! Your page format stays intact and no one has to scroll forever to the right to read the posts.

Now, for the bad news:

This ONLY works on newer browsers, basically 4.0+ across the board, and I have NOT tested them all (that's your job).

This only resizes the image, not reduce them... in other words, it will take just as long to download the image as it normally would. So those 3MB 2000 pixel monsters some dummy took with his new Mavica will still take forever to load. The reason this doesn't matter to me, is that most of the time other forum users will complain to the poster, not the admin.

Whew! All legalities aside, here's the good stuff:

First, you need to modify admin/functions.php. Go to about line 784 and look for the following line:

$bbcode = preg_replace("/(\[)(img)(])(\r\n)*([^\"".iif($allowdynimg,"","\?\&")."]*)(\[\/img\])/siU", "<img s

(I didn't copy the whole line, this section is unique enough for a search)

REPLACE that line with the following:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Got it so far? Cool. Now, go to the "headinclude" template. Find the following line (it's near the end):

</style>

and add the following BELOW that line:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Before you close that menu, edit the "fixed_width" variable (in the line that reads var fixed_width = 350 to the "reserved space" in your page.

Now let me repeat... since this is the confusing part: There is a certain number of horizontal space taken up by your page, say by the navigation bar at the left, by the space where the username and user info is when view a post, etc. All that stuff takes up a certain amount of space, measured in pixels. That's the number to put in here.

And, of course, experiment. It varies a little from browser to browser. 350 worked well for me, and I have a pretty much stock forum with a 120 pixel nav bar on the left.

And that's it! Pretty easy ay?

As always, remember this is the beta forum for a reason, so please provide as much feedback as possible, the badder the better and let me know what works and what doesn't!

-dlst

Download Now

Only licensed members can download files, Click Here for more information.

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Show Thread Enhancements Dynamic Picture Resize for [IMG] tag TECK vBulletin 3.6 Add-ons 153 08 Jul 2009 17:20
Show Thread Enhancements CES Dynamic [IMG] Resize (Plugin Version) thincom2000 vBulletin 3.6 Add-ons 140 08 Jul 2009 17:19

Comments
  #2  
Old 28 Jan 2002, 18:42
Gutspiller's Avatar
Gutspiller Gutspiller is offline
 
Join Date: Dec 2001
error:

Warning: Unknown modifier 'g' *******/functions.php on line 751

Fatal error: Cannot redeclare randomstring() in *******/functions.php on line 737

line 751:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

line 737:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Reply With Quote
  #3  
Old 29 Jan 2002, 04:21
dlst dlst is offline
 
Join Date: Dec 2001
I don't get that problem on mine...

Try renaming the function to something else, and modify the call (it's a couple lines down) as well, and see what happens.

Let me know if you need "baby step" instructions.
Reply With Quote
  #4  
Old 29 Jan 2002, 05:15
epic's Avatar
epic epic is offline
 
Join Date: Oct 2001
no any change after install it
Reply With Quote
  #5  
Old 29 Jan 2002, 05:35
dlst dlst is offline
 
Join Date: Dec 2001
Originally posted by epic
no any change after install it
Let's verify, shall we?

Go to a page in your forum where users have posted images via the [IMG ] tag.

View the source of that page, and see if the images have the name= attribute in the image tag... you're looking for a tag that looks something like this:

<img src="/images/testimage.gif" border="0" name="ri_L1nNQBYG9I5ZPxu" alt="">

See the name="ri_L1nNQBYG9I5ZPxu" part? That's what you're looking for.

Also, please report the following:

What browser are you using?
Do you have vbCode turned on?
Do you have IMG code turned on?
What is the URL to your test forum?

-dlst
Reply With Quote
  #6  
Old 29 Jan 2002, 13:36
Crapforum Crapforum is offline
 
Join Date: Jan 2002
This hack can be done without changing any documents.

insert the following in your style sheet(headerinclude):
.imgfix {width:expression(document.body.clientWidth -330)}

change the number "330" when the fixed images are still to large/small. (test this number with different screen resolutions)


create a vbcodetag [IMGFIX]
use this code replacement:
<img src="{param}" class=imgfix><br>
<a href="{param}">Click for full image</a><br>



to finish it, add an IMGFIX in your vbcodebuttons
See a demo at http://www.crapforum.nl

Good luck.
__________________
www.crapforum.nl
Reply With Quote
  #7  
Old 29 Jan 2002, 15:54
dlst dlst is offline
 
Join Date: Dec 2001
Originally posted by Crapforum
This hack can be done without changing any documents.
Hey Crap, thanks for posting.

I don't think we're talking about the same thing. Go to http://crapforum.caveo.nl/showthread.php?threadid=381 and take a look at the second post on the page. You will see there a very wide image that forces the user to scroll if the browser window is set narrow.

I'm not saying your solution is a bad, ineffective one. It just appears we are not trying to do the same things.

Thanks.
Reply With Quote
  #8  
Old 29 Jan 2002, 16:34
epic's Avatar
epic epic is offline
 
Join Date: Oct 2001
Originally posted by dlst


Let's verify, shall we?

Go to a page in your forum where users have posted images via the [IMG ] tag.

View the source of that page, and see if the images have the name= attribute in the image tag... you're looking for a tag that looks something like this:

<img src="/images/testimage.gif" border="0" name="ri_L1nNQBYG9I5ZPxu" alt="">

See the name="ri_L1nNQBYG9I5ZPxu" part? That's what you're looking for.

Also, please report the following:

What browser are you using?
Do you have vbCode turned on?
Do you have IMG code turned on?
What is the URL to your test forum?

-dlst
Sorry,i mean attachment is image.
Reply With Quote
  #9  
Old 29 Jan 2002, 19:11
Gutspiller's Avatar
Gutspiller Gutspiller is offline
 
Join Date: Dec 2001
Originally posted by dlst
I don't get that problem on mine...

Try renaming the function to something else, and modify the call (it's a couple lines down) as well, and see what happens.

Let me know if you need "baby step" instructions.
yes, baby steps would be good for my noobie a$$.

Thanks!
Reply With Quote
  #10  
Old 29 Jan 2002, 20:52
dlst dlst is offline
 
Join Date: Dec 2001
Originally posted by Gutspiller
yes, baby steps would be good for my noobie a$$.
Ok, here goes:

In the line below that reads:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

CHANGE that to


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Then find the line that reads:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and CHANGE that to


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

And then let me know what happens.
Reply With Quote
  #11  
Old 29 Jan 2002, 20:56
dlst dlst is offline
 
Join Date: Dec 2001
Originally posted by epic

Sorry,i mean attachment is image.
Epic, I see you're a man of few words. Please make an exception for me and try to explain, in more than 6 words, what exactly you're having trouble with.

Do you mean your image attachments are images? Isn't that, by definition, what they are?

Do you mean your attachments are being viewed as images? If so, what's the problem?

And what about answers to the rest of my questions? URL to your test forum? Browser you are using to view your pages?

I don't mean to be short, but it's hard to help with so little input, so be a little bit more verbose!

Thanks!
Reply With Quote
  #12  
Old 29 Jan 2002, 23:31
Gutspiller's Avatar
Gutspiller Gutspiller is offline
 
Join Date: Dec 2001
Originally posted by dlst


Ok, here goes:

In the line below that reads:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

CHANGE that to


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Then find the line that reads:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and CHANGE that to


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

And then let me know what happens.
Warning: Unknown modifier 'g' in **********/admin/functions.php on line 785

Fatal error: Cannot redeclare randomstring12345() in **************/admin/functions.php on line 771

Reply With Quote
  #13  
Old 30 Jan 2002, 00:27
dlst dlst is offline
 
Join Date: Dec 2001
Totally weird. Can you attach your functions.php file so I can take a look?
Reply With Quote
  #14  
Old 30 Jan 2002, 00:28
dlst dlst is offline
 
Join Date: Dec 2001
Oh yeah, and what version of PHP are you running? In older versions you can't declare a function within a function...
Reply With Quote
  #15  
Old 30 Jan 2002, 05:10
epic's Avatar
epic epic is offline
 
Join Date: Oct 2001
Originally posted by dlst


Epic, I see you're a man of few words. Please make an exception for me and try to explain, in more than 6 words, what exactly you're having trouble with.

Do you mean your image attachments are images? Isn't that, by definition, what they are?

Do you mean your attachments are being viewed as images? If so, what's the problem?

And what about answers to the rest of my questions? URL to your test forum? Browser you are using to view your pages?

I don't mean to be short, but it's hard to help with so little input, so be a little bit more verbose!

Thanks!
I attach a image in post.
when i viewing the post the image(attachment) do not been auto resized.
Thx.Can you help me?
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

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


New To Site? Need Help?

All times are GMT. The time now is 08:19.

Layout Options | Width: Wide Color: