Custom User Profile Photo

Version Description

Beta version release.

Release Info

Developer	3five
Plugin	Custom User Profile Photo
Version	0.2.3
Comparing to
See all releases

Version 0.2.3

Files changed (4) hide show

3five_cupp.php +227 -0
css/styles.css +103 -0
js/scripts.js +71 -0
readme.txt +82 -0

3five_cupp.php ADDED Viewed

	@@ -0,0 +1,227 @@


1	+ <?php
2	+ /*
3	+ Plugin Name: Custom User Profile Photo
4	+ Plugin URI: http://3five.com
5	+ Description: A simple and effective custom WordPress user profile photo plugin. This plugin leverages the WordPress Media Uploader functionality.
6	+ Author: 3five
7	+ Author URI: http://3five.com
8	+ Text Domain: custom-user-profile-photo
9	+ Domain Path: /languages/
10	+ Version: 0.2.3
11	+ */
12	+
13	+ /**
14	+ * This program has been developed for use with the WordPress Software.
15	+ *
16	+ * It is distributed as free software with the intent that it will be
17	+ * usefull and does not ship with any WARRANTY.
18	+ *
19	+ * USAGE:
20	+ * <?php $imgURL = get_cupp_meta( $user_id, $size ); ?>
21	+ * or
22	+ * <img src="<?php echo get_cupp_meta( $user_id, $size ); ?>">
23	+ *
24	+ * Beginner WordPress template editing skill required. Place the above tag in your template and provide the two parameters.
25	+ * @param $user_id Default: $post->post_author. Will accept any valid user ID passed into this parameter.
26	+ * @param $size Default: 'thumbnail'. Accepts all default WordPress sizes and any custom sizes made by the add_image_size() function.
27	+ * @return {url} Use this inside the src attribute of an image tag or where you need to call the image url.
28	+ *
29	+ * Inquiries, suggestions and feedback can be sent to vincent@3five.com
30	+ *
31	+ * This is plugin is intented for Contributors, Editors and Admin role post/page authors. Thank you for downloading our plugin.
32	+ * We hope this WordPress plugin meets
33	+ * your needs.
34	+ *
35	+ * Happy coding!
36	+ * - 3five
37	+ *
38	+ * Resources:
39	+ * • Steven Slack - http://s2web.staging.wpengine.com/226/
40	+ * • Pippin Williamson - https://gist.github.com/pippinsplugins/29bebb740e09e395dc06
41	+ * • Mike Jolley - https://gist.github.com/mikejolley/3a3b366cb62661727263#file-gistfile1-php
42	+ * • Frankie Jarrett - http://frankiejarrett.com/get-an-attachment-id-by-url-in-wordpress/
43	+ *
44	+ */
45	+
46	+
47	+ // Enqueue scripts and styles
48	+ add_action( 'admin_enqueue_scripts', 'cupp_enqueue_scripts_styles' );
49	+ function cupp_enqueue_scripts_styles() {
50	+ // Register
51	+ wp_register_style( 'cupp_admin_css', plugins_url( 'custom-user-profile-photo/css/styles.css' ), false, '1.0.0', 'all' );
52	+ wp_register_script( 'cupp_admin_js', plugins_url( 'custom-user-profile-photo/js/scripts.js' ), array('jquery'), '1.0.0', true );
53	+
54	+ // Enqueue
55	+ wp_enqueue_style( 'cupp_admin_css' );
56	+ wp_enqueue_script( 'cupp_admin_js' );
57	+ }
58	+
59	+ // Show the new image field in the user profile page.
60	+ add_action( 'show_user_profile', 'cupp_profile_img_fields' );
61	+ add_action( 'edit_user_profile', 'cupp_profile_img_fields' );
62	+
63	+ function cupp_profile_img_fields( $user ) {
64	+ if(!current_user_can('upload_files'))
65	+ return false;
66	+
67	+ // vars
68	+ $cupp_url = get_the_author_meta( 'cupp_meta', $user->ID );
69	+ $cupp_upload_url = get_the_author_meta( 'cupp_upload_meta', $user->ID );
70	+ $cupp_upload_edit_url = get_the_author_meta( 'cupp_upload_edit_meta', $user->ID );
71	+
72	+ if(!$cupp_upload_url){
73	+ $btn_text = 'Upload New Image';
74	+ } else {
75	+ $cupp_upload_edit_url = get_home_url().get_the_author_meta( 'cupp_upload_edit_meta', $user->ID );
76	+ $btn_text = 'Change Current Image';
77	+ }
78	+ ?>
79	+
80	+ <div id="cupp_container">
81	+ <h3><?php _e( 'Custom User Profile Photo', 'custom-user-profile-photo' ); ?></h3>
82	+
83	+ <table class="form-table">
84	+
85	+ <tr>
86	+ <th><label for="cupp_meta"><?php _e( 'Profile Photo', 'custom-user-profile-photo' ); ?></label></th>
87	+ <td>
88	+ <!-- Outputs the image after save -->
89	+ <div id="current_img">
90	+ <?php if($cupp_upload_url): ?>
91	+ <img src="<?php echo esc_url( $cupp_upload_url ); ?>" class="cupp-current-img">
92	+ <div class="edit_options uploaded">
93	+ <a class="remove_img"><span>Remove</span></a>
94	+ <a href="<?php echo $cupp_upload_edit_url; ?>" class="edit_img" target="_blank"><span>Edit</span></a>
95	+ </div>
96	+ <?php elseif($cupp_url) : ?>
97	+ <img src="<?php echo esc_url( $cupp_url ); ?>" class="cupp-current-img">
98	+ <div class="edit_options single">
99	+ <a class="remove_img"><span>Remove</span></a>
100	+ </div>
101	+ <?php endif; ?>
102	+ </div>
103	+
104	+ <!-- Select an option: Upload to WPMU or External URL -->
105	+ <div id="cupp_options">
106	+ <input type="radio" id="upload_option" name="img_option" value="upload" class="tog" checked>
107	+ <label for="upload_option">Upload New Image</label><br>
108	+ <input type="radio" id="external_option" name="img_option" value="external" class="tog">
109	+ <label for="external_option">Use External URL</label><br>
110	+ </div>
111	+
112	+ <!-- Hold the value here if this is a WPMU image -->
113	+ <div id="cupp_upload">
114	+ <input type="hidden" name="cupp_upload_meta" id="cupp_upload_meta" value="<?php echo esc_url_raw( $cupp_upload_url ); ?>" class="hidden" />
115	+ <input type="hidden" name="cupp_upload_edit_meta" id="cupp_upload_edit_meta" value="<?php echo esc_url_raw( $cupp_upload_edit_url ); ?>" class="hidden" />
116	+ <input type='button' class="cupp_wpmu_button button-primary" value="<?php _e( $btn_text, 'custom-user-profile-photo' ); ?>" id="uploadimage"/><br />
117	+ </div>
118	+ <!-- Outputs the text field and displays the URL of the image retrieved by the media uploader -->
119	+ <div id="cupp_external">
120	+ <input type="text" name="cupp_meta" id="cupp_meta" value="<?php echo esc_url_raw( $cupp_url ); ?>" class="regular-text" />
121	+ </div>
122	+ <!-- Outputs the save button -->
123	+ <span class="description"><?php _e( 'Upload a custom photo for your user profile or use a URL to a pre-existing photo.', 'custom-user-profile-photo' ); ?></span>
124	+ <p class="description"><?php _e('Update Profile to save your changes.', 'custom-user-profile-photo'); ?></p>
125	+ </td>
126	+ </tr>
127	+
128	+ </table><!-- end form-table -->
129	+ </div> <!-- end #cupp_container -->
130	+
131	+ <?php wp_enqueue_media(); // Enqueue the WordPress MEdia Uploader ?>
132	+
133	+ <?php }
134	+
135	+ // Save the new user CUPP url.
136	+ add_action( 'personal_options_update', 'cupp_save_img_meta' );
137	+ add_action( 'edit_user_profile_update', 'cupp_save_img_meta' );
138	+
139	+ function cupp_save_img_meta( $user_id ) {
140	+
141	+ if ( !current_user_can( 'edit_user', $user_id ) )
142	+ return false;
143	+
144	+ // If the current user can edit Users, allow this.
145	+ update_usermeta( $user_id, 'cupp_meta', $_POST['cupp_meta'] );
146	+ update_usermeta( $user_id, 'cupp_upload_meta', $_POST['cupp_upload_meta'] );
147	+ update_usermeta( $user_id, 'cupp_upload_edit_meta', $_POST['cupp_upload_edit_meta'] );
148	+ }
149	+
150	+ /**
151	+ * Return an ID of an attachment by searching the database with the file URL.
152	+ *
153	+ * First checks to see if the $url is pointing to a file that exists in
154	+ * the wp-content directory. If so, then we search the database for a
155	+ * partial match consisting of the remaining path AFTER the wp-content
156	+ * directory. Finally, if a match is found the attachment ID will be
157	+ * returned.
158	+ *
159	+ * http://frankiejarrett.com/get-an-attachment-id-by-url-in-wordpress/
160	+ *
161	+ * @return {int} $attachment
162	+ */
163	+ function get_attachment_image_by_url( $url ) {
164	+
165	+ // Split the $url into two parts with the wp-content directory as the separator.
166	+ $parse_url = explode( parse_url( WP_CONTENT_URL, PHP_URL_PATH ), $url );
167	+
168	+ // Get the host of the current site and the host of the $url, ignoring www.
169	+ $this_host = str_ireplace( 'www.', '', parse_url( home_url(), PHP_URL_HOST ) );
170	+ $file_host = str_ireplace( 'www.', '', parse_url( $url, PHP_URL_HOST ) );
171	+
172	+ // Return nothing if there aren't any $url parts or if the current host and $url host do not match.
173	+ if ( !isset( $parse_url[1] ) \|\| empty( $parse_url[1] ) \|\| ( $this_host != $file_host ) ) {
174	+ return;
175	+ }
176	+
177	+ // Now we're going to quickly search the DB for any attachment GUID with a partial path match.
178	+ // Example: /uploads/2013/05/test-image.jpg
179	+ global $wpdb;
180	+
181	+ $prefix = $wpdb->prefix;
182	+ $attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM " . $prefix . "posts WHERE guid RLIKE %s;", $parse_url[1] ) );
183	+
184	+ // Returns null if no attachment is found.
185	+ return $attachment[0];
186	+ }
187	+
188	+ /**
189	+ * Retrieve the appropriate image size
190	+ *
191	+ * @param $user_id Default: $post->post_author. Will accept any valid user ID passed into this parameter.
192	+ * @param $size Default: 'thumbnail'. Accepts all default WordPress sizes and any custom sizes made by the add_image_size() function.
193	+ * @return {url} Use this inside the src attribute of an image tag or where you need to call the image url.
194	+ */
195	+ function get_cupp_meta( $user_id, $size ) {
196	+
197	+ //allow the user to specify the image size
198	+ if (!$size){
199	+ $size = 'thumbnail'; // Default image size if not specified.
200	+ }
201	+ if(!$user_id){
202	+ $user_id = $post->post_author;
203	+ }
204	+
205	+ // get the custom uploaded image
206	+ $attachment_upload_url = esc_url( get_the_author_meta( 'cupp_upload_meta', $user_id ) );
207	+
208	+ // get the external image
209	+ $attachment_ext_url = esc_url( get_the_author_meta( 'cupp_meta', $user_id ) );
210	+ $attachment_url = '';
211	+ if($attachment_upload_url){
212	+ $attachment_url = $attachment_upload_url;
213	+ } elseif($attachment_ext_url) {
214	+ $attachment_url = $attachment_ext_url;
215	+ }
216	+
217	+ // grabs the id from the URL using Frankie Jarretts function
218	+ $attachment_id = get_attachment_image_by_url( $attachment_url );
219	+
220	+ // retrieve the thumbnail size of our image
221	+ $image_thumb = wp_get_attachment_image_src( $attachment_id, $size );
222	+
223	+ // return the image thumbnail
224	+ return $image_thumb[0];
225	+ }
226	+
227	+ ?>

