Feb
4
2013

Using PHP to output images (AWESOME STYLE)

Don’t get me wrong, I’m not lazy, but I’m also NOT a front end designer or HTML guru. So when it comes to repeating tasks endlessly that are even mildly lengthy- I get bored.

That’s right, I said it- b.o.r.e.d.

Tonight was a perfect example! As a back end engineer, I’m nearly always provided very tidy, but elaborate HTML assets, which are then on my desk to become amazing and highly functional beings. But after merging the 1000th batch of HTML into a full fledged web app, I decided that I didn’t want to deal with images anymore!

I don’t want to deal with missing images, I don’t want to deal with typing out image sizes, or alt tags, or… well- that’s really it. But in true and dedicated hardcore programmer style- I’ve created a handy little(ish) function that makes all that work NO work, and handles fallbacks in the (sadly) likely event that someone decides to link to an image that gets moved, or never existed!

Behold. FUNCTION IMAGE( PARAMS! )!

It takes UP TO 5 params:

  1. The image to display. This is not optional.
  2. True/False for if the image size should be calculated and output as height=”x” width=”x” params in the <img tag
  3. Alt text (again, frequently forgotten but necessary)
  4. Any classes that should be applied. Passed normally with spaces separating classes. Ex: ‘big-image awesome-image’
  5. A fallback in the event that ‘someone’ couldn’t spell the file name correctly, or it was moved.

Using this function is simple as, well PHP:

<?php image( 'assets/images/crowd4.png', true, 'Local File Alt tag', 'magic-class bigger' ); ?>

And the full function…..

function image( $image, $calculate_size = true, $alt = '', $class = '', $default = '' )
{
    //We'll start out assuming the image doesn't exist
    //until proven otherwise
    $exists = false;

    //Then we check to see if we're handling a local
    //or remote one
    if( preg_match( "/(http|https)/", $image ) )
    {
        //It's remote, and CURL is pretty fast
        $ch = curl_init();
        curl_setopt( $ch, CURLOPT_URL, $image );
        curl_setopt( $ch, CURLOPT_NOBODY, 1 );
        curl_setopt( $ch, CURLOPT_FAILONERROR, 1 );
        curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );

        //And it WAS remote, and it DOES exist
        if( curl_exec( $ch ) !== FALSE )
        {
            $exists = true;
        }
        curl_close($ch);
    }
    //Alright, it's a local file, so check it
    elseif( file_exists( $image ) )
    {
        //And again, it DOES exist
        $exists = true;
    }

    //Since there are multiple params, we have to start with nothing
    $output = '';
    if( $exists )
    {
        //Put together the base, this is not optional
        $output .= '<img src="'.$image.'"';

        //Sometimes, we don't want to specify a size
        if( $calculate_size )
        {
            //But here we did, so we'll get it added
            list( $width, $height ) = getimagesize( $image );
            $output .= ' height="'.$height.'" width="'.$width.'"';
        }

        //Alt tags, recommended- frequently missing
        if( !empty( $alt ) )
        {
            $output .= ' alt="'.$alt.'"';
        }

        //And the never ending classes
        if( !empty( $class ) )
        {
            $output .= '';
        }

        //Close it
        $output .= ' />';

        //Echo it
        echo $output;
    }

    //Alright, so the file didn't exist
    //But we DO have a fallback, so we'll hit it
    elseif( !$exists && !empty( $default ) )
    {
        $output .= '<img src="'.$default.'" />';
        echo $output;
    }

    //And here, we're empty.  Null.
    else
    {
        return false;
    }
}

And the thing you’ve been waiting for… Download!

http://www.phpdevtips.com/wp-content/plugins/downloads-manager/img/icons/default.gif download: PHP Image Output (1.64KB)

1 Comment + Add Comment

  • //And the never ending classes
    if( !empty( $class ) )
    {
    $output .= ”;
    }

    ^ I’m not sure if you really wanted to do that ;-).

    Also, the download link doesn’t work (shows a 404).

Leave a comment