Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
13 posts Page 1 of 2
Hello, if anybody knows how to make greyscaled images using standard Couch GDlib, please help!

I'm making a website with on-hover coloring images like here: http://www.knlarchitecture.com/ (actually grey image is substituting with colored), and look for a nice solution how to integrate it with Repeatable regions.

In the result the admin uploads only one image in repeatable region, and two images are being created. Or maybe it should be made as an add-on, like:
Code: Select all
<cms:show_repeatable 'images' >
  <img src="<cms:show image />">
  <img src="<cms:greyscale><cms:show image /></cms:greyscale>">
</cms:show_repeatable>

Thanks in advance!
Hi,

I used one time something like that with svg filter so maybe this is useful for you.

Make a file called settogray.svg with this content:
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>


In your css file use something like this:

Code: Select all
img {
    filter: url(settogray.svg#grayscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}


You can add this also to give a hover effect on the image:

Code: Select all
img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.
Hello, Tomarnst,

thanks for the recipe, I tried a lot of methods to make images greyscaled with filter, but all of them don't work in IE 10-11. When JS script is used for that purpose (I really have tried a lot of scripts) the performance is too slow, so the only method working for me is using two images like on the site above.

Thanks anyway!
Hi Musman,

In that case I don't have a quick solution for you. It's for sure possible to use two images maybe someone else has a snippet for this.

If you want to use a JS script that should be able to handle IE maybe this link can help you.http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11-v2/
I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.
Thanks, when some transitions are applied to the images with that script, they freeezzzing, and even more if there are a lot of images on one page :|

I heard that GDlib has the greyscaling feature, or ImageMagik, but I'm not sure
Hi all :)

Please try the following addon -
grayscale.zip
(1.28 KiB) Downloaded 889 times
https://github.com/CouchCMS/Grayscale


Installation
Runs the regular way:
a. Download the attached zip. Expanding it will yield a folder named 'grayscale'.
b. Place this folder in 'couch/addons' folder.
c. Edit 'couch/addons/kfunctions.php' (if not found, rename the 'kfunctions.example.php' to 'kfunctions.php') and
add the following line to it:
Code: Select all
require_once( K_COUCH_DIR.'addons/grayscale/grayscale.php' );

Usage
The installed addon exposes a single tag named 'cms:grayscale'.

IMP: This tag works only with PHP 5 (but that goes without saying now)

Given the full path of an image, as in the following snippet
Code: Select all
<cms:grayscale src='http://www.mysite.com/couch/uploads/image/test.jpg' />

this tag will create a grayscaled version of the specified image (by creating a copy of the image in the same folder and applying the grayscale filter to it) and output this grayscaled image's path.

The proper way to use this tag's output in a template would be in tandem with the HTML 'img' tag - something like this
Code: Select all
<img src="<cms:grayscale src='http://www.mysite.com/couch/uploads/image/test.jpg' />" />

Instead of hardcoding the source image's path, as we did above, we are more likely to provide the output of an editable region of type image as this tag's source.

If, for example, the name of an image type region is 'my_image', this is how we would output the image on the front-end
Code: Select all
<img src="<cms:show my_image />" />

and this is how we create and output the above image's grayscaled version
Code: Select all
<img src="<cms:grayscale my_image />" />

Hope this helps.
Please let me know.

Thanks.
KK, what a perfect job!!
I do really appreciate your help. I tried to install ImageMagick to the server and to connect it with grayscale funtions, but yet failed... But your solution with php addon is so nice and works perfect with jpeg and png!

Also this addon gives a possibility to create addons for modifying images with Negate, Brightness, Colorize etc. filters!
I also have a website with several themes that differ one from another only by colors of images, and now no need to create these images manually, because can use "IMG_FILTER_COLORIZE, 0, 255, 0" (or other colors)!

Thank you very much!
You are welcome, Musman :)
I am glad you found the addon useful.

As you said, the PHP 'imagefilter' function (http://www.php.net/manual/en/function.imagefilter.php) offers several more filters i.e. negate, contrast etc.

Prima-fascie, it appeared to me that only 'grayscale' would be useful as an automated tag (rest seem to be needing manual supervision for the correct effect). From what you stated, perhaps the other effects (at least some of them) could also come in handy.

Can you (and others) please take a look at the PHP link above and let me know which effects could be useful in your work?

Instead of creating a tag for each effect, we'll create a single tag (say named cms:imagefilter) and add the effects to it as parameters.

Do let me know.

Thanks.
Legendary support, Kamran. Just 24 hours from a question to a really cool, fully functioning add-on.

As I looked through the image filter effects available, it seemed that any of them might be useful in some situation. The emboss effect might be just right for a printer, mean removal might suit a rock band. "Contrast" and "smooth" are hard for me to imagine using, but someone might find a use for them.

If you can work out a sensible syntax for including the arguments and provide clear documentation, I see no reason not to make them all available. If you want to economize, I think contrast, smooth, and maybe one of the blurs could be eliminated.

Providing this ability to programmatically apply filters allows designers to very easily create hover effects or indicate state without having to go through tedious graphic manipulations. Great feature!

Prima-fascie, it appeared to me that only 'grayscale' would be useful as an automated tag (rest seem to be needing manual supervision for the correct effect).

I suppose a designer would need to experiment in a testing environment to get the correct effect before actually applying it. I wonder how your add-on manages the created images. If I fiddle with the effect several times before finding the correct values, will that leave a residue of unused images? Or is there a mechanism for clearing them? I guess I could ask the same question in regards to the thumbnail tag.
If I fiddle with the effect several times before finding the correct values, will that leave a residue of unused images?
That is a pertinent point, Tim.

As it stands right now, if the addon finds an existing filtered image it returns that instead of recreating the image. I think we can add a 'dev' mode to the tag so that it always creates a new image thus allowing the designer to experiment with the settings.

Once the desired effect is finalized, the 'dev' mode can be turned off.

Thanks for your inputs :) I am glad you found the work useful.
13 posts Page 1 of 2