levineuland/Statamic-Optimus

Optimus is an enhanced version of the Statamic transform tag, adding additional rendering effects to make your images as flexible as possible.

What it does:

Dynamically adjust brightness and contrast
Adds blend modes and filter effects to your images
Add solid color or gradient overlays
Fully compatible with existing Transform tags

Requirements:

Statamic v1.6.7+
IMagick PHP Module v3.1.0+ (Note: Only required for effects and blend modes marked with *)

Basic Installation

Create a folder named optimus in the _addons directory of your Statamic site
Put the pi.optimus.php file into that new directory
Insert a {{ optimus }} tag into a page on your site
Add a src atrribute with a path to your image and use any of the modifiers below

Warning: Complex image processing can increase the load time for your website. This plugin leverages the same approach as the Transform plugin, so after the first time you see the image it will not attempt to regenerate it.

###Test Image

To demonstrate the capabilities of this plugin I've used a cropped version of the Lenna standard test image. Below is the unmodified original for comparison.

Adjustments

These properties allow you to modify properties of the image before any effects or filters are added.

###Brightness Increases or decreases the brightness of the image. Accepts values from -1 to 1.

brightness=0.5

###Contrast Increases or decreases the brightness of the image. Accepts values from -1 to 1.

contrast=0.8

Effects

These properties allow you to modify properties of the image before any effects or filters are added.

###Blur Perform a gaussian blur on the image. Accepts values from 0 to 1.

effect='blur' effect_strength='0.8'

###Pixelate Pixelates the image. Accepts values from 0 to 1.

effect='pixelate' effect_strength='0.3'

###Greyscale Desaturates the image. Adjusting the strength will increase the contrast of the effect.

effect='greyscale' effect_strength='0.3'

###Sepia* Adds a sepia tone to the image.

effect='sepia' effect_strength='0.8'

###Noir* Modifies your image to have a film-noir effect.

effect='noir'

###Nashville* Modifies your image to have a sunny/southern effect.

effect='nashville'

###Gotham* Modifies your image to have a dark, brooding effect.

effect='gotham'

###Lomo* Modifies your image to have a plastic camera effect.

effect='lomo'

###Toaster* Modifies your image to have a smooth/warm effect.

effect='toaster'

###Geocities* Modifies your image to have a look reminiscent of the 90's.

effect='geocities'

###Noise (Overlay)* Adds random noise with an overlay blend mode to your image.

effect='noise_overlay' effect_strength='0.3'

###Noise (Colorburn)* Adds random noise with a colorburn blend mode to your image.

effect='noise_colorburn' effect_strength='0.3'

###Noise (Screen)* Adds random noise with a screen blend mode to your image.

effect='noise_screen' effect_strength='0.3'

###Noise (Multiply)* Adds random noise with a multiply blend mode to your image.

effect='noise_multiply' effect_strength='0.3'

###GIF Bypasses all effects and returns the original, unaltered gif. Allows for animated gifs to pass through the {optimus} tag.

effect='gif'

###SVG Bypasses all effects and returns the raw XML from your SVG image. Allows you to embed an SVG inline similar to a PHP include.

effect='svg'

Blend Modes

Apply a color and a blend mode to your image. Use the blend_opacity to modify the transparency of the color before the blend mode is applied. These methods are similar to effects found in Photoshop, GIMP, Pixelmator, and Acorn.

###Colorize Applies a colorize blend mode to your image.

blend_mode='colorize' blend_color='#FF0000' blend_opacity='1'

###Darken* Applies a darken blend mode to your image

blend_mode='darken' blend_color='#009CFF' blend_opacity='1'

###Multiply* Applies a multiply blend mode to your image.

blend_mode='multiply' blend_color='#FF0000' blend_opacity='1'

###Color Burn* Applies a color burn blend mode to your image.

blend_mode='color_burn' blend_color='#00FFB4' blend_opacity='1'

###Screen* Applies a screen blend mode to your image

blend_mode='screen' blend_color='#FF0000' blend_opacity='1'

###Color Dodge* Applies a color dodge blend mode to your image.

blend_mode='color_dodge' blend_color='#6C6B06' blend_opacity='1'

###Overlay* Applies a overlay mode to your image

blend_mode='overlay' blend_color='#FF0000' blend_opacity='1'

###Hard Light* Applies a hard light blend mode to your image.

blend_mode='hard_light' blend_color='#904545' blend_opacity='1'

###Difference* Applies a difference blend mode to your image.

blend_mode='difference' blend_color='#FF0000' blend_opacity='1'

###Hue* Applies a hue blend mode to your image.

blend_mode='hue' blend_color='#FF0000' blend_opacity='1'

###Exclusion* Applies a exclusion blend mode to your image.

blend_mode='exclusion' blend_color='#FF0000' blend_opacity='1'

Cover Types

Apply varying cover layers to your image. This action happens at the end of the processing stack, allowing you to add a solid cover or gradient to the top of the image.

###Solid Overlays a solid color on top of your image.

cover_type='solid' cover_color='#000000' cover_opacity='0.5'

###Fade Out Overlays a solid color on top of your image.

cover_type='fade_out' cover_color='#000000' cover_opacity='1'

###Fade Out Multiply* Overlays a vertical gradient with a multiply effect. Currently does not support the cover_opacity property.

cover_type='fade_out_multiply' cover_color='#0000FF'

###Fade Out Screen* Overlays a vertical gradient with a screen effect. Currently does not support the cover_opacity property.

cover_type='fade_out_screen' cover_color='#0000FF'

Transform Settings

Optimus supports all existing Transform tag attributues (Based on the version included in Statamic v1.6.7). You can learn more about these settings on the official Statatmic website.

The End

If you like this plugin please star this repository to let me know. Have a feature or effect you'd like to see added? Send me a message on Twitter @levineuland.

Version History

1.1.0 - Added SVG and Noise effects
1.0.1 - Bug Fixes
1.0.0 - Official Release

Author

Created by Levi Neuland.
Twitter: @levineuland
Website: levineuland.com

levineuland / Statamic-Optimus