Skip to content

Added custom field called "thumbnail" #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
imranglobal wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Added custom field called "thumbnail" #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
68321c0
* Added ability for featured image
imranglobal Jun 30, 2014
e2ab608
* Fixes
imranglobal Jun 30, 2014
ccb83e5
* ID display in hidden
imranglobal Jun 30, 2014
ee9f729
* Renamed custom field to "thumbnail" (from "featured-image").
imranglobal Jul 29, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 33 additions & 3 deletions custom_metadata.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down Expand Up @@ -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' ) );
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -1237,6 +1238,35 @@ function _display_metadata_field( $field_slug, $field, $object_type, $object_id,
}
echo '</select>';
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 '<span class="set-custom-media-container"><p class="hide-if-no-js">';

// Set image link
printf( '<a title="Set %s" href="#" id="add-custom-%s-media" class="add-custom-metadata-media" style="%s" data-preview="%s" >Set %s</a>', esc_attr( $field->label ), esc_attr( $field_slug ), esc_attr( $set_css ), esc_attr( $preview ) ,esc_attr( $field->label ) );

// Image
echo '</p><p class="hide-if-no-js"><p class="hide-if-no-js">';
if ( !empty( $image_id ) ) {
echo wp_get_attachment_image( $image_id, $preview, false, array( 'class' => 'custom-metadata-media-image' ) );
} else {
echo '<img class="custom-metadata-media-image" src="" style="display: none" />';
}

// Image ID
printf( '<input class="custom-metadata-media-id" type="hidden" name="%s" value="%s" />', esc_attr( $field_slug ), esc_attr( $image_id ) );
echo '</p><p class="hide-if-no-js">';

// Remove image link
printf( '<a title="Remove %s" href="#" class="remove-custom-metadata-media" style="%s">Remove %s</a>', esc_attr( $field->label ), esc_attr( $reset_css ), esc_attr( $field->label ) );
echo '</p></span>';

break;
case 'datepicker' :
$datepicker_value = ! empty( $v ) ? esc_attr( date( 'm/d/Y', $v ) ) : '';
printf( '<input type="text" name="%s" value="%s"%s%s/>', esc_attr( $field_id ), $datepicker_value, $readonly_str, $placeholder_str );
Expand Down
10 changes: 9 additions & 1 deletion custom_metadata_examples.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
72 changes: 69 additions & 3 deletions js/custom-metadata-manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) ) ) {
Expand Down Expand Up @@ -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);