How to update the widget form when the image is selected?

2 Views

I have created a custom widget. There are 2 things that I can’t do:

  1. I need to open the new media uploader window when the button “Select The Image” is clicked.

  2. When the image is selected from the media uploader I need to show the image in widget form. Only when I click on “Save” button, the image appears.

    <?php
/*
Plugin Name: Basic Image Widget
*/

class pippin_simple_authors_widget extends WP_Widget {

    /** constructor */
    function pippin_simple_authors_widget() {
        parent::WP_Widget(false, $name = 'Basic Image Widget');
    }

    /** @see WP_Widget::widget */
    function widget($args, $instance) {
        extract( $args );

        $title = apply_filters('widget_title', $instance['title']);
        $description = $instance['description'];    

        if(!$size)
            $size = 40;
        ?>

        <li>
            <div class="cat-img-wrap">
                <img src="<?php echo esc_url($instance['image_uri']); ?>" />
            </div>
            <div class="cat-text-wrap">
                <h3><?php echo $title; ?></h3>
                <?php                        
                echo $description; 
                ?>
            </div>
        </li>        

        <?php
    }

    /** @see WP_Widget::update */
    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['description'] = strip_tags($new_instance['description']);    
        $instance['image_uri'] = strip_tags($new_instance['image_uri']);        
        return $instance;
    }

    /** @see WP_Widget::form */
    function form($instance) {  

        $title = esc_attr($instance['title']);
        $description =  esc_attr($instance['description']);     

        ?>
         <p>
          <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </p>

         <p>
          <label for="<?php echo $this->get_field_id('description'); ?>"><?php _e('Description:'); ?></label>
          <textarea class="widefat" id="<?php echo $this->get_field_id('description'); ?>" name="<?php echo $this->get_field_name('description'); ?>"><?php echo $description; ?></textarea>     
        </p>
        <p>
        <?php if($instance['image_uri']): ?>
        <img src="<?php echo esc_url($instance['image_uri']); ?>" />
        <?php endif; ?>      
      <input type="text" class="img" name="<?php echo $this->get_field_name('image_uri'); ?>" id="<?php echo $this->get_field_id('image_uri'); ?>" value="<?php echo $instance['image_uri']; ?>" style="display:none;" />
      <input type="button" class="select-img" value="Select The Image" />
    </p>


        <?php
    }

} // class utopian_recent_posts
add_action('widgets_init', create_function('', 'return register_widget("pippin_simple_authors_widget");'));


function hrw_enqueue()
{
  wp_enqueue_style('thickbox');
  wp_enqueue_script('media-upload');
  wp_enqueue_script('thickbox');
  // moved the js to an external file, you may want to change the path
  wp_enqueue_script('hrw', '/wp-content/plugins/basic-image-widget/script.js', null, null, true);
}
add_action('admin_enqueue_scripts', 'hrw_enqueue');

script.js

var image_field;
jQuery(function($){
  $(document).on('click', 'input.select-img', function(evt){
    image_field = $(this).siblings('.img');
    tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
    return false;
  });
  window.send_to_editor = function(html) {
    imgurl = $('img', html).attr('src');
    image_field.val(imgurl);
    tb_remove();
  }
});
Post Views: 2

Related posts