0

I made a custom widget for my template, which has an image upload section For the first time, I upload an image, it displays correctly, without any problem, but when I want to change the image, it does not change, it displays the same image as before, that part of the image cannot be updated. Thank you for your guidance

code PHP

<?php
    class widget_author extends WP_Widget {
    
    /**
    * Register widget with WordPress.
    */
    function __construct() {
        parent::__construct(
        'author', // Base ID
        esc_html__( 'widget_test', 'text_domain' ), // Name
        array( 'description' => esc_html__( 'widget test', 'text_domain' ), ) // Args
        );
    }

    /**
    * Front-end display of the widget.
    *
    * @param array $args Widget arguments.
    * @param array $instance Saved values from the database.
    *
    * @see WP_Widget::widget()
    *
    */
    public function widget( $args, $instance ) {
        $upload_image = strip_tags($instance['upload_image']);
    echo $args['before_widget'];
    if ( ! empty( $instance['title'] ) ) {
    echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
    } ?>

    <div class="thumb">
        <?php
        if ( ! empty( $instance['upload_image'] ) ) { ?>
        <img src="<?php echo $upload_image; ?>"></a>
        <?php } ?>
    </div>

        
 
<?php
    echo $args['after_widget'];
    }
    
    /**
    * Back-end widget form.
    *
    * @param array $instance Previously saved values from the database.
    *
    * @see WP_Widget::form()
    *
    */
    public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
    $upload_image = ! empty( $instance['upload_image'] ) ? $instance['upload_image'] : '';
    
    ?>

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

    <!-- Upload Image -->
    <p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'upload_image' ) ); ?>">
    <?php esc_attr_e( 'Image:', 'text_domain' ); ?>
    </label>
    <img class="<?= $this->id ?>_img" src="<?= (!empty($instance['upload_image'])) ? $instance['upload_image'] : ''; ?>" style="margin:0;padding:0;max-width:100%;display:block"/>
    <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'upload_image' ) ); ?>"
    name="<?php echo esc_attr( $this->get_field_name( 'upload_image' ) ); ?>" type="text"
    value="<?= $instance['upload_image'] ?? ''; ?>">
    <button id="<?= $this->id ?>" class="upload_image_button button button-primary" style="margin-top: 5px;">Upload Image</button>
    </p>

    <?php
    }


    /**
    * Sanitize widget form values as they are saved.
    *
    * @param array $new_instance Values just sent to be saved.
    * @param array $old_instance Previously saved values from the database.
    *
    * @return array Updated safe values to be saved.
    * @see WP_Widget::update()
    *
    */
    public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
    $instance['upload_image'] = ( ! empty( $new_instance['upload_image'] ) ) ? sanitize_text_field( $new_instance['upload_image'] ) : '';
    return $instance;
    }


    }

code javascript

    jQuery(document).ready(function ($) {
     
       $(document).on("click", ".upload_image_button", function (e) {
          e.preventDefault();
          var $button = $(this);
 
 
      // Create the media frame.
      var file_frame = wp.media.frames.file_frame = wp.media({
         title: 'Select or upload image',
         library: { // remove these to show all
            type: 'image' // specific mime
         },
         button: {
            text: 'Select'
         },
         multiple: false  // Set to true to allow multiple files to be selected
      });
 
      // When an image is selected, run a callback.
      file_frame.on('select', function () {
         // We set multiple to false so only get one image from the uploader
 
         var attachment = file_frame.state().get('selection').first().toJSON();
 
         $button.siblings('input').val(attachment.url);
 
      });
 
      // Finally, open the modal
      file_frame.open();
   });
});

0

Your Answer

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

Browse other questions tagged or ask your own question.