Icy Phoenix

Old Support Topics - Limit Image Width Faster

AvrilBoi [ Tue 29 Aug, 2006 14:56 ]
Post subject: Limit Image Width Faster

The function limit image width actually gets the image width using a php function, and than (if the width passes the max image width set) it sets width="MAX_IMAGE_WIDTH" and the height proportionally, but this function can sometimes slow down the forum too much.
So this morning I was looking for a solution... and I managed to do it using javascript.
Maybe this can be raplaced with the actual limit image width function in the next xs release, I don't know how to replace, so for now I've just disabled the limit image width function and applied mine.
Here's what to do if you trust me :P :

Disable the limit image width function (ACP - General configuration - Image width, and set at least the first 2 options to NO)
OPEN
/templates/ca_aphrodite/overall_header.tpl
FIND

Code: [Hide] [Select]

<script language="JavaScript" type="text/javascript" src="language/{L_BBCB_MG_LANG}/bbcb_mg.js"></script>

Before, ADD

Code: [Hide] [Select]

<script type="text/javascript">

function redimImg(foto, maxSize){

w = foto.width;

if (w > maxSize){

foto.width = maxSize;

}

}

</script>

OPEN
/templates/ca_aphrodite/bbcode.tpl
FIND

Code: [Hide] [Select]

<!-- BEGIN img --><a href="{URL}"><img src="{URL}" border="0" alt="" /></a><!-- END img -->

REPLACE WITH

Code: [Hide] [Select]

<!-- BEGIN img --><a href="{URL}"><img src="{URL}" border="0" alt="" onload="redimImg(this, YOUR_MAX_IMAGE_WIDTH_VALUE);" /></a><!-- END img -->

FIND

Code: [Hide] [Select]

<!-- BEGIN albumimg --><a href="album_showpage.php?pic_id={IMG_NUM}" target="_blank" class="postlink"><img src="album_thumbnail.php?pic_id={IMG_NUM}" alt="Image" title="Image" border="0" /></a><!-- END albumimg -->

REPLACE WITH

Code: [Hide] [Select]

<!-- BEGIN albumimg --><a href="album_showpage.php?pic_id={IMG_NUM}" target="_blank" class="postlink"><img src="album_thumbnail.php?pic_id={IMG_NUM}" alt="Image" title="Image" border="0" onload="redimImg(this, YOUR_MAX_IMAGE_WIDTH_VALUE);" /></a><!-- END albumimg -->

OPEN
/includes/bbcode.php
FIND

Code: [Hide] [Select]

$html = '<img';

REPLACE WITH:

Code: [Hide] [Select]

$html = '<img onload="redimImg(this, YOUR_MAX_IMAGE_WIDTH_VALUE);"';

OPEN
/album_mod/bbcode.php
FIND

Code: [Hide] [Select]

$html = '<img';

REPLACE WITH:

Code: [Hide] [Select]

$html = '<img onload="redimImg(this, YOUR_MAX_IMAGE_WIDTH_VALUE);"';

Xusqui [ Wed 30 Aug, 2006 12:21 ]
Post subject: Respuesta: Limit Image Width Faster

Can anyone confirm that this is working and that it is really faster?

Thanx!!!!

AvrilBoi [ Wed 30 Aug, 2006 12:49 ]
Post subject: Re: Limit Image Width Faster

Xusqui, I use it on my site (the link is in my profile), so you can check and can test posting a large image :wink:
Anyway it is faster because it uses a javascript and doesn't use php to get the images' widths and heights.
You can always open a topic in your forum with a large image, take trace of the page generation time, than make a backup of your files and apply my mod, and check the new page generation time;)

Mighty Gorgon [ Thu 31 Aug, 2006 00:50 ]
Post subject: Re: Limit Image Width Faster

AvrilBoi, it's not the same using JS instead of PHP script for resizing images... try to load one big image, let's say 3MB, and then you will see that the image will be shown after some seconds :wink: !

Using that script the image is not resized... only the WIDTH will be set to a lower value, but the image will be loaded as full!!!

Using PHP instead, images will be recompressed on the server... so just another image will be loaded...

Try to believe! :wink:

AvrilBoi [ Thu 31 Aug, 2006 11:22 ]
Post subject: Re: Limit Image Width Faster

Mighty Gorgon wrote: [View Post]
try to load one big image, let's say 3MB, and then you will see that the image will be shown after some seconds :wink: !
Using that script the image is not resized... only the WIDTH will be set to a lower value, but the image will be loaded as full!!!

I know that :wink:

Mighty Gorgon wrote: [View Post]
Using that script the image is not resized... only the WIDTH will be set to a lower value, but the image will be loaded as full!!!

Also the limit image width function does the same.

Mighty Gorgon wrote: [View Post]
Using PHP instead, images will be recompressed on the server... so just another image will be loaded...
Try to believe! :wink:

Mighty, I think that there are 2 different options in xs... one that with php makes thumbnails and so a new smaller and compressed image is generated, and another, which is limit image width, which with php just sets width="max_im_width", and loads the full image just as my script does, with the difference that my script just uses javascript to resize the image after it has been loaded and showed fully, and the xs limit image width uses php.
... I can be wrong, so I'll re-test it on my site and I'll let you know :wink:
EDIT:
I've tested, and the limit image width function does load the full image and just sets width="MX_IM_WIDTH". :roll:

Mighty Gorgon [ Sat 02 Sep, 2006 04:42 ]
Post subject: Re: Limit Image Width Faster

AvrilBoi wrote: [View Post]
EDIT:
I've tested, and the limit image width function does load the full image and just sets width="MX_IM_WIDTH". :roll:

Yes you're right about LIW... it doesn't actually resize images... it does set just the width. :wink:

Only Thumbs In Post will resize images creating a thumbnail!

AvrilBoi [ Thu 07 Sep, 2006 15:42 ]
Post subject: Re: Limit Image Width Faster

Someone made me notice that it doesn't resize images in topic previews pages (posting.php?mode=topicreview&t=XXX)
So, if anyone is interested in making it work also there, here's what to do.

OPEN
/templates/ca_aphrodite/simple_header.tpl
FIND

Code: [Hide] [Select]

<link rel="stylesheet" href="templates/ca_aphrodite/style_{TPL_COLOR}.css" type="text/css" />

After, ADD

Code: [Hide] [Select]

<script type="text/javascript">

function redimImg(foto, maxSize){

w = foto.width;

if (w > maxSize){

foto.width = maxSize;

}

}

</script>