Fixed size smilies

Mpok · 2010-03-13 04:49:37

Is there a reason to fix the size of the smilies in the code ? (<img ... width="15" height="15" ... in parser.php and help.php)

StevenBullen · 2010-03-13 16:18:53

Yes.

When the page is loading the image smilies will sit at 15px * 15px even if the page is still loading. If you remove this code it will show you a much bigger box and make the page look weird as it loads. (Not on all browsers but it is an issue)

I added the width and height on previous version so this is a welcome addition.

Mpok · 2010-03-13 22:57:19

Thanks StevenBullen for the explanation.

U said "not on all browsers".
U added this a long time ago : do u think that issue u mentionned is still valid with actual browsers versions ?

PS : even if so, don't u think the limits (15x15) are too low ?

StevenBullen · 2010-03-13 23:59:19

Mpok wrote:

U added this a long time ago : do u think that issue u mentionned is still valid with actual browsers versions ?

Cannot confirm which browsers of the top of my head.

Mpok wrote:

PS : even if so, don't u think the limits (15x15) are too low ?

Well on mine it was not set to 15px by 15px.

I made 2 extra arrays at the start of the parser.php which held the width and height of each smilie. This way I could have any size smilies and still fix the problem. (ignored help.php as people rarely use it)

I can post the code, but it wont work with 1.4 as they have modified the code slightly.

mattT09 · 2010-03-14 09:14:48

I've been using variable size smilies for a while without problems in 1.4 All Versions. Does'nt seem to have been an issue with ALL the main Browsers (upto date versions).

// Convert a series of smilies to images
//
function do_smilies($text)
{
    global $pun_config, $smilies;

    $text = ' '.$text.' ';

    foreach ($smilies as $smiley_text => $smiley_img)
    {
        if (strpos($text, $smiley_text) !== false)
            $text = preg_replace("#(?<=[>\s])".preg_quote($smiley_text, '#')."(?=\W)#m", '<img src="'.$pun_config['o_base_url'].'/img/smilies/'.$smiley_img.'" width="" height="" alt="'.substr($smiley_img, 0, strrpos($smiley_img, '.')).'" />', $text);
    }

    return substr($text, 1, -1);
}

I just took the fixed size out of this code.

Can't remember if there were any other changes I made, I'm not a programmer just a user/admin.

As I said 'it all seems to display correctly'.

StevenBullen · 2010-03-15 08:56:27

Matt's idea will work on most forums and you probably wont even notice the loading. But personally I prefer to fix the whole problem than quick-fix it.

I will say it again but copied from another site that explains it better.

Before an image has downloaded, a box will appear showing where on the page it will be. This box may be any size, and often the wrong size. Then, when the image finally begins to download, it is suddenly found to be too big for the space your browser has given it, and so everything has to be shifted around to make room, messing up whatever you were reading at the time and generally causing a disturbance. You can prevent this with the height and width image attributes.

Giving the correct size has many advantages:

* It stops the loading mess-ups
* Your page appears to be loading faster, as everything is in place
* If people have images turned off, they still get the same page layout

mattT09 wrote:

As I said 'it all seems to display correctly'.

Well unfortunately not just the browser can make this a problem.
1. broadband speed/connection
2. server strain
3. and no doubt many more

So eventhough it might display and load perfectly for you it does not do the same for others.

It's not even a major issue but not something that should be changed.

Last edited by StevenBullen (2010-03-15 08:57:02)

mattT09 · 2010-03-15 11:41:52

Steve,

I only have a small set of smilies that I allow users to use. Most are at 15 x 15 anyway. But, I'd be interested in seeing how you set up the array in parser.php to set img sizes...

I completely agree and understand your statements on setting img sizes for the end user though.

Last edited by mattT09 (2010-03-15 11:42:11)

StevenBullen · 2010-03-15 12:38:22

Well my 1.2.* code was simliar to below...

Add the _w _h lines.

$smiley_text = array(':)', '=)', 
$smiley_img = array('smile.png', 'smile.png', 
$smiley_img_w = array('15px', '15px',
$smiley_img_h = array('15px', '15px',

then change

$text = preg_replace("#(?<=.\W|\W.|^\W)".preg_quote($smiley_text[$i], '#')."(?=.\W|\W.|\W$)#m", '$1<img src="img/smilies/'.$smiley_img[$i].'" width="15" height="15" alt="'.substr($smiley_img[$i], 0, strrpos($smiley_img[$i], '.')).'" />$2', $text);

to

$text = preg_replace("#(?<=.\W|\W.|^\W)".preg_quote($smiley_text[$i], '#')."(?=.\W|\W.|\W$)#m", '$1<img src="img/smilies/'.$smiley_img[$i].'" width="'.$smiley_img_w[$i].'" height="'.$smiley_img_h[$i].'" alt="'.substr($smiley_img[$i], 0, strrpos($smiley_img[$i], '.')).'" />$2', $text);

Last edited by StevenBullen (2010-03-15 12:38:53)

MattF · 2010-03-15 13:56:11

Steven is referring to the fact that the browser has to literally redraw the layout of the page if the image sizes are unspecified. Specify dimensions and the browser can assign the exact space needed on the first pass.

This is just the first link I found on Google which gives some explanation:

http://www.websiteoptimization.com/speed/tweak/size/

Mpok · 2010-03-15 16:06:51

Ok.
Setting the sizes as Steven does (with an array) is the best solution.
Just too bad it's not already in 1.4 code...

Forums

#1 2010-03-13 04:49:37

Fixed size smilies

#2 2010-03-13 16:18:53

Re: Fixed size smilies

#3 2010-03-13 22:57:19

Re: Fixed size smilies

#4 2010-03-13 23:59:19

Re: Fixed size smilies

#5 2010-03-14 09:14:48

Re: Fixed size smilies

#6 2010-03-15 08:56:27

Re: Fixed size smilies

#7 2010-03-15 11:41:52

Re: Fixed size smilies

#8 2010-03-15 12:38:22

Re: Fixed size smilies

#9 2010-03-15 13:56:11

Re: Fixed size smilies

#10 2010-03-15 16:06:51

Re: Fixed size smilies

Board footer