css/styles.css ADDED Viewed

	@@ -0,0 +1,103 @@


1	+ /*
2	+ Title: 3five Admin CUPP Styles
3	+ Author: Vincent Listrani
4	+ Description: Styles for WP Admin user page.
5	+ */
6	+ #cupp_container* {
7	+ -webkit-box-sizing: border-box;
8	+ -moz-box-sizing: border-box;
9	+ box-sizing: border-box;
10	+ }
11	+
12	+ #cupp_container{
13	+ background: #fcfcfc;
14	+ padding: 10px;
15	+ margin-top: 20px;
16	+ }
17	+
18	+ /* Current Profile Image Styles */
19	+ #current_img{
20	+ position: relative;
21	+ width: 160px;
22	+ height: auto;
23	+ text-align: right;
24	+ margin-bottom: 10px;
25	+ }
26	+
27	+ .cupp-current-img{
28	+ display: block;
29	+ max-width: 150px;
30	+ max-height: 150px;
31	+ width: 100%;
32	+ height: auto;
33	+ padding: 4px;
34	+ background: #fefefe;
35	+ border: 1px solid #e5e5e5;
36	+ }
37	+
38	+ .edit_options{
39	+ display: block;
40	+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
41	+ filter: alpha(opacity=0);
42	+ opacity: 0;
43	+ position: absolute;
44	+ top: 0;
45	+ left: 0;
46	+ max-width: 160px;
47	+ width: 100%;
48	+ height: 100%;
49	+ background-color: #fff;
50	+ background-color: rgba(255, 255, 255, 0.25);
51	+ }
52	+ .edit_options .remove_img, .edit_options .edit_img{
53	+ float: left;
54	+ position: relative;
55	+ color: #444;
56	+ font-size: 13px;
57	+ width: 50%;
58	+ height: 100%;
59	+ text-align: center;
60	+ cursor: pointer;
61	+ text-decoration: none;
62	+ }
63	+ .edit_options span{
64	+ display: block;
65	+ position: relative;
66	+ top: 50%;
67	+ margin-top: -10px;
68	+ }
69	+
70	+ .edit_options .remove_img{
71	+ color: #fff;
72	+ background-color: rgb(214, 14, 14);
73	+ background-color: rgba(214, 14, 14, 0.50);
74	+ }
75	+
76	+ .edit_options.single .remove_img{
77	+ width: 100%;
78	+ }
79	+
80	+ .edit_options .remove_img:hover, .edit_options .remove_img:focus{
81	+ background-color: #ff0000;
82	+ background-color: rgba(214, 14, 14, 0.75);
83	+ }
84	+
85	+ .edit_options .edit_img{
86	+ color: #fff;
87	+ background-color: rgb(50, 50, 50);
88	+ background-color: rgba(50, 50, 50, 0.50);
89	+ }
90	+
91	+ .edit_options .edit_img:hover, .edit_options .edit_img:focus{
92	+ background-color: rgb(25, 25, 25);
93	+ background-color: rgba(50, 50, 50, 0.75);
94	+ }
95	+
96	+ /* Radio Button Styles */
97	+ #cupp_options{
98	+ margin-bottom: 10px;
99	+ }
100	+
101	+ #cupp_external{
102	+ display: none;
103	+ }

