Skip to main content

Responsive Images On-The-Fly with PHP and ImageMagick

I've seen some responsive image solutions proposed, and they seem great. But there's still some debate and it will be a while before support is widespread.

In the meantime, I've expanded on a method I've been using for re-sizing images on the fly, which I believe can be further expanded on to make it even better.

Basically, I use a PHP script and ImageMagick to generate a re-sized and cropped image, which I also cache for later use. Here's the essentials of the script I'm using:

Using this script, I can request re-sized images via JavaScript, or even CSS (presuming the image is in a background) based on the current screen resolution and pixel density. This may not be the most elegant solution, but it's worked fairly well for me.

For the purpose of this example, assume this script resides at domain.com/tools/

Note: This is an untested adaptation of a working script. It may not work as-is. 

$file   = urldecode($_GET['f']);
$width  = 150;
$path   = "../images/resized/";
$crop   = true;

$suffix = ""; // Additional text to append to the new filename

$old_width  = 0;
$old_height = 0;



function ranger($url)
{
    $headers = array("Range: bytes=0-32768");

    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $data = curl_exec($curl);
    curl_close($curl);
    return $data;
}

// Width
if( isset($_GET['w']) && is_numeric($_GET['w']) && ($_GET['w'] > 0) )
{
    $width = $_GET['w'];
}
$suffix = $width; // Always include width in the suffix

// Height
if( isset($_GET['h']) && is_numeric($_GET['h']) && ($_GET['h'] > 0) )
{
    $height  = $_GET['h'];
    $suffix .= "x".$height;
}

// Crop the image?
if( isset($_GET['c']) && $_GET['c'] == 0 )
{
    $crop    = false;
    $suffix .= "_nocrop";
}

$file = preg_replace( "/\s/", "%20", $file );

//Get ampersands out of there
$file = preg_replace( "/&/", '%26', $file );

$newfile = preg_replace( "/\\\/", "/", $file );

//Rename: (filename)_$suffix.(ext)
$newfile = $path . preg_replace( "/^.*\/(.*)\.([^.]+?)$/", "$1_" .$suffix. ".$2", $newfile);

//Decode URL encodings
$newfile = urldecode($newfile);

//Get ampersands out of there
$newfile = preg_replace( "/&/", 'and', $newfile );

//Replace whitespaces with underscore
$newfile = preg_replace( "/\s+/", "_", $newfile );


// If the file doesn't exist in the cache, create it.
if( !file_exists( $newfile ) )
{
    try{
        if( isset($height) ){
            // Fallback: Use 2x requested size
            $sizeW = $width  * 2;
            $sizeH = $height * 2;

            // Use 1/2 original size for the constraints
            $raw = ranger($file);
            $im  = imagecreatefromstring($raw);

            $old_width  = imagesx($im);
            $old_height = imagesy($im);

            if( $old_width > 0 && $old_height > 0 ){
                $sizeW = $old_width/2;
                $sizeH = $old_height/2;
            }

            if( $crop )
            {
                $cmd   = 'convert -define jpeg:size='.$width.'x'.$height.' -crop '.$width.'x'.$height.'+0+0 -thumbnail "'.$width.'x'.$height.'^" -gravity center "'.$file.'" '.$newfile;
            }
            else
            {
                $cmd   = 'convert -define jpeg:size='.$sizeW.'x'.$sizeH.' -thumbnail "'.$width.'x'.$height.'>" -gravity center "'.$file.'" '.$newfile;
            }
        }
        else
        {
            $cmd   = 'convert -thumbnail "'.$width.'>" -gravity center "'.$file.'" '.$newfile;
        }

        system($cmd, $retval);

        if( !file_exists( $newfile ) )
        {
            echo 'Thumbnail failed: ', $retval, "\n\n";
            echo($cmd);
        }
    } 
    catch(Exception $e)
    {
        echo 'caught exception: ', $e->getMessage(), "\n";
        echo($cmd);
    }
}

if( file_exists( $newfile ) )
{
    // Faster and easier to just redirect to the new file... ?
    header("Location: http://domain.com/" . preg_replace("\.\.", "", $newfile) );

    // $mime = getimagesize($newfile);
    // $mime = image_type_to_mime_type($mime[2]);
    // header("Content-type: ".$mime);
    // $fn = fopen($newfile,'r');
    // fpassthru($fn);
}
Labels:

Comments

Post a Comment

Popular posts from this blog

Be Careful Using SASS @extend, CSS3 Selectors, and IE8

I recently ran into a situation where some of my styles were broken in Internet Explorer 8. What makes this different from all the other times my styles broke in IE8 was that, as far as I could tell, it was correct. Consider the following code: %highlighted { background-color: #ff0; color: #333; } .keyword.is-active { @extend %highlighted; padding: 10px; text-transform: uppercase; } No problem, right? Then why isn't it working? I wasn't sure, until I looked at the compiled CSS and saw something like this: .some-list:nth-child(2n), .is-highlighted, .keyword.is-active { background-color: #ff0; color: #333; } .keyword.is-active { padding: 10px; text-transform: uppercase; } Since IE8 doesn't support the css selector nth-child , it ignores the entire rule . Without looking at the final output, there's no way of knowing if this will happen ahead of time. So what can you do? Well,...
Post a Comment
Read more

SASS Mixin for Creating CSS Triangles

I feel like one of the most common shapes that we can reliably create with CSS vs images is the triangle. One of the reasons for this is that it works as far back as IE7 (IE6 works, but doesn't support background-color: transparent ). Another is how frequently a little triangle icon can be used (e.g., ascending/descending buttons, expanding menus, open/close state, etc.) I'm not going to cover the techniques of creating triangles with CSS . That's been done already , and probably better than I would do it. What I'm going to share with you, is a little SASS mixin that I've been using to generate triangles. See the Pen SASS Triangles by Thomas Pietrosanti ( @Rykus0 ) on CodePen . I'm using a SASS placeholder ( %triangle-base ) as a base to contain the common styles. This makes it easy to extend without generating tons of extra code each time I want to make a triangle. When this compiles, it creates a rule that applies to all of th...
Post a Comment
Read more

CSS line-height Units Explained

In Chris Coyier's recent article, " Fun with line-height! ", he mentions that we often use unitless values for line-height so that it's proportional to the font size. This is only part of the story, and I was reminded of a Stack Overflow question that got me investigating more about how line-height worked with regards to the various CSS units. If you're declaring the line-height on each element, you won't notice any difference. But if you're not crazy and using the first C of CSS (that's 'Cascading', by the way), then the inherited line-height might not work the way you expect. Disclaimer: This is my understanding after doing some research and testing. I may not be completely correct. TL;DR When using a relative unit (em, %), the line-height is calculated based on the font size of the element where the line-height is defined. This line-height is then inherited, unchanged, by each of its descendants. So we end up with a line...
Post a Comment
Read more