diff --git a/custom_metadata.php b/custom_metadata.php
index 6aa50aa..0e71bb3 100644
--- a/custom_metadata.php
+++ b/custom_metadata.php
@@ -51,7 +51,7 @@ class custom_metadata_manager {
var $_column_types = array( 'posts', 'pages', 'users', 'comments' );
// field types
- var $_field_types = array( 'text', 'textarea', 'password', 'number', 'email', 'telephone', 'checkbox', 'radio', 'select', 'multi_select', 'upload', 'wysiwyg', 'datepicker', 'datetimepicker', 'timepicker', 'colorpicker', 'taxonomy_select', 'taxonomy_radio', 'taxonomy_checkbox', 'link' );
+ var $_field_types = array( 'text', 'textarea', 'password', 'number', 'email', 'telephone', 'checkbox', 'radio', 'select', 'multi_select', 'upload', 'wysiwyg', 'datepicker', 'datetimepicker', 'timepicker', 'colorpicker', 'taxonomy_select', 'taxonomy_radio', 'taxonomy_checkbox', 'link', 'thumbnail' );
// field types that are cloneable
var $_cloneable_field_types = array( 'text', 'textarea', 'upload', 'password', 'number', 'email', 'tel' );
@@ -160,10 +160,10 @@ function init_metadata() {
// Handle actions related to users
if ( $object_type == 'user' ) {
global $user_id;
-
+
if ( empty( $user_id ) )
$user_id = get_current_user_id();
-
+
// Editing another user's profile
add_action( 'edit_user_profile', array( $this, 'add_user_metadata_groups' ) );
add_action( 'edit_user_profile_update', array( $this, 'save_user_metadata' ) );
@@ -297,6 +297,7 @@ function add_metadata_field( $field_slug, $object_types = array( 'post' ), $args
'select2' => false, // applies select2.js (work on select and multi select field types)
'min' => false, // a minimum value (for number field only)
'max' => false, // a maximum value (for number field only)
+ 'preview' => 'thumbnail', // type of preview in admin area ( for thumbnail field type only)
'upload_modal_title' => __( 'Choose a file', 'custom-metadata' ), // upload modal title (for upload field only)
'upload_modal_button_text' => __( 'Select this file', 'custom-metadata' ), // upload modal button text (for upload field only)
'upload_clear_button_text' => __( 'Clear', 'custom-metadata' ), // upload clear field text (for upload field only)
@@ -1237,6 +1238,35 @@ function _display_metadata_field( $field_slug, $field, $object_type, $object_id,
}
echo '';
break;
+ case 'thumbnail':
+ $image_id = ! empty( $v )? intval( $v ) : '' ;
+ $set_css = ( !empty( $image_id ) ) ? 'display:none;' : '';
+ $reset_css = ( empty( $image_id ) ) ? 'display:none;' : '';
+ $preview = in_array( $field->preview, array( 'thumbnail', 'medium', 'full' ) ) ? $field->preview : 'thumbnail';
+
+
+ echo '';
+
+ // Set image link
+ printf( 'Set %s', esc_attr( $field->label ), esc_attr( $field_slug ), esc_attr( $set_css ), esc_attr( $preview ) ,esc_attr( $field->label ) );
+
+ // Image
+ echo '
';
+ if ( !empty( $image_id ) ) {
+ echo wp_get_attachment_image( $image_id, $preview, false, array( 'class' => 'custom-metadata-media-image' ) );
+ } else {
+ echo '![]()
';
+ }
+
+ // Image ID
+ printf( '', esc_attr( $field_slug ), esc_attr( $image_id ) );
+ echo '
';
+
+ // Remove image link
+ printf( 'Remove %s', esc_attr( $field->label ), esc_attr( $reset_css ), esc_attr( $field->label ) );
+ echo '
';
+
+ break;
case 'datepicker' :
$datepicker_value = ! empty( $v ) ? esc_attr( date( 'm/d/Y', $v ) ) : '';
printf( '', esc_attr( $field_id ), $datepicker_value, $readonly_str, $placeholder_str );
diff --git a/custom_metadata_examples.php b/custom_metadata_examples.php
index 21e620f..f22ea3a 100644
--- a/custom_metadata_examples.php
+++ b/custom_metadata_examples.php
@@ -207,7 +207,15 @@ function x_init_custom_fields() {
),
'label' => 'Multi Select field',
) );
-
+
+ // adds a thumbnail control to the first group
+ x_add_metadata_field( 'x_thumbnail', 'x_test', array(
+ 'group' => 'x_metaBox1',
+ 'field_type' => 'thumbnail',
+ 'preview' => 'full', // possible values: thumbnail, medium, full [ default: thumbnail ]
+ 'label' => 'Thumbnail Selector',
+ ) );
+
// adds a multi-select field with chosen in the first group
// note: `select2` and `chosen` args do the exact same (add select2)
// but for the purposes of testing, we're using chosen here
diff --git a/js/custom-metadata-manager.js b/js/custom-metadata-manager.js
index 3445a1b..a23aae7 100644
--- a/js/custom-metadata-manager.js
+++ b/js/custom-metadata-manager.js
@@ -68,7 +68,7 @@
$div.attr( 'id', $field_id + '-1' ).attr( 'class', $field_id );
$.each( $field_inputs, function( k, field_input ){
-
+
var $field_input = $( field_input );
if ( ! _.isEmpty( $field_input.attr( 'id' ) ) ) {
@@ -195,10 +195,76 @@
$custom_metadata_field.find( '.custom-metadata-select2' ).each(function(index) {
$(this).select2({ placeholder : $(this).attr('data-placeholder'), allowClear : true });
});
-
+
// init the color picker fields
$( '.colorpicker' ).find( 'input' ).wpColorPicker();
-
+
+ // thumbnail fields
+ $(document).on( 'click.set-custom-media-container', '.add-custom-metadata-media', function(event){
+
+ var options, attachment;
+
+ event.preventDefault();
+
+ $self = $(event.target);
+ $div = $self.closest('span.set-custom-media-container');
+
+ var txt_title = $self.attr('title');
+
+
+
+ var img_modal = wp.media({
+ title: txt_title,
+ multiple: false,
+ library: { type: 'image' },
+ button: { text: txt_title }
+ });
+ // set up select handler
+ img_modal.on( 'select' , function() {
+
+ selection = img_modal.state().get('selection');
+
+ if ( ! selection ) return;
+
+ $div.find('.add-custom-metadata-media').hide();
+
+ // loop through the selected files
+ selection.each( function( attachment ) {
+
+ var src = attachment.attributes.sizes.thumbnail.url;
+ var preview = $div.find('.add-custom-metadata-media').first().attr( 'data-preview' );
+ if( attachment.attributes.sizes[preview] ) {
+ src = attachment.attributes.sizes[preview].url;
+ }
+ var id = attachment.id;
+
+ $div.find('.custom-metadata-media-image').prop('src', src).show();
+ $div.find('.custom-metadata-media-id').val(id);
+ } );
+
+ $div.find('.remove-custom-metadata-media').show();
+ });
+
+ img_modal.open();
+
+ });
+
+ //thumbnail remove
+ $('.remove-custom-metadata-media').on( 'click', function( event ) {
+ event.preventDefault();
+
+ $self = $(event.target);
+ $div = $self.closest('span.set-custom-media-container');
+
+ $div.find('.remove-custom-metadata-media').hide();
+
+ $div.find('.custom-metadata-media-image').prop('src', '').hide();
+ $div.find('.custom-metadata-media-id').val('');
+
+ $div.find('.add-custom-metadata-media').show();
+ });
+
+
});
})(jQuery);
\ No newline at end of file