How to use ImageEngine in Laravel

Laravel is a popular PHP framework for web application development. This article explains how to integrate ImageEngine in your Laravel app.

Sign up for ImageEngine

To implement ImageEngine in your Laravel app, you will first need to sign up for an ImageEngine account, if you do not already have one. During the signup process, you will specify the website domain that will use ImageEngine and the origin URL for most images. 

Once signed up, you will be issued a unique delivery address following this pattern: “aabbcc.cdn.imgeng.in”.

Please note that ImageEngine require the origin to be reachable over the internet. Hence, if you app is only running on localhost or behind a firewall, ImageEngine is not able to reach the origin image, and will return a 404 error.

1. Create the ./app/ie.php file

The ie.php file contains the code that will insert the ImageEngine delivery address in the HTML.

Copy the code below‚ or from this gist, and save it to a file named ie.php inside the app folder at the root of your Laravel project:

<?php
/**
 * Computes an ImageEngine src for images as defined in the config.
 * 
 * May be used in *.blade.php files like this:
 * <img src="{{ imageengine( "/img/img.jpeg",array("directives"=>"/w_200/") ) }}">
 * 
 * @param string $asset
 * @param array $options
 * @return string
 * 
 */
function imageengine( $asset , $options = null){

    // Check if ImageEngine is configured in the app.php file
    if( !Config::get('app.imageengine') )
        return asset( $asset );

    // Get ImageEngine info
    $imgeng = Config::get('app.imageengine');

    // Check if the file extension should be pulled through ImageEngine
    $assetName = explode("?", basename( $asset ));
    if( preg_match('/^.*\.(' . $imgeng['files'] . ')$/i', $assetName[0]) ){
        return ieSrc($imgeng['delivery_address'], $asset, $options);
    }
    return  $asset ;
}


function ieSrc($ie, $asset, $options) {
    $urlparts = parse_url($asset);
    
    //Check if absolute asset url should be prefixed
    if (isset($options['prefix']) && $options['prefix'] === true && isset($urlparts['scheme'])){
        
        //Add any directives
        if(isset($options['directives']) && strlen($options['directives'])>1){
            return  "//" . rtrim($ie, "/") . "/" . trim( $options['directives'], "/") . "/" . ltrim( $asset, "/");            
        }else{
            return  "//" . rtrim($ie, "/") . "/" . ltrim( $asset, "/");
        }
    }
    //If no prefixig add or replace the host with the ImageEngine delivery address
    $asset = rtrim($ie, "/").$urlparts['path'].(isset($urlparts['query']) ? "?".$urlparts['query'] : "");

    //append any url directives
    if(isset($options['directives']) && strlen($options['directives'])>1 ){
        $op = (isset($urlparts['query']) ? "&" : "?");
        $asset .= $op."imgeng=/".trim($options['directives'],"/");            
    }
    return  "//" . ltrim( $asset, "/");
}

2. Add app/ie.php to composer.json

To make sure the ie.php file is available to the application, add a reference to it in ./composer.json at the root of your project.

...
"autoload": {
    "files": [
        "app/ie.php"
    ],
    ...
}
...

At this stage you may want to run composer dump-autoload or php artisan dump-autoload to regenerate the dependencies needed by the app.

3. Configure ImageEngine in ./config/app.php

Open the app.php file inside te config directory. Add and entry for ImageEngine.

Define imageengine as an array with these indexes:

• files: A list of file extensions ImageEngine will be applied to. For example jpeg|jpg|png|gif|svg|css|js
• delivery_address: The ImageEngine delivery address obtained from your dashboard on control.imageengine.io.

Example:

return [
    ...
    
    /*
    |--------------------------------------------------------------------------
    | ImageEngine 
    |--------------------------------------------------------------------------
    | 
    | ImageEngine delivery address and files to be optimized by ImageEngine
    |
    */

    'imageengine' => array(
        "files" => "jpg|jpeg|png|gif|svg|css|js",
        "delivery_address" => "try.cdn.imgeng.in")
    
    ...

4. Update views

You may now use the global imageengine() function to rewrite any image source url to an ImageEngine url.

<img src="{{ imageengine( "/img/img.jpeg" ) }}">

Following the configuration above, this line will output the following html:

<img src="//try.cdn.imgeng.in/img/img.jpeg">

Options

The default behaviour is to prepend the ImageEngine delivery address or replace current hostnames (if present) with the ImageEngine delivery address.

The imageengine() function takes and additional array of options:

• prefix; if prefix is true and the asset url is an absolute URL, ImageEngine will prefix the asset URL with the delivery address:
  <img src="{{ imageengine( "https://example.com/img/img.jpeg", array("prefix" => true) ) }}">
  ...will generate this HTML:
  <img src="//try.cdn.imgeng.in/https://example.com/img/img.jpeg">
• directives: A string of directives to be passed to ImageEngine.
  For example,
  <img src="{{ imageengine( "/img/img.jpeg", array("directives"=>"/f_webp/w_100") ) }}">
  ...will generate this HMTL:
  <img src="//try.cdn.imgeng.in/img/img.jpeg?imgeng=/f_webp/w_100">
  
  Please refer to the complete list of directives for more.

Examples

Local files:

• *.blade.php : <img src="{{ imageengine( "/img/img.jpeg" ) }}">
• HTML: <img src="//try.cdn.imgeng.in/img/img.jpeg">

Absolute paths (example.com defined as origin in ImageEngine):

• *.blade.php : <img src="{{ imageengine( "https://example.com/img/img.jpg" ) }}">
• HTML: <img src="//try.cdn.imgeng.in/img/img.jpg">

Use of directives:

• *.blade.php : <img src="{{ imageengine( "/img/img.jpeg", array("directives"=>"/w_200/") ) }}">
• HTML: <img src="//try.cdn.imgeng.in/img/img.jpeg?imgeng=/w_200">

Enable prefixing:

• *.blade.php : <img src="{{ imageengine( "https://example.com/img/img.jpg", array("prefix" => true) ) }}">
• HTML: <img src="//try.cdn.imgeng.in/https://example.com/img/img.jpg">