js/scripts.js ADDED Viewed

	@@ -0,0 +1,71 @@


1	+ /*
2	+ * Adapted from: http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/
3	+ * Further modified from PippinsPlugins https://gist.github.com/pippinsplugins/29bebb740e09e395dc06
4	+ */
5	+ jQuery(document).ready(function($){
6	+ // Uploading files
7	+ var file_frame;
8	+
9	+ jQuery('.cupp_wpmu_button').on('click', function( event ){
10	+
11	+ event.preventDefault();
12	+
13	+ // If the media frame already exists, reopen it.
14	+ if ( file_frame ) {
15	+ file_frame.open();
16	+ return;
17	+ }
18	+
19	+ // Create the media frame.
20	+ file_frame = wp.media.frames.file_frame = wp.media({
21	+ title: jQuery( this ).data( 'uploader_title' ),
22	+ button: {
23	+ text: jQuery( this ).data( 'uploader_button_text' ),
24	+ },
25	+ multiple: false // Set to true to allow multiple files to be selected
26	+ });
27	+
28	+ // When an image is selected, run a callback.
29	+ file_frame.on( 'select', function() {
30	+ // We set multiple to false so only get one image from the uploader
31	+ attachment = file_frame.state().get('selection').first().toJSON();
32	+
33	+ // Do something with attachment.id and/or attachment.url here
34	+ // write the selected image url to the value of the #cupp_meta text field
35	+ jQuery('#cupp_meta').val('');
36	+ jQuery('#cupp_upload_meta').val(attachment.url);
37	+ jQuery('#cupp_upload_edit_meta').val('/wp-admin/post.php?post='+attachment.id+'&action=edit&image-editor');
38	+ jQuery('.cupp-current-img').attr('src', attachment.url);
39	+ });
40	+
41	+ // Finally, open the modal
42	+ file_frame.open();
43	+ });
44	+
45	+ // Toggle Image Type
46	+ jQuery('input[name=img_option]').on('click', function( event ){
47	+ var imgOption = jQuery(this).val();
48	+
49	+ if (imgOption == 'external'){
50	+ jQuery('#cupp_upload').hide();
51	+ jQuery('#cupp_external').show();
52	+ } else if (imgOption == 'upload'){
53	+ jQuery('#cupp_external').hide();
54	+ jQuery('#cupp_upload').show();
55	+ }
56	+
57	+ });
58	+
59	+ // Remove Image Function
60	+ jQuery('.edit_options').hover(function(){
61	+ jQuery(this).stop(true, true).animate({opacity: 1}, 100);
62	+ }, function(){
63	+ jQuery(this).stop(true, true).animate({opacity: 0}, 100);
64	+ });
65	+
66	+ jQuery('.remove_img').on('click', function( event ){
67	+ jQuery(this).parent().add('.cupp-current-img').fadeOut('fast', function(){jQuery(this).remove()});
68	+ jQuery('#cupp_upload_meta, #cupp_upload_edit_meta, #cupp_meta').val('');
69	+ });
70	+
71	+ });

