diff --git a/plugins/UserProfilePhoto.php b/plugins/UserProfilePhoto.php new file mode 100644 index 0000000..e0872ef --- /dev/null +++ b/plugins/UserProfilePhoto.php @@ -0,0 +1,194 @@ + + * or + * + * + */ + + +// Enqueue scripts and styles +add_action( 'admin_enqueue_scripts', 'cupp_enqueue_scripts_styles' ); +function cupp_enqueue_scripts_styles() { + // Register + wp_register_style( 'cupp_admin_css', AERIA_RESOURCE_URL.'/css/userprofilephoto.css', false, '1.0.0', 'all' ); + wp_register_script( 'cupp_admin_js', AERIA_RESOURCE_URL.'/js/userprofilephoto.js', array('jquery'), '1.0.0', true ); + + // Enqueue + wp_enqueue_style( 'cupp_admin_css' ); + wp_enqueue_script( 'cupp_admin_js' ); +} + +// Show the new image field in the user profile page. +add_action( 'show_user_profile', 'cupp_profile_img_fields' ); +add_action( 'edit_user_profile', 'cupp_profile_img_fields' ); + +function cupp_profile_img_fields( $user ) { + if(!current_user_can('upload_files')) + return false; + + // vars + $cupp_url = get_the_author_meta( 'cupp_meta', $user->ID ); + $cupp_upload_url = get_the_author_meta( 'cupp_upload_meta', $user->ID ); + $cupp_upload_edit_url = get_the_author_meta( 'cupp_upload_edit_meta', $user->ID ); + + if(!$cupp_upload_url){ + $btn_text = 'Upload New Image'; + } else { + $cupp_upload_edit_url = get_home_url().get_the_author_meta( 'cupp_upload_edit_meta', $user->ID ); + $btn_text = 'Change Current Image'; + } + ?> + +
+

+ + + + + + + + +
+ +
+ + +
+ Remove + Edit +
+ + +
+ Remove +
+ +
+ + +
+ +
+ +
+
+ + +
+ + +
+
+ + +
+ +
+ + + +

