— my toolbox is filled with perl, javascript, css and html

thorsen.pm

Cloudinary examples for applying effects to your images

Wednesday, July 11, 2012

    So yesterday I blogged about the basic functionality about Cloudinary, but there are so much more than scaling images that you can do.

    Note: If you use other programming languages as well, you can read about the same examples from Cloudinary’s own blog.

    Note: The examples below is based on the Mojolicious helpers provided from Mojolicious::Plugin::Cloudinary, but you can also use the Cloudinary module directly if you are not inside a mojo template.

    Effects

    You can apply a variety of effects to your images using the “effect” argument to cloudinary_image() or url_for(). Here is the original image:

    %= cloudinary_image 'horses.jpg'; # no effects
    
    horses.jpg
    Original image

    The following examples modify the color saturation of the image. A negative saturation value will reduce saturation and a positive will increase it:

    %= cloudinary_image 'horses.jpg', { effect => 'saturation:-70' }
    %= cloudinary_image 'horses.jpg', { effect => 'saturation:70' }
    
    horses.jpg
    With saturation:-70 effect
    horses.jpg
    With saturation:70 effect

    You can also change the brightness or apply an sepia effect:

    %= cloudinary_image 'horses.jpg', { effect => 'brightness:-50' }
    %= cloudinary_image 'horses.jpg', { effect => 'sepia:50' }
    
    horses.jpg
    With brightness:-50 effect
    horses.jpg
    With sepia:50 effect

    They even added an “oil-paint” effect.

    %= cloudinary_image 'horses.jpg', { effect => 'oil_paint' }
    
    horses.jpg
    With oil_paint effect

    Chained Transformations

    Cloudinary also provide other transformations and they can all be chained. Here is an example with Arianna Huffington’s Facebok profile picture:

    %= cloudinary_image 'AriannaHuffington.png', { type => 'facebook' }
    %= cloudinary_image 'AriannaHuffington.png', { type => 'facebook', width => 150, height => 150, crop => 'thumb', gravity => 'face', radius => 20, effect => 'sepia' }
    
    AriannaHuffington.png
    Original
    AriannaHuffington.png
    Chained effects

    Note: Unfortunately, my module does not yet support “angle” and “overlay” as shown in the Cloudinary blog. (Will either take pull request or implement it on request).

    Tweaking a web site’s color scheme

    Cloudinary provides the “hue” effect to change the color scheme of an image. This can be quite useful when you tweak the CSS color scheme and don’t want to jump into gimp or photoshop to make changes to the background image or other assets included in your design.

    This example use the background image from the Cloudinary web site:

    %= cloudinary_image 'site_bg.jpg';
    %= cloudinary_image 'site_bg.jpg', { effect => 'hue:40' }
    
    site_bg.jpg
    Original
    site_bg.jpg
    With hue:40 effect

    Want to try out the module? Complete API is documented on metacpan:

    blog comments powered by Disqus