readme.txt ADDED Viewed

	@@ -0,0 +1,82 @@


1	+ === Plugin Name ===
2	+ Contributors: 3five, VincentListrani
3	+ Donate link:
4	+ Tags: custom profile photo, user profile, profile photo, user profile photo
5	+ Requires at least: 3.6.1
6	+ Tested up to: 3.7.1
7	+ Stable tag: 0.2.3
8	+ License: GPLv2 or later
9	+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10	+
11	+ Add a customized User Profile photo to a WordPress user profile.
12	+
13	+ == Description ==
14	+
15	+ A more flexible way to attach and display a photo for a WordPress user profile.
16	+
17	+ Some users might not have or want to have a gravatar account or other universal avatar account. They simply may want to use a one-time specified photo to represent them on your WordPress site. This plugin solves that use case.
18	+
19	+ With the ability to upload a photo to a user profile via the WordPress Media Uploader or by specifying an external URL to an image, your users and/or authors can have a personalized photo specific to your website.*
20	+
21	+ By utilizing the WordPress Media Uploader, you also have the ability to use and of the predefined images sizes that the media uploader creates and any custom images size specific to your theme.
22	+
23	+ This plugin will add a custom set of fields to the user profile page which will allow for the use of a custom profile photo.
24	+
25	+ You can add/change/edit uploaded photos directly from the user profile page. The external option allows you to provide a URL to the external image or remove it.
26	+
27	+ *Future Updates to this plugin include full WordPress avatar integration (posts and comments), allowing other roles to access this feature, and ajax processing of images that use the WordPress Media Uploader.
28	+
29	+ To use this plugin, simply go to the users section and select a user. The new fields are added to the bottom of the user profile page. Choose which type of photo you want to use. Upload or add the url, depending on your option. Then press the Update Profile button.
30	+
31	+ To retrieve the photo on the front-end use the following example on your template page(s):
32	+ `<?php
33	+ // Retrieve The Post's Author ID
34	+ $user_id = get_the_author_meta('ID');
35	+ // Set the image size. Accepts all registered images sizes and array(int, int)
36	+ $size = 'thumbnail';
37	+
38	+ // Get the image URL using the author ID and image size params
39	+ $imgURL = get_cupp_meta($user_id, $size);
40	+
41	+ // Print the image on the page
42	+ echo '<img src="'. $imgURL .'" alt="">';
43	+ ?>`
44	+
45	+ == Installation ==
46	+
47	+ 1. Upload `custom-user-profile-photo` folder to the `/wp-content/plugins/` directory
48	+ 2. Activate the plugin through the 'Plugins' menu in WordPress
49	+ 3. Place `<?php get_cupp_meta($user_id, $size); ?>` in your templates
50	+
51	+ == Frequently Asked Questions ==
52	+
53	+ = How do I retrieve the image after I've updated the user profile. =
54	+
55	+ You can call it in your template page(s) like so: `<?php echo get_cupp_meta($user_ID, $size); ?>`
56	+ where the $user_ID is the users ID number and the size is a registered image size like 'thumbnail' or an array like `array(50,50)`
57	+
58	+ = Who can upload and manage these images. =
59	+
60	+ Currently, only a user with admin privileges can manage this option.
61	+
62	+ == Screenshots ==
63	+
64	+ 1. The new fields that are added to the user profile page.
65	+
66	+ 2. After uploading and saving your selected image.
67	+
68	+ 3. On hover, Edit or Remove an uploaded image.
69	+
70	+ 4. On hover, Remove a URL to an external image.
71	+
72	+ 5. An example of getting this new image to display on the front-end.
73	+
74	+ == Changelog ==
75	+
76	+ = 0.2.3 =
77	+ * Beta version release.
78	+
79	+ == Upgrade Notice ==
80	+
81	+ = 0.2.3 =
82	+ Beta Release

Custom User Profile Photo - Version 0.2.3

Version Description

Release Info

Version 0.2.3