filter

Så gör du gråskaliga bilder cross-browser med CSS

Har ni som jag svurit över att det inte funnits något smidigt sätt att göra svartvita / gråskaliga bilder utan att behöva skapa dom i Photoshop?
Här har ni lösningen som är cross-browser säker nere till IE6 vilket är mer än bra.
Jag skapade här ett exempel med hover-effekt och lade även på CSS3 transition (nej, det är inte cross-browser) för en mjukare övergång.

Hoppas det kan spara hår och tid för någon annan.

jarnesjo-grancanariajarnesjo-grancanaria

img.gray { 
    filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

    -webkit-transition: all .5s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

img.gray:hover { 
    filter: url("data:image/svg+xml;utf8,#grayscale");
    -webkit-filter: grayscale(0%);
}

jsFiddle: http://jsfiddle.net/jarnesjo/ys2Lf/5/
jsFiddle resultat: http://jsfiddle.net/jarnesjo/ys2Lf/5/embedded/result/

How to add featured image to RSS in WordPress

Since I updated my blog with this new theme I started to use WordPress post formats.
But I found a problem when I used the post format Image or if I used a featured image as a part of the post. Write about the picture or just posted an image without any text to post. Everything looked fine until I checked the RSS. It just got the headline and nothing more or some text chatting about a picture doesn’t exist.

So here you got the solution:

// Add this in the functions.php
if ( !function_exists( 'add_featured_image_to_rss' ) ) {
	function add_featured_image_to_rss( $content ) {
		global $post;
		if ( has_post_thumbnail( $post->ID ) ){
			$content = get_the_post_thumbnail( $post->ID, 'large' ) . $content;
		}
		return $content;
	}
}
add_filter( 'the_excerpt_rss', 'add_featured_image_to_rss' );
add_filter( 'the_content_feed', 'add_featured_image_to_rss' );