image uploader for widget

时间:2020-06-29 作者:Johny

Here is the widget code

<?php 
/********** About author custom widget  *********/
// about me widgets 
register_sidebar( array(
  \'id\'            => \'bounty_about_me\',
  \'name\'          => __( \'Bounty About Me\', \'bounty\' ),
  \'before_widget\' => \'<div class="single-widget protfolio-widget">\',
  \'after_widget\'  => \'</div>\'
) );


function bounty_about_me(){
  register_widget( \'bounty_about_me_widget\' );
}
add_action( \'widgets_init\' , \'bounty_about_me\' );


/********** start class for widgets *********/
class bounty_about_me_widget extends WP_Widget{

  public function __construct(){
    parent::__construct( 
      \'about_me\',
      __( \'Bounty About Me\', \'bounty\' ),
      array(
        \'description\' => __( \'About me widget for bounty theme :)\', \'bounty\' )
      )
    );
  }


  public function widget( $args , $dbvalues ){
    ob_start();
  ?>
    <?php echo $args[\'before_widget\']; ?>

      <img class="img-fluid" src="<?php echo $dbvalues[\'author_img\'] ?>" alt="">

      <a href="#">
        <h4><?php echo $dbvalues[\'title\'] ?></h4>
      </a>
      <p class="p-text">
        <?php echo $dbvalues[\'content\'] ?>
      </p>
      <ul class="social-links">
        <?php if( !empty($dbvalues[\'facebook\']) ) : ?>
          <li><a href="<?php echo esc_url( $dbvalues[\'facebook\'] ); ?>"><i class="fa fa-facebook"></i></a></li>
        <?php endif; ?>
        <!-- end facebook conditon here -->

        <?php if( !empty($dbvalues[\'twitter\']) ) : ?>
          <li><a href="<?php echo esc_url( $dbvalues[\'twitter\'] ); ?>"><i class="fa fa-twitter"></i></a></li>
        <?php endif; ?>
        <!-- end twitter conditon here -->

        <?php if( !empty($dbvalues[\'dribble\']) ) : ?>
          <li><a href="<?php echo esc_url( $dbvalues[\'dribble\'] ); ?>"><i class="fa fa-dribbble"></i></a></li>
        <?php endif; ?>
        <!-- end dribble conditon here -->

        <?php if( !empty($dbvalues[\'behance\']) ) : ?>
          <li><a href="<?php echo esc_url( $dbvalues[\'behance\'] ); ?>"><i class="fa fa-behance"></i></a></li>
        <?php endif; ?>
        <!-- end behance conditon here -->
      </ul>

      <img src="<?php echo get_template_directory_uri();?>/assets/img/sign.png" alt="">
      <?php echo $args[\'after_widget\']; ?>
  <?php 
    echo ob_get_clean();
  }

  public function form( $dbvalues ){
  ?>
    <div>

      <div class="image_show">
        <img src="<?php echo $dbvalues[\'author_img\'] ?>" width="300" height="250" alt="">
      </div>

      <button type="button" class="button button-primary" id="author_info_image">Upload Image</button>
      <input type="text" name="<?php echo $this->get_field_name( \'author_img\' ); ?>" class="widefat image_link" value="<?php echo $dbvalues[\'author_img\'] ?>">

    </div>
    <!-- end author image uploader -->

    <p>
      <label for="<?php echo $this->get_field_id( \'title_id\' ); ?>"><?php _e( \'Name: \', \'bounty\' ); ?></label>
      <input class="widefat" type="text" name="<?php echo $this->get_field_name( \'title\' ); ?>" id="<?php echo $this->get_field_id( \'title_id\' ); ?>" value="<?php echo $dbvalues[\'title\'] ?>">
    </p>
    <!-- end name here -->

    <p>
      <label for="<?php echo $this->get_field_id( \'about_content\' ); ?>"><?php _e(\'About Content: \', \'bounty\'); ?></label>
      <textarea class="widefat" name="<?php echo $this->get_field_name( \'content\' ); ?>" id="<?php echo $this->get_field_id( \'about_content\' ); ?>" cols="30" rows="10">
        <?php echo $dbvalues[\'content\']; ?>
      </textarea>
    </p>
    <!-- end content here -->

    <p>
      <label for="<?php echo $this->get_field_id( \'facebook_id\' ); ?>"><?php _e( \'Facebook URL: \', \'bounty\' ); ?></label>
      <input class="widefat" type="text" name="<?php echo $this->get_field_name( \'facebook\' ); ?>" id="<?php echo $this->get_field_id( \'facebook_id\' ); ?>" value="<?php echo $dbvalues[\'facebook\']; ?>">
    </p>
    <!-- end fb here -->
    <p>
      <label for="<?php echo $this->get_field_id( \'twitter_id\' ); ?>"><?php _e( \'Twitter URL: \', \'bounty\' ); ?></label>
      <input class="widefat" type="text" name="<?php echo $this->get_field_name( \'twitter\' ); ?>" id="<?php echo $this->get_field_id( \'twitter_id\' ); ?>" value="<?php echo $dbvalues[\'twitter\']; ?>">
    </p>
    <!-- end twitter here -->
    <p>
      <label for="<?php echo $this->get_field_id( \'dribble_id\' ); ?>"><?php _e( \'Dribble URL: \', \'bounty\' ); ?></label>
      <input class="widefat" type="text" name="<?php echo $this->get_field_name( \'dribble\' ); ?>" id="<?php echo $this->get_field_id( \'dribble_id\' ); ?>" value="<?php echo $dbvalues[\'dribble\']; ?>">
    </p>
    <!-- end dribble here -->
    <p>
      <label for="<?php echo $this->get_field_id( \'behance_id\' ); ?>"><?php _e( \'Behance URL: \', \'bounty\' ); ?></label>
      <input class="widefat" type="text" name="<?php echo $this->get_field_name( \'behance\' ); ?>" id="<?php echo $this->get_field_id( \'behance_id\' ); ?>" value="<?php echo $dbvalues[\'behance\']; ?>">
    </p>
    <!-- end behance here -->
    <!-- end social media here -->
  <?php  
  }

}
**这是js代码**

// Image uploader for custom widgets  
(function($){

  $(document).ready(function(){
    $(\'button#author_info_image\').live( "click" , function( element ){

      element.preventDefault(); //for page relode
      
      var imageUploader = wp.media({
        \'title\'     : \'Upload Author Image\', //upload image title
        \'button\' : {
          \'text\' : \'Set Author Image\' //button text
        },
        \'multiple\'  : false //multiple image select false or true
      });

      imageUploader.open();

      imageUploader.on( "select" , function(){
        var image = imageUploader.state().get( "selection" ).first().toJSON();

        var link = image.url;

        $( "input.image_link" ).val( link );

        $( ".image_show img" ).attr( \'src\' , link );

      } );

      
    } );
  });

}( jQuery ))

here is the admin_enqueue_scripts file

[![function bounty_admin_scripts(){

  wp_enqueue_media(); //for image upload 
  wp_enqueue_script(\'admin_custom_script\', get_theme_file_uri() . \'/assets/js/custom_admin_script.js\', array( \'jquery\' ) );

}
add_action( \'admin_enqueue_scripts\' , \'bounty_admin_scripts\' );

when i upload an image it\'s already saved. how to fix that ?

1 个回复
最合适的回答,由SO网友:Sabbir Hasan 整理而成

我想你面临的问题是保存按钮不能点击这里。如果我是对的,一行小小的javascript就能解决这个问题。用我的修改javascript的以下部分:

代码已更新**

<小时/>

imageUploader.on( "select" , function(){
    var image = imageUploader.state().get( "selection" ).first().toJSON();
    var link = image.url;
    $( "input.image_link" ).val( link ).trigger("change");
    $( ".image_show img" ).attr( \'src\' , link );
} );