Blur and Desaturation Filter for Images by CMSms

One day I was looking for a VERY convenient way to let the user upload images in CMSMadeSimple with nice blur and desaturation filter without using third party tools. I came up with a very smart solution.

First, you might want to take a look to a real life example: http://www.endlich-urlaub.de/
As you can see, the background image is b/w and has a slight blur on it. The source image for processing is:

imagesource

 

after imageprocessing

Remember! This imageprocessing is done by CMSms only! User uploaded the image via CMSms and the rest is *magic* ;-).
What do we need?

CMSms

      (of course)

GBFilePicker

      (for imageupload)

Supersizer Plugin

    (for imageprocessing)

Now we set this up in our template. Add following code to first line:

{content_module block="backgroundimage" assign="backgroundimage" module="GBFilePicker" label="Hintergrundfoto" dir="images/Fotos/" media_type="image" mode="browser"}

Now you can go to your desired page and edit it. You will mention a nice Imagepicker. Here you upload your image. Save the page.
Next is to generate the manipulated image and assign it to a variable:

{if isset($backgroundimage) && $backgroundimage !=""}{supersizer width=640 protect=false url=true assign="newbackgroundimage" path="uploads/"|cat:$backgroundimage filter="GRAYSCALE,BRIGHTNESS,CONTRAST,GAUSSIAN_BLUR,GAUSSIAN_BLUR,GAUSSIAN_BLUR,GAUSSIAN_BLUR,GAUSSIAN_BLUR,GAUSSIAN_BLUR,GAUSSIAN_BLUR,GAUSSIAN_BLUR,GAUSSIAN_BLUR" arg_1=0,80,-30}{/if}

Alright. As you can see we pass the variable from the imageuploader to the supersizer plugin. And then we apply some effects. First grayscale. Then brightness and contrast. And then some gaussian_blur. Because php (GD Library) just accepts simple gaussian_blur, we need to apply it multiple times. So if you don’t want to blur it, leave all the gaussian blur here.
And finally we can now call the image where ever you want in your template:

{if isset($backgroundimage) && $backgroundimage !=""}<img src="{$newbackgroundimage}"/>{/if}

I use it for the background. To apply it full screen as you can see in the example, I can recommend the jquery supersized script.

Looking for quality CMS Made Simple Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under CMS Made Simple | RSS 2.0

Author Spotlight

Nic Bug

Nic Bug

I am a freelance web designer from Germany and CMS Made Simple is my every day tool. I have been using it since 2007 and I love it because it’s so easy to use. Even my clients understand and use it daily. I also have my own CMS Made Simple project called www.TemplateMadeSimple.com. There, you will find premium templates for made for CMS Made Simple.

One Comment on Blur and Desaturation Filter for Images by CMSms

  1. vps says:

    I think your blog is great. You write about very interesting things. Thanks for all the tips and information.

Leave a Reply

Your email address will not be published. Required fields are marked *


9 × = 27

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>