Visual Bugs in PHP

Jumpy Pages

No this is not a typo, and Yes I meant by this Jumping Pages. So let me explain.
Everyone, for sure, knows the pages with Picture Of The Day, where after clicking the small preview we get new page with large, nice image to view…

And it is very commom that the image tag <img src='...'> is not provided with image height and image width. Quite obvious, especially if the images are linked from the directory on the harddrive and not from the database when you could have the image dimmensions defined.

The result? Well… page starts with small square in the middle or whatever and than suddenly expands because the image has been downloaded and now the browser knows the image width and height.
The content jumps around, navigation and all the page elements get replaced… you don’t know where to click because everything moves…
The problem you can see on the other pages as well – Gallery for example – but sometimes even the navigation images, few of them are downloaded/resized the rest is not…
When I see something like that I have the impresion of Jumpy Pages – I think it is not the way it should be.
And there is a very simple solution to avoid this “visual bug”.

Size does matter

To do this you should look at the GetImageSize() function in PHP:

    array getimagesize (string filename [, array imageinfo])

It takes the image filename and determines the size of any GIF, JPG, PNG or SWF …
The optional imageinfo parameter is not important in this example and should be left empty, refer to http://www.php.net/manual/function.getimagesize.php for detailed informations.

What to do with the return value? As you can see we get the array of 4 elements containing:

    0 : width (pixels)
    1 : height (pixels)
    2 : type of the image (flag)
        1 = GIF
        2 = JPG
        3 = PNG
        4 = SWF
    3 : string with "height="yyy" width="xxx" (text)

All we need here is in the return array under the index 3, because we get there the height and widht, in the way, we can use them directly in the <img> tag.
Notice: you should use GetImageSize() function with @ parameter. It will skip the error message if the image was not found (something like: Warning: Unable to open images/myimage.jpg in ./scripts/viewimage.inc.php3 on line 29)

Example

    
        <php
            $img_file="images/myimage.jpg";
            $imgsize = @GetImageSize($img_file);
        ?>

    

Now if you want to include these informations inside HTML code, do it like that:

    
        In PHP
        echo "<img src="".$img_file.""  ".$imgsize[3]." border=0 alt="">";

        In HTML:
        <img src="<?php echo $img_file; ?>"  <?php echo $imgsize[3]; ?> border="0" alt="">
    

And what you get in the source of the HTML page is image tag, with correct image dimmensions:

    
        <img width="456" height="200" src="images/myimage.jpg" border=0 alt="">
    

Simple isn’t it? And you can use this code to avoid jumping not only on the Picture Of The Day or Gallery page – simply use it on every image you output – no more jumping elements of the page while loading.

It’s nothing complicated I think, but it seems that somehow the web developers miss it…