grayscale filter #48

Closed
pdewouters opened this Issue Jan 9, 2013 · 25 comments

Projects

None yet

2 participants

@pdewouters
Member

Hi

can I use this to generate black and white thumbnails?

@joehoyle
Member
joehoyle commented Jan 9, 2013

Yes that would certainly be possible, to do this you would need to hook into the wpthumb_image_post hook like so:

add_filter( 'wpthumb_image_post', function( WP_Image_Editor $editor, $args ) {

    if ( ! is_a( $editor, 'WP_Image_Editor_GD' ) || empty( $args['greyscale'] ) )
        return $editor;

    imagefilter( $editor->get_image(), IMG_FILTER_GRAYSCALE );

    return $editor;

}, 10, 2 );

You would then do:

the_post_thumbnail( 'width=150&height=150&crop=1&greyscale=1' );

The above example uses GD, so will not work if you are using Image Magick on your server

@pdewouters
Member

does WP_Image_editor have a get_image() method? I've been looking for that

@joehoyle
Member
joehoyle commented Jan 9, 2013

No it does not, however WP Thumb subclasses WP_Image_Editor_GD and WP_Image_Editor_IMagick and passes those to the wpthumb_image_post hook.

So though I am technically checking is_a( $editor, 'WP_Image_Editor_GD' ) it will actually be a WPThumb_Image_Editor_GD that has that method.

@pdewouters
Member

you can make some money BTW as I asked this on WP Questions
http://www.wpquestions.com/question/showChrono/id/7830

@pdewouters
Member

what I want to do is this
http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/

so I'll be generating 2 images and revealing the colored version on hover.
how do I use the filter on a specific thumbnail size image only?

@joehoyle
Member
joehoyle commented Jan 9, 2013

You have 2 options, you can pass size parameters and greyscale=1 to the_post_thumnail function:

the_post_thumbnail( 'width=150&height=150&crop=1&greyscale=1' );

Or you can use a new image size thumbnail-bw and supply the arguments for that size via the wpthumb_create_args_from_size hook:

add_filter( 'wpthumb_create_args_from_size', function( $size ) {
    if ( $size === 'thumbnail-bw' )
        return array( 'width' => get_option('thumbnail_size_w'), 'height' => get_option('thumbnail_size_h'), 'greyscale' => true );

    return $size;
}
@pdewouters
Member

actually it should be easier as I'm getting a url from a custom field, but is this the correct syntax?

echo wpthumb( $img_url, 'greyscale=1' ); 
@pdewouters
Member

so the filter 'wpthumb_image_post' isn't running with the call to wpthumb

@joehoyle
Member
joehoyle commented Jan 9, 2013

I think you will need to provide a width/height to wpthumb().

echo wpthumb( $img_url, 'width=100&height=100&greyscale=1' ); 

We should probably fix that if that is the issue, can you test?

@pdewouters
Member

so I added the filter in functions.php

add_filter( 'wpthumb_image_post', 'pdw_bij_add_greyscale_filter', 10, 2 );
    function pdw_bij_add_greyscale_filter( WP_Image_Editor $editor, $args ) {
    if ( ! is_a( $editor, 'WP_Image_Editor_GD' ) || empty( $args['greyscale'] ) )
        return $editor;
    imagefilter( $editor->get_image(), IMG_FILTER_GRAYSCALE );
    return $editor;
    }

then I call wpthumb on the image (it's a custom field), but it returns the color image still

<img class="grayscale" src="<?php echo wpthumb( $img_url, 'width=150&height=150&greyscale=1' ); ?>" alt="<?php echo $logo['logo_image']['title']; ?>" />
@joehoyle
Member
joehoyle commented Jan 9, 2013

can you paste me the value of $img_url so I can test from my side?

Thanks

@pdewouters
Member
    http://bijma.dev/wp-content/uploads/cache/2013/01/Logo_ANWB1/-936147168.jpg

<img class="grayscale" src="http://bijma.dev/wp-content/uploads/cache/2013/01/-372622547/1156398196.jpg" alt="Logo Philips_m">
@pdewouters
Member

Appreciate your help on this BTW Joe, thanks
let me know if you need more info

@joehoyle
Member
joehoyle commented Jan 9, 2013

Hi @pdewouters,

I should have made it clearer before, I wanted a link to the image you are trying to resize so I can download it and try from my end, you have pasted a url from your development setup.

@pdewouters
Member

Aegon-Logo

@pdewouters
Member

lol, here's an example of one of the images, does that work?

@joehoyle
Member
joehoyle commented Jan 9, 2013

Thanks, I'll give it a go

@joehoyle
Member
joehoyle commented Jan 9, 2013

Hmm so the above image worked using your code on my WordPress install, could you check what Image_Editor you are being passed like so:

add_filter( 'wpthumb_image_post', 'pdw_bij_add_greyscale_filter', 10, 2 );

function pdw_bij_add_greyscale_filter( WP_Image_Editor $editor, $args ) {
    var_dump( get_class( $editor ) );
    if ( ! is_a( $editor, 'WP_Image_Editor_GD' ) || empty( $args['greyscale'] ) )
        return $editor;

    imagefilter( $editor->get_image(), IMG_FILTER_GRAYSCALE );

    return $editor;
}
@pdewouters
Member

it doesn't seem like the filter is being hooked into. I'm using xdebug and set a breakpoint inside it but it doesn't break and the var_dump doesn't output anything

@joehoyle
Member
joehoyle commented Jan 9, 2013

Ok, you should remove your uploads/cache/ folder as the code isn;t being hit as the cache image probably already exists, alternatively you can fore a cache refresh by doing:

<?php echo wpthumb( $img_url, 'width=150&height=150&greyscale=1&cache=0' ); ?>
@pdewouters
Member

I deleted the cache folder and used the cache=0, but it's still not using the filter hook. I did a search for that filter in the plugin but it doesn't seem to be there

@joehoyle
Member
joehoyle commented Jan 9, 2013

Right, that explains a lot. I presume you have installed the plugin from WordPress Extend, you should instead download the latest copy from github here: https://github.com/humanmade/WPThumb/archive/master.zip (required wordpress 3.5)

Sorry about the confusion

@pdewouters
Member

w00t! that did the trick!. thanks I owe you one. If you'd like you can post your answer on wpquestions and you'll get some cash. I'll need to divide it between you and someone who debugged some js for me.
http://www.wpquestions.com/question/showChrono/id/7830

@pdewouters
Member

are you on Twitter?

@joehoyle
Member
joehoyle commented Jan 9, 2013

Good hear it! Need to get the new version up on extend asap.

Don't worry about wpquestions for me, I am glad to help.

Twitter: @joe_hoyle

@pdewouters pdewouters closed this Jan 9, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment