👌 IMPROVE: Updated settings image upload modal

Author: robertdevore

admin/class-clwc-admin.php

@@ -81,6 +81,8 @@ public function enqueue_scripts( $hook_suffix ) {
             return;
         }
 
+        wp_enqueue_media();
+
         wp_enqueue_script(
             'clwc-loyalty-ajax',
             plugin_dir_url( __FILE__ ) . 'js/clwc-admin.js',

admin/clwc-admin-settings.php

@@ -282,20 +282,39 @@ function clwc_wysiwyg_field( $args ) {
  * @return void
  */
 function clwc_image_upload_field( $args ) {
-    $image = wp_get_attachment_url( intval( $args['value'] ) );
+    $image_id = intval( $args['value'] );
+    $image_url = $image_id ? wp_get_attachment_url( $image_id ) : '';
+
+    // Hidden field to store the image ID.
     printf(
-        '<input type="hidden" name="%1$s" value="%2$s" />',
+        '<input type="hidden" name="%1$s" value="%2$s" class="clwc-image-id" />',
         esc_attr( $args['name'] ),
-        esc_attr( $args['value'] )
-    );
-    printf(
-        '<img src="%s" style="max-width:150px;display:block;margin-top:10px;" /><br />',
-        esc_url( $image )
+        esc_attr( $image_id )
     );
+
+    // Image preview (only displayed if an image is set).
+    if ( $image_url ) {
+        printf(
+            '<img src="%s" style="max-width:150px;display:block;margin-top:10px;" class="clwc-image-preview" />',
+            esc_url( $image_url )
+        );
+    } else {
+        // Placeholder (or hidden image preview if no image is set).
+        echo '<img src="" style="max-width:150px;display:none;margin-top:10px;" class="clwc-image-preview" />';
+    }
+
+    // Button to open media uploader.
     printf(
         '<button type="button" class="button clwc-upload-image-button">%s</button>',
         esc_html__( 'Upload Image', 'customer-loyalty-for-woocommerce' )
     );
+
+    // Button to remove image.
+    printf(
+        '<button type="button" class="button clwc-remove-image-button" style="display:%s;">%s</button>',
+        $image_url ? 'inline-block' : 'none',
+        esc_html__( 'Remove Image', 'customer-loyalty-for-woocommerce' )
+    );
 }
 
 /**

admin/js/clwc-admin.js

@@ -39,4 +39,36 @@ jQuery(document).ready(function($) {
             }
         });
     });
+
+    var file_frame;
+
+    $(document).on('click', '.clwc-upload-image-button', function(e) {
+        e.preventDefault();
+
+        // If the media frame already exists, reopen it
+        if (file_frame) {
+            file_frame.open();
+            return;
+        }
+
+        // Create a new media frame
+        file_frame = wp.media.frames.file_frame = wp.media({
+            title: 'Select or Upload an Image',
+            button: {
+                text: 'Use this image',
+            },
+            multiple: false // Set to true if you want multiple files
+        });
+
+        // When an image is selected, run a callback
+        file_frame.on('select', function() {
+            var attachment = file_frame.state().get('selection').first().toJSON();
+            $('.clwc-upload-image-button').prev('input[type="hidden"]').val(attachment.id);
+            $('.clwc-upload-image-button').prev().prev('img').attr('src', attachment.url).show();
+        });
+
+        // Finally, open the modal
+        file_frame.open();
+    });
+
 });

customer-loyalty-for-woocommerce.php

@@ -44,7 +44,7 @@
 function clwc_create_loyalty_log_table() {
     global $wpdb;
 
-    // Define table name with the WordPress table prefix.
+    // Define table name with the WordPress® table prefix.
     $table_name = $wpdb->prefix . 'clwc_loyalty_log';
 
     // Set the database character set and collation for security.