From 68321c05fcada6eebfe0631ebaf35c16df026390 Mon Sep 17 00:00:00 2001 From: imranglobal Date: Mon, 30 Jun 2014 15:18:21 -0400 Subject: [PATCH 1/4] * Added ability for featured image --- custom_metadata.php | 33 ++++++++++++++-- js/custom-metadata-manager.js | 72 ++++++++++++++++++++++++++++++++--- 2 files changed, 96 insertions(+), 9 deletions(-) diff --git a/custom_metadata.php b/custom_metadata.php index 6aa50aa..9eb88a5 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', 'featured-image' ); // 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' ) ); @@ -1237,6 +1237,33 @@ function _display_metadata_field( $field_slug, $field, $object_type, $object_id, } echo ''; break; + case 'featured-image': + $image_id = ! empty( $v )? intval( $v ) : '' ; + $set_css = ( !empty( $image_id ) ) ? 'display:none;' : ''; + $reset_css = ( empty( $image_id ) ) ? 'display:none;' : ''; + + echo '

'; + + // Set image link + printf( 'Set %s', esc_attr( $field->label ), esc_attr( $field_slug ), esc_attr( $set_css ), esc_attr( $field->label ) ); + + // Image + echo '

'; + if ( !empty( $image_id ) ) { + echo wp_get_attachment_image( $image_id, 'thumbnail', 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/js/custom-metadata-manager.js b/js/custom-metadata-manager.js index 3445a1b..41a8c71 100644 --- a/js/custom-metadata-manager.js +++ b/js/custom-metadata-manager.js @@ -68,9 +68,9 @@ $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' ) ) ) { $field_input.attr( 'id', $field_id ); } @@ -195,10 +195,70 @@ $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(); - + + + + $(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 our 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 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(); + + }); + + //featured-image 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 From e2ab60839c98f25ccf94270b54bbdeee1f7488b9 Mon Sep 17 00:00:00 2001 From: imranglobal Date: Mon, 30 Jun 2014 15:24:26 -0400 Subject: [PATCH 2/4] * Fixes --- js/custom-metadata-manager.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/js/custom-metadata-manager.js b/js/custom-metadata-manager.js index 41a8c71..252551e 100644 --- a/js/custom-metadata-manager.js +++ b/js/custom-metadata-manager.js @@ -68,9 +68,9 @@ $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' ) ) ) { $field_input.attr( 'id', $field_id ); } @@ -196,8 +196,10 @@ $(this).select2({ placeholder : $(this).attr('data-placeholder'), allowClear : true }); }); + // init the color picker fields + $( '.colorpicker' ).find( 'input' ).wpColorPicker(); - + // featured-image fields $(document).on( 'click.set-custom-media-container', '.add-custom-metadata-media', function(event){ var options, attachment; @@ -217,13 +219,12 @@ library: { type: 'image' }, button: { text: txt_title } }); - // set up our select handler + // set up select handler img_modal.on( 'select' , function() { selection = img_modal.state().get('selection'); - if ( ! selection ) - return; + if ( ! selection ) return; $div.find('.add-custom-metadata-media').hide(); @@ -239,6 +240,7 @@ $div.find('.remove-custom-metadata-media').show(); }); + img_modal.open(); }); From ccb83e5a8dd21cf88ca2f602bafbdf01cac154bd Mon Sep 17 00:00:00 2001 From: imranglobal Date: Mon, 30 Jun 2014 15:59:21 -0400 Subject: [PATCH 3/4] * ID display in hidden --- custom_metadata.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/custom_metadata.php b/custom_metadata.php index 9eb88a5..15c1538 100644 --- a/custom_metadata.php +++ b/custom_metadata.php @@ -1256,7 +1256,7 @@ function _display_metadata_field( $field_slug, $field, $object_type, $object_id, } // Image ID - printf( '', esc_attr( $field_slug ), esc_attr( $image_id ) ); + printf( '', esc_attr( $field_slug ), esc_attr( $image_id ) ); echo '

'; // Remove image link From ee9f72952f633f678142cfa861f4e5befe3a5c29 Mon Sep 17 00:00:00 2001 From: imranglobal Date: Tue, 29 Jul 2014 11:38:58 -0400 Subject: [PATCH 4/4] * Renamed custom field to "thumbnail" (from "featured-image"). * Added ability to preview multiple dimensions in admin area ( thumbnail, full, medium ) * Added example for "thumbnail" custom field --- custom_metadata.php | 11 +++++++---- custom_metadata_examples.php | 10 +++++++++- js/custom-metadata-manager.js | 10 +++++++--- 3 files changed, 23 insertions(+), 8 deletions(-) diff --git a/custom_metadata.php b/custom_metadata.php index 15c1538..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', 'featured-image' ); + 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' ); @@ -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,20 +1238,22 @@ function _display_metadata_field( $field_slug, $field, $object_type, $object_id, } echo ''; break; - case 'featured-image': + 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( $field->label ) ); + 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, 'thumbnail', false, array( 'class' => 'custom-metadata-media-image' ) ); + echo wp_get_attachment_image( $image_id, $preview, false, array( 'class' => 'custom-metadata-media-image' ) ); } else { echo ''; } 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 252551e..a23aae7 100644 --- a/js/custom-metadata-manager.js +++ b/js/custom-metadata-manager.js @@ -199,7 +199,7 @@ // init the color picker fields $( '.colorpicker' ).find( 'input' ).wpColorPicker(); - // featured-image fields + // thumbnail fields $(document).on( 'click.set-custom-media-container', '.add-custom-metadata-media', function(event){ var options, attachment; @@ -231,7 +231,11 @@ // loop through the selected files selection.each( function( attachment ) { - var src = attachment.attributes.sizes.thumbnail.url; + 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(); @@ -245,7 +249,7 @@ }); - //featured-image remove + //thumbnail remove $('.remove-custom-metadata-media').on( 'click', function( event ) { event.preventDefault();