Add image field type

Works the same as file field type but with a preview of the image.

Signed-off-by: Roi Dayan <[email protected]>

Author: roidayan

example/oop-example.php

@@ -129,7 +129,7 @@ function get_settings_fields() {
                     'name'    => 'file',
                     'label'   => __( 'File', 'wedevs' ),
                     'desc'    => __( 'File description', 'wedevs' ),
-                    'type'    => 'file',
+                    'type'    => 'image',
                     'default' => '',
                     'options' => array(
                         'button_label' => 'Choose Image'

src/class.settings-api.php

@@ -358,6 +358,28 @@ function callback_file( $args ) {
         echo $html;
     }
 
+    /**
+     * Displays an image upload field with a preview
+     *
+     * @param array   $args settings field args
+     */
+    function callback_image( $args ) {
+
+        $value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+        $size = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
+        $id = $args['section']  . '[' . $args['id'] . ']';
+        $label = isset( $args['options']['button_label'] ) ?
+                        $args['options']['button_label'] :
+                        __( 'Choose Image' );
+
+        $html  = sprintf( '<input type="text" class="%1$s-text wpsa-url" id="%2$s[%3$s]" name="%2$s[%3$s]" value="%4$s"/>', $size, $args['section'], $args['id'], $value );
+        $html .= '<input type="button" class="button wpsa-browse" value="' . $label . '" />';
+        $html .= $this->get_field_description( $args );
+        $html .= '<p class="wpsa-image-preview"><img src=""/></p>';
+
+        echo $html;
+    }
+
     /**
      * Displays a password field for a settings field
      *
@@ -574,12 +596,17 @@ function(){
                     file_frame.on('select', function () {
                         attachment = file_frame.state().get('selection').first().toJSON();
 
-                        self.prev('.wpsa-url').val(attachment.url);
+                        self.prev('.wpsa-url').val(attachment.url).change();
                     });
 
                     // Finally, open the modal
                     file_frame.open();
                 });
+
+                $('input.wpsa-url').on( 'change keyup paste input', (function() {
+                    var self = $(this);
+                    self.next().next().next( '.wpsa-image-preview' ).children( 'img' ).attr( 'src', self.val() );
+                })).change();
         });
         </script>