+
+
+ + + +prefix; + $attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM " . $prefix . "posts WHERE guid RLIKE %s;", $parse_url[1] ) ); + + // Returns null if no attachment is found. + return $attachment[0]; +} + +/** + * Retrieve the appropriate image size + * + * @param $user_id Default: $post->post_author. Will accept any valid user ID passed into this parameter. + * @param $size Default: 'thumbnail'. Accepts all default WordPress sizes and any custom sizes made by the add_image_size() function. + * @return {url} Use this inside the src attribute of an image tag or where you need to call the image url. + */ +function get_cupp_meta( $user_id, $size ) { + + //allow the user to specify the image size + if (!$size){ + $size = 'thumbnail'; // Default image size if not specified. + } + if(!$user_id){ + $user_id = $post->post_author; + } + + // get the custom uploaded image + $attachment_upload_url = esc_url( get_the_author_meta( 'cupp_upload_meta', $user_id ) ); + + // get the external image + $attachment_ext_url = esc_url( get_the_author_meta( 'cupp_meta', $user_id ) ); + $attachment_url = ''; + if($attachment_upload_url){ + $attachment_url = $attachment_upload_url; + } elseif($attachment_ext_url) { + $attachment_url = $attachment_ext_url; + } + + // grabs the id from the URL using Frankie Jarretts function + $attachment_id = get_attachment_image_by_url( $attachment_url ); + + // retrieve the thumbnail size of our image + $image_thumb = wp_get_attachment_image_src( $attachment_id, $size ); + + // return the image thumbnail + return $image_thumb[0]; +} + +?> \ No newline at end of file diff --git a/resources/css/userprofilephoto.css b/resources/css/userprofilephoto.css new file mode 100644 index 0000000..d19032f --- /dev/null +++ b/resources/css/userprofilephoto.css @@ -0,0 +1,103 @@ +/* + Title: 3five Admin CUPP Styles + Author: Vincent Listrani + Description: Styles for WP Admin user page. +*/ +#cupp_container* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +#cupp_container{ + background: #fcfcfc; + padding: 10px; + margin-top: 20px; +} + +/* Current Profile Image Styles */ +#current_img{ + position: relative; + width: 160px; + height: auto; + text-align: right; + margin-bottom: 10px; +} + +.cupp-current-img{ + display: block; + max-width: 150px; + max-height: 150px; + width: 100%; + height: auto; + padding: 4px; + background: #fefefe; + border: 1px solid #e5e5e5; +} + +.edit_options{ + display: block; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + position: absolute; + top: 0; + left: 0; + max-width: 160px; + width: 100%; + height: 100%; + background-color: #fff; + background-color: rgba(255, 255, 255, 0.25); +} +.edit_options .remove_img, .edit_options .edit_img{ + float: left; + position: relative; + color: #444; + font-size: 13px; + width: 50%; + height: 100%; + text-align: center; + cursor: pointer; + text-decoration: none; +} +.edit_options span{ + display: block; + position: relative; + top: 50%; + margin-top: -10px; +} + +.edit_options .remove_img{ + color: #fff; + background-color: rgb(214, 14, 14); + background-color: rgba(214, 14, 14, 0.50); +} + +.edit_options.single .remove_img{ + width: 100%; +} + +.edit_options .remove_img:hover, .edit_options .remove_img:focus{ + background-color: #ff0000; + background-color: rgba(214, 14, 14, 0.75); +} + +.edit_options .edit_img{ + color: #fff; + background-color: rgb(50, 50, 50); + background-color: rgba(50, 50, 50, 0.50); +} + +.edit_options .edit_img:hover, .edit_options .edit_img:focus{ + background-color: rgb(25, 25, 25); + background-color: rgba(50, 50, 50, 0.75); +} + +/* Radio Button Styles */ +#cupp_options{ + margin-bottom: 10px; +} + +#cupp_external{ + display: none; +} \ No newline at end of file diff --git a/resources/js/userprofilephoto.js b/resources/js/userprofilephoto.js new file mode 100644 index 0000000..0397f06 --- /dev/null +++ b/resources/js/userprofilephoto.js @@ -0,0 +1,71 @@ +/* + * Adapted from: http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/ + * Further modified from PippinsPlugins https://gist.github.com/pippinsplugins/29bebb740e09e395dc06 + */ +jQuery(document).ready(function($){ +// Uploading files +var file_frame; + + jQuery('.cupp_wpmu_button').on('click', function( event ){ + + event.preventDefault(); + + // If the media frame already exists, reopen it. + if ( file_frame ) { + file_frame.open(); + return; + } + + // Create the media frame. + file_frame = wp.media.frames.file_frame = wp.media({ + title: jQuery( this ).data( 'uploader_title' ), + button: { + text: jQuery( this ).data( 'uploader_button_text' ), + }, + multiple: false // Set to true to allow multiple files to be selected + }); + + // When an image is selected, run a callback. + file_frame.on( 'select', function() { + // We set multiple to false so only get one image from the uploader + attachment = file_frame.state().get('selection').first().toJSON(); + + // Do something with attachment.id and/or attachment.url here + // write the selected image url to the value of the #cupp_meta text field + jQuery('#cupp_meta').val(''); + jQuery('#cupp_upload_meta').val(attachment.url); + jQuery('#cupp_upload_edit_meta').val('/wp/wp-admin/post.php?post='+attachment.id+'&action=edit&image-editor'); + jQuery('.cupp-current-img').attr('src', attachment.url); + }); + + // Finally, open the modal + file_frame.open(); + }); + +// Toggle Image Type + jQuery('input[name=img_option]').on('click', function( event ){ + var imgOption = jQuery(this).val(); + + if (imgOption == 'external'){ + jQuery('#cupp_upload').hide(); + jQuery('#cupp_external').show(); + } else if (imgOption == 'upload'){ + jQuery('#cupp_external').hide(); + jQuery('#cupp_upload').show(); + } + + }); + +// Remove Image Function + jQuery('.edit_options').hover(function(){ + jQuery(this).stop(true, true).animate({opacity: 1}, 100); + }, function(){ + jQuery(this).stop(true, true).animate({opacity: 0}, 100); + }); + + jQuery('.remove_img').on('click', function( event ){ + jQuery(this).parent().add('.cupp-current-img').fadeOut('fast', function(){jQuery(this).remove()}); + jQuery('#cupp_upload_meta, #cupp_upload_edit_meta, #cupp_meta').val(''); + }); + +}); \ No newline at end of file