CODEWITHSUNDEEP
javascriptphpjquerywordpresswidget
Kapil Paul
Kapil Paul

Reputation: 446

Image Upload in Custom Widget WP

I am getting a problem in upload image in wp widgets. below the codes in functions.php

class about_me extends WP_Widget{

    public function __construct(){
        parent::__construct('about_me', 'About Me', array(
            'description' => 'This is all about me'
        ));
    }

    public function form($instance){
        $title = $instance['title'];
        $desc = $instance['desc'];
        $photo = $instance['photo'];
    ?>
        <p><label for="<?php echo $this->get_field_id('title'); ?>">Your Name: </label></p>
        <p>
            <input class="widefat" type="text" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" value="<?php echo $title ?>">
        </p>
        <p><label for="<?php echo $this->get_field_id('desc'); ?>">Your Desc: </label></p>
        <p>
            <textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('desc'); ?>" name="<?php echo $this->get_field_name('desc'); ?>"><?php echo $desc ;?></textarea>
        </p>
        <p><label for="<?php echo $this->get_field_id('photo'); ?>">Photo </label></p>
        <p>
            <input class="widefat image1" type="text" name="<?php echo $this->get_field_name('photo'); ?>" id="<?php echo $this->get_field_id('photo'); ?>" value="<?php echo $photo ;?>">
        </p>
        <p>
            <button class="image_upload1 widefat">Select Image</button>
        </p>



    <?php
    }

    public function widget ($args, $instance){
        $title = $instance['title'];
        $desc = $instance['desc'];
        echo $args['before_widget'].$args['before_title'].$title.$args['after_title']."<div class=\"textwidget\">".$desc."</div>".$args['after_widget'];

    }
} // class about_me extends WP_Widget END



add_action('widgets_init', function(){
    register_widget('about_me');
});




/*
photo upload option in widget
*/

function photo_upload_option($hook) {

    if( $hook != 'widgets.php' ) 
        return;
    wp_enqueue_script( 'uploadphoto', get_template_directory_uri() . '/js/upload_image.js', array('jquery', 'media-upload', 'thickbox'), '1.0', 'true' );
    wp_enqueue_script( 'media-upload');
    wp_enqueue_script( 'thickbox');
    wp_enqueue_style ( 'thickbox');

}
add_action('admin_enqueue_scripts', 'photo_upload_option');

Now in upload_image.js

jQuery(document).ready(function($){
$('button.image_upload1').click(function(){
    tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
    return false;

});

window.send_to_editor = function(){
    var imagelink = jQuery('img').attr('src');
    jQuery('.image1').val(imagelink);
    tb_remove();
}

});

This gives me a gravatar link in the text field. But I want here the selected image link.

I tried With that but its not working. may be there is a problem in Jquery. when i removed the "html" variable from the function and after $('img', html) it will show an link of image that is gravatar. 0.gravatar.com/avatar/… but when put the html variable it shows blank. how to fix this

Upvotes: 1

Views: 1981

Answers (1)

Ravi Chandra
Ravi Chandra

Reputation: 141

Use the new wp.media API instead of the old thickbox.

Change the photo_upload_option function as below

/*
photo upload option in widget
*/

function photo_upload_option($hook) {

    if( $hook != 'widgets.php' ) 
        return;

    //enque Javasript Media API
    wp_enqueue_media();

    wp_enqueue_script( 'uploadphoto', get_template_directory_uri() . '/js/upload_image.js', array('jquery'), '1.0', 'true' );

}

Replace the entire upload_image.js with below code

jQuery(function($){

  // Set all variables to be used in scope
  var frame,
      addImgLink = $('.image_upload1'),
      imgIdInput = $('.image1');

  // ADD IMAGE LINK
  addImgLink.on( 'click', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }

    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Image',
      button: {
        text: 'Use this Image'
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });


    // When an image is selected in the media frame...
    frame.on( 'select', function() {

      // Get media attachment details from the frame state
      var attachment = frame.state().get('selection').first().toJSON();

      // Send the attachment URL to our custom image input field.
      //imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

      // Send the attachment id to our input field
      imgIdInput.val( attachment.id );
    });

    // Finally, open the modal on click
    frame.open();
  });

});

Upvotes: 1

Related Questions