Fork me on GitHub

Using Munee, you can resize/crop/stretch/fill images on-the-fly using a set of arguments. The resulting image will be cached and served up on subsequent requests. If the source image is modified, it will recreate the cache and invalidate the client side cache and force the browser to download the newest version.


Security

When using an on-the-fly image resizing tool like this, there is an inherent risk that someone will try and exploit it to try and resize a photo a thousand different ways to take down your server.
Munee has a couple of ways to minimise this risk a great deal. One is it checks that the referer is set and is coming from the same domain that the image is located on. Another is it only allows 3 resizes of an image within a 5 minute time span. Both of these features can be either turned off or changed within the dispatcher settings.


Dispatcher Options

These options can be set in the first parameter of the Request class in the dispatcher file. For example:

echo \Munee\Dispatcher::run(new \Munee\Request(array('image' => array('checkReferrer' => false))));
NameTypeDefaultDescription
checkReferrer Boolean true Check to make sure the referer matches the same domain where the image is hosted
numberOfAllowedFilters Integer 3 How many filters can be done within the allowedFiltersTimeLimit
allowedFiltersTimeLimit Integer 300 Number of seconds before another resize can happen after the numberOfAllowedFilters has been reached
imageProcessor String GD Which image processor to use. Values can be: GD, Imagick, Gmagick
placeholders Boolean|Array false Setup placeholders to be used for any images are missing. Placeholder services like http://placedog.com can be used as well. Examples can be found below.

Image Filters

Read here about Asset Filters

Resize Filter

NameValueDescription
resize Arguments The resize filter can resize/crop/fill images.

Resize Arguments

NameTypeDefaultDescription
height (or h) Integer N/A The max height you want the image.
width (or w) Integer N/A The max width you want the image.
exact (or e) Boolean false Crop the image to the exact height and width.
stretch (or s) Boolean false Stretch the image to match the exact height and width.
fill (or f) Boolean false Draw a background the exact size of the height and width and centre the image in the middle. (If you do not want the image to be stretched, then do not use the stretch argument along with fill).
fillColour (or fc) HEX Colour (without #) FFFFFF This works in conjunction with fill. The colour of the filled in background.
quality (or q) Integer 75 JPEG compression value.

Note: Boolean arguments can use true, t, yes, y for truthy values and false, f, no, n for falsey values.

Resize Examples

Resize an image to a specific width and keep it's correct aspect ratio. Note: This is using the long form of the arguments.

<img src="/img/my-image.jpg?resize=width[250]">

Resize an image and keep it's correct aspect ratio but neither width or height can be bigger than specified.

<img src="/img/my-image.jpg?resize=width[100]-height[50]">

Crop an image to an exact size. If the image is smaller than the provided dimensions, it will not stretch or fill the image out to match the height and width. Note: This is using the shortened form of the arguments.

<img src="/img/my-image.jpg?resize=w[100]h[85]e[true]">

Crop an image and stretch it to an exact size.

<img src="/img/my-image.jpg?resize=w[200]h[300]e[true]s[true]">

Resize an image and put it on dark grey background the exact size of the dimensions.

<img src="/img/my-image.jpg?resize=w[500]h[500]f[true]fc[444444]">

Colorize Filter

NameValueDescription
colorize HEX Color (without #) Applies the Imagine Colorize Effect.

Colorize Example

This would put a red overlay on the image.

<img src="/img/my-image.jpg?colorize=FF0000">

Grayscale Filter

NameValueDescription
grayscale true Applies the Imagine Grayscale Effect.

Grayscale Example

This would convert the image to grayscale.

<img src="/img/my-image.jpg?grayscale=true">

Negative Filter

NameValueDescription
negative true Applies the Imagine Negative Effect.

Negative Example

This would covert the image to it's negative form.

<img src="/img/my-image.jpg?negative=true">

Placeholders

A new feature in Munee is being able to use image placeholders for missing images. This is a great feature to have if you are designer just starting a new site and don't necessarily have all of your images available. You can specify a specific image or use one of the numerous image placeholder websites out there like http://placedog.com.

You can also specify different image paths for different placeholder images as well. So if you want a different image for all of your /img/category/* images and another for all of your /img/product/* images, it's very easy to do.

Note: When specifying which images on your site you want to use placeholders for, you can use a wildcard (*) reference.

// Use a specific image for all missing images.
echo \Munee\Dispatcher::run(
    new \Munee\Request(array(
        'image' => array(
            'placeholders' => array(
                '*' => WEBROOT . DS . 'img' . DS . 'placeholder-image.jpg'
            )
        )
    ))
);
/**
 * Use a placeholder for all generic images, a specific placeholder for product images,
 * and a placeholder service for category images.
 * /img/category/missing-image.jpg --> Pulls in a random puppy image
 * /img/product/missing-image.jpg --> Uses /img/missing-product.image.jpg
 * /img/wherever-else/missing-image.jpg --> Uses /img/placeholder-image.jpg
 */
echo \Munee\Dispatcher::run(
    new \Munee\Request(array(
        'image' => array(
            'placeholders' => array(
                '/category/*' => 'http://placedog.com/1024/768',
                '/product/*' => WEBROOT . DS . 'img' . DS . 'missing-product-image.jpg',
                '*' => WEBROOT . DS . 'img' . DS . 'placeholder-image.jpg'
            )
        )
    ))
);