php - image uploader for widget

IT技术

更新时间：2025-03-180

admin管理员组
文章数量:1333430

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  
  }

}

**here is the js code **

// 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' );

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  
  }

}

**here is the js code **

// 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' );

Share Improve this question asked Jun 29, 2020 at 14:55 Johny 35 bronze badges

What's the issue? Please explain that too. – Sabbir Hasan Commented Jun 29, 2020 at 14:56
when i upload an image it's automatically saved. that't the problem. – Johny Commented Jun 29, 2020 at 14:58
It's saved or disabled? – Sabbir Hasan Commented Jun 29, 2020 at 14:58
it's saved already. but when i give a space in the link or other text it's give me the save option. but i want the save button when i upload image – Johny Commented Jun 29, 2020 at 15:02
Check my answer bellow. – Sabbir Hasan Commented Jun 29, 2020 at 15:04

| Show 3 more comments

1 Answer 1

Sorted by: Reset to default 0

I think you facing issue of save button not clickable here. If I'm right about that a tiny line of javascript will solve the problem. Modify following portion of your javascript with mine:

CODE UPDATED**

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 );
} );

本文标签： phpimage uploader for widget

版权声明：本文标题：php - image uploader for widget 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742309000a2450489.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

php - image uploader for widget

1 Answer 1

更多相关文章