Fabien Quatravaux

Sometimes, your website design requires to turn pictures in black & white : for example in a gallery display, you can have all thumbnails in grayscale and bring up colors when the mouse is hovering it. 
This plugin will make it possible without the need to manualy create the grayscale variant of each picture.
In your theme’s <code>functions.php</code>, instead of using WP <a href="https://codex.wordpress.org/Function_Reference/add_image_size" rel="nofollow ugc">add_image_size</a> function, use <code>grayscale_add_image_size('custom_size', xxx, yyy, $crop, $grayscale)</code> (with <code>$crop</code> set to <code>true</code> if you want to crop the image, and <code>$grayscale</code> set to <code>true</code> if you want a grayscale version of the image). Then, you can use <a href="https://codex.wordpress.org/Function_Reference/the_post_thumbnail" rel="nofollow ugc">the_post_thumbnail</a> or any thumbnail function to get your grayscale image :
<pre><code>the_post_thumbnail('custom_size-gray')
</code></pre>
A gamma correction is applied automatically to make the black & white pictures look good. From version 1.2, You can tune this gamma correction with the <code>grayscale_gamma_correction</code> filter. Your filter would have to return a float number that will be use as the <code>outputgamma</code> parameter of the <a href="http://php.net/manual/fr/function.imagegammacorrect.php" rel="nofollow ugc">imagegammacorrect</a> function.
<h4>Known bugs</h4>
<ul>
<li>Grayscale images are not generated when the original image size is smaller than the specified thumbnail size.</li>
</ul>

Grayscale

Automatically create grayscale thumbnails for a given image size.

fontethemes

Jesús Amieiro

This plugin converts all images to grayscale and show the colored image on hover.
It supports these browsers:
<ul>
<li><a href="https://www.google.com/chrome/" rel="nofollow ugc">Google Chrome</a>.</li>
<li><a href="https://www.mozilla.org/firefox/" rel="nofollow ugc">Mozilla Firefox</a>.</li>
<li><a href="https://www.apple.com/safari/" rel="nofollow ugc">Apple Safari</a>.</li>
<li><a href="https://www.microsoft.com/en-us/windows/microsoft-edge" rel="nofollow ugc">Microsoft Edge</a>.</li>
<li><a href="https://www.opera.com/" rel="nofollow ugc">Opera</a>.</li>
</ul>
The banner and the icon uses <a href="https://pixabay.com/en/beach-shore-coast-ocean-evening-768421/" rel="nofollow ugc">this image</a>, released under the <a href="https://pixabay.com/en/service/terms/#usage" rel="nofollow ugc">CC0 Public Domain license</a>.

Grayscale Images


The plugin does perfectly what it promises. A very nice feature for photography and portfolio websites.


Works as a charm

This plugin converts all images to grayscale and show the colored image on hover.

Grayscale vs Grayscale Images