0

I'm looking into running Color Thief against the featured image whenever it is set or updated. I can't seem to find any way on how to hook into this event.

Currently I'm doing what I feel is a bit hacky

jQuery(document).on('click', '#__wp-uploader-id-2 .media-toolbar-primary', function(event){

  setTimeout(function() {

    var image = new Image();
    image.src = 'image.jpg';

    var colorThief = new ColorThief();
    var dominantColor = colorThief.getColor(image);

    console.log(dominantColor);
  }, 100);

});

There must be a better way?

I've been looking into making a copy of the featured image meta box, but feels very cumbersome.

function pom_image_box() {
  remove_meta_box('postimagediv', 'artist', 'side');
  add_meta_box('postimagediv', __('POM Image'), __NAMESPACE__ .'\\pom_post_thumbnail_meta_box', 'artist', 'normal', 'high');
}
add_action('do_meta_boxes', __NAMESPACE__ .'\\pom_image_box');


function pom_post_thumbnail_meta_box( $post ) {
  $thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
  echo _pom_wp_post_thumbnail_html( $thumbnail_id, $post->ID );
}



function _pom_wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
  global $content_width, $_wp_additional_image_sizes;

  $post = get_post( $post );

  $upload_iframe_src = esc_url( get_upload_iframe_src('image', $post->ID ) );
  $set_thumbnail_link = '<p class="hide-if-no-js"><a title="' . esc_attr__( 'Set featured image' ) . '" href="%s" id="set-post-thumbnail" class="thickbox">%s</a></p>';
  $content = sprintf( $set_thumbnail_link, $upload_iframe_src, esc_html__( 'Set featured image' ) );

  if ( $thumbnail_id && get_post( $thumbnail_id ) ) {
    $old_content_width = $content_width;
    $content_width = 266;
    if ( !isset( $_wp_additional_image_sizes['post-thumbnail'] ) )
      $thumbnail_html = wp_get_attachment_image( $thumbnail_id, array( $content_width, $content_width ) );
    else
      $thumbnail_html = wp_get_attachment_image( $thumbnail_id, 'post-thumbnail' );
    if ( !empty( $thumbnail_html ) ) {
      $ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
      $content = sprintf( $set_thumbnail_link, $upload_iframe_src, $thumbnail_html );
      $content .= '<p class="hide-if-no-js"><a href="#" id="remove-post-thumbnail" onclick="WPRemoveThumbnail(\'' . $ajax_nonce . '\');return false;">' . esc_html__( 'Remove featured image' ) . '</a></p>';
    }
    $content_width = $old_content_width;
  }

  /**
   * Filter the admin post thumbnail HTML markup to return.
   *
   * @since 2.9.0
   *
   * @param string $content Admin post thumbnail HTML markup.
   * @param int    $post_id Post ID.
   */
  return apply_filters( 'admin_post_thumbnail_html', $content, $post->ID );
}

Not sure where I can go from here, I haven't found exactly where wpsetAsThumbnail is called. And even if I do. I tried modifying set-post-thumbnail.js, but my console.log's did not show up.

I also tried https://wordpress.stackexchange.com/a/74596/2830 (with updated code since it's changed since 2012) But that breaks the featured image functionality altogether.

1

You could use .ajaxComplete, as mentioned by @onetrickpony in https://wordpress.stackexchange.com/a/36597/57034, except do it globally on document, as mentioned in http://api.jquery.com/ajaxcomplete/, then filter based on action:

add_action( 'admin_print_footer_scripts', function () {
    ?>
    <script type="text/javascript">
    jQuery(function ($) {
        $(document).ajaxComplete(function (event, xhr, settings) {
            var match;
            if (typeof settings.data === 'string'
            && /action=set-post-thumbnail/.test(settings.data)
            && xhr.responseJSON && typeof xhr.responseJSON.data === 'string') {
                match = /<img[^>]+src="([^"]+)"/.exec(xhr.responseJSON.data);
                if (match !== null) {
                    var image = new Image();
                    $(image).load(function () {
                        var colorThief = new ColorThief();
                        var dominantColor = colorThief.getColor(image);

                        console.log(dominantColor);
                    });
                    image.src = match[1];
                }
            }
        });
    });
    </script>
    <?php
} );
1
  • 2
    With WordPress 4.9.8, I cannot catch the set-post-thumbnail action, but get get-post-thumbnail-html which actually posts the image id. Could that be a change in WordPress? – philippe_b Nov 5 '18 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.