dlst
28 Jan 2002, 07:21
Ok, so your users DEMAND that you have 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 [I]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:
Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------
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:
Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------
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
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 [I]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:
Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------
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:
Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------
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