Add image field type

The image field type stores media id.
The media manager is limited to type image.
Settings section shows a thumbnail preview.

Signed-off-by: Roi Dayan <roi.dayan@gmail.com>

Author: roidayan

example/oop-example.php

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

src/class.settings-api.php

@@ -366,13 +366,37 @@ function callback_file( $args ) {
         $id    = $args['section']  . '[' . $args['id'] . ']';
         $label = isset( $args['options']['button_label'] ) ? $args['options']['button_label'] : __( 'Choose File' );
 
-        $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  = sprintf( '<input type="text" class="%1$s-text wpsa-url" id="%2$s" name="%2$s" value="%3$s"/>', $size, $id, $value );
         $html  .= '<input type="button" class="button wpsa-browse" value="' . $label . '" />';
         $html  .= $this->get_field_description( $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' );
+        $img = wp_get_attachment_image_src( $value );
+        $img_url = $img ? $img[0] : '';
+
+        $html  = sprintf( '<input type="hidden" class="%1$s-text wpsa-image-id" id="%2$s" name="%2$s" value="%3$s"/>', $size, $id, $value );
+        $html .= '<p class="wpsa-image-preview"><img src="' . $img_url . '" /></p>';
+        $html .= '<input type="button" class="button wpsa-image-browse" value="' . $label . '" />';
+        $html .= $this->get_field_description( $args );
+
+        echo $html;
+    }
+
     /**
      * Displays a password field for a settings field
      *
@@ -583,7 +607,6 @@ function(){
 
                 $('.wpsa-browse').on('click', function (event) {
                     event.preventDefault();
-
                     var self = $(this);
 
                     // Create the media frame.
@@ -593,15 +616,44 @@ function(){
                             text: self.data('uploader_button_text'),
                         },
                         multiple: false
-                    });
+                    })
 
-                    file_frame.on('select', function () {
+                    .on('select', function () {
                         attachment = file_frame.state().get('selection').first().toJSON();
                         self.prev('.wpsa-url').val(attachment.url).change();
-                    });
+                    })
+
+                    // Finally, open the modal
+                    .open();
+                });
+
+                $('.wpsa-image-browse').on('click', function (event) {
+                    event.preventDefault();
+                    var self = $(this);
+
+                    // Create the media frame.
+                    var file_frame = wp.media.frames.file_frame = wp.media({
+                        title: self.data('uploader_title'),
+                        button: {
+                            text: self.data('uploader_button_text'),
+                        },
+                        multiple: false,
+                        library: { type: 'image' }
+                    })
+
+                    .on('select', function () {
+                        attachment = file_frame.state().get('selection').first().toJSON();
+                        var url;
+                        if (attachment.sizes && attachment.sizes.thumbnail)
+                            url = attachment.sizes.thumbnail.url;
+                        else
+                            url = attachment.url;
+                        self.parent().children('.wpsa-image-id').val(attachment.id).change();
+                        self.parent().children('.wpsa-image-preview').children('img').attr('src', url);
+                    })
 
                     // Finally, open the modal
-                    file_frame.open();
+                    .open();
                 });
         });
         </script>