WP User Avatar - Version 1.0.1

Version Description

  • Add: CSS classes to image output.
Download this release

Release Info

Developer bangbay
Plugin Icon 128x128 WP User Avatar
Version 1.0.1
Comparing to
See all releases

Version 1.0.1

Files changed (7) hide show
  1. css/wp-user-avatar.css +3 -0
  2. index.html +0 -0
  3. js/wp-user-avatar.js +11 -0
  4. readme.txt +78 -0
  5. screenshot-1.png +0 -0
  6. screenshot-2.png +0 -0
  7. wp-user-avatar.php +225 -0
css/wp-user-avatar.css ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ .savesend .button { display: none; }
2
+ #wp-user-avatar-message { color: #c00; display: none; }
3
+ #wp-user-avatar-preview img { max-width: 96px; }
index.html ADDED
File without changes
js/wp-user-avatar.js ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ function setWPUserAvatar(attachment, imageURL){
2
+ jQuery('#wp-user-avatar', window.parent.document).val(attachment);
3
+ jQuery('#wp-user-avatar-preview', window.parent.document).find('img').attr('src', imageURL).attr('width', '96').removeAttr('height', '');
4
+ jQuery('#wp-user-avatar-message', window.parent.document).show();
5
+ jQuery('#remove-wp-user-avatar', window.parent.document).show();
6
+ if(typeof(wp) != 'undefined'){
7
+ wp.media.wpUserAvatar.frame().close()
8
+ } else {
9
+ window.parent.tb_remove();
10
+ }
11
+ }
readme.txt ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === WP User Avatar ===
2
+
3
+ Contributors: bangbay
4
+ Donate link: http://siboliban.org/donate
5
+ Tags: author image, author photo, author avatar, avatar, profile avatar, profile image, profile photo, user avatar, user image, user photo
6
+ Requires at least: 3.3
7
+ Tested up to: 3.5
8
+ Stable tag: 1.0.1
9
+ License: GPLv2 or later
10
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
+
12
+ Use any image from your WordPress Media Library as a custom user avatar.
13
+
14
+ == Description ==
15
+
16
+ WordPress currently only allows you to use custom avatars that are uploaded through gravatar.com. WP User Avatar enables you to use any photo uploaded into your Media Library as an avatar. This means any image you've uploaded for a page or post is available for you to use as an avatar. No extra folders or image editing functions are necessary.
17
+
18
+ To use WP User Avatar in your theme, replace anywhere you use the function get_avatar() with get_wp_user_avatar(). get_wp_user_avatar() accepts the same fields as get_avatar() with added functionality.
19
+
20
+ This plugin uses the new Media Uploader introduced in WordPress 3.5, but is also backwards-compatible to WordPress 3.3.
21
+
22
+ == Installation ==
23
+
24
+ 1. Download, install, and activate the WP User Avatar plugin.
25
+ 2. Choose a profile to edit.
26
+ 3. In edit mode, click "Edit WP User Avatar".
27
+ 4. Choose an image, then click "Set WP User Avatar".
28
+ 5. Click "Update Profile".
29
+ 6. In your theme, use the function get_wp_user_avatar() in place of get_avatar().
30
+
31
+ == Frequently Asked Questions ==
32
+
33
+ = How do I use WP User Avatar? =
34
+
35
+ In your theme, replace get_avatar with get_wp_user_avatar().
36
+
37
+ **Examples:**
38
+
39
+ Within The Loop, you may be using:
40
+
41
+ `<?php echo get_avatar(get_the_author_meta('ID'), 96); ?>`
42
+
43
+ Replace this function with:
44
+
45
+ `<?php echo get_wp_user_avatar(get_the_author_meta('ID'), 96); ?>`
46
+
47
+ You can also use the values "original", "large", "medium", and "thumbnail" for your avatar size:
48
+
49
+ `<?php echo get_wp_user_avatar(get_the_author_meta('ID'), 'medium'); ?>`
50
+
51
+ On an author page outside of The Loop, you may be using:
52
+
53
+ `<?php $user = get_user_by('slug', $author_name); echo get_avatar($user->ID, 96); ?>`
54
+
55
+ Replace this function with:
56
+
57
+ `<?php $user = get_user_by('slug', $author_name); echo get_wp_user_avatar($user->ID, 96); ?>`
58
+
59
+ If you leave the options blank, WP User Avatar will detect whether you're inside or outside The Loop and return the correct avatar in the default 96x96 size:
60
+
61
+ `<?php echo get_wp_user_avatar(); ?>`
62
+
63
+ get_wp_user_avatar() will also fall back to get_avatar() if no WP User Avatar image is set. For this to work, "Show Avatars" must be checked in your Discussion settings.
64
+
65
+ == Screenshots ==
66
+
67
+ 1. See thumbnails of WP User Avatar in the Users section.
68
+ 2. WP User Avatar adds a field to your profile in edit mode.
69
+
70
+ == Changelog ==
71
+
72
+ = 1.0.1 =
73
+ * Add: CSS classes to image output.
74
+
75
+ = 1.0 =
76
+ * Initial release
77
+
78
+ == Upgrade Notice ==
screenshot-1.png ADDED
Binary file
screenshot-2.png ADDED
Binary file
wp-user-avatar.php ADDED
@@ -0,0 +1,225 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * @package WP User Avatar
4
+ * @version 1.0.1
5
+ */
6
+ /*
7
+ Plugin Name: WP User Avatar
8
+ Plugin URI: http://wordpress.org/extend/plugins/wp-user-avatar/
9
+ Description: Use any image from your WordPress Media Library as a custom user avatar.
10
+ Version: 1.0.1
11
+ Author: Bangbay Siboliban
12
+ Author URI: http://siboliban.org/
13
+ */
14
+
15
+ // Define paths and variables
16
+ define('WP_USER_AVATAR_FOLDER', basename(dirname(__FILE__)));
17
+ define('WP_USER_AVATAR_ABSPATH', trailingslashit(str_replace("\\","/", WP_PLUGIN_DIR.'/'.WP_USER_AVATAR_FOLDER)));
18
+ define('WP_USER_AVATAR_URLPATH', trailingslashit(plugins_url(WP_USER_AVATAR_FOLDER)));
19
+
20
+ // Remove user metadata on plugin delete
21
+ register_uninstall_hook(__FILE__, 'wp_user_avatar_delete_setup');
22
+
23
+ // Remove user metadata
24
+ function wp_user_avatar_delete_setup(){
25
+ $users = get_users();
26
+ foreach($users as $user){
27
+ delete_user_meta($user->ID, 'wp_user_avatar');
28
+ }
29
+ }
30
+
31
+ // WP User Avatar
32
+ if(!class_exists('wp_user_avatar')){
33
+ class wp_user_avatar{
34
+ function wp_user_avatar(){
35
+ add_action('show_user_profile', array('wp_user_avatar','action_show_user_profile'));
36
+ add_action('edit_user_profile', array($this,'action_show_user_profile'));
37
+ add_action('personal_options_update', array($this,'action_process_option_update'));
38
+ add_action('edit_user_profile_update', array($this,'action_process_option_update'));
39
+ if(!function_exists('wp_enqueue_media')){
40
+ add_filter('attachment_fields_to_edit', array($this, 'add_wp_user_avatar_attachment_field_to_edit'), 10, 2);
41
+ }
42
+ add_filter('manage_users_columns', array($this, 'add_wp_user_avatar_column'), 10, 1);
43
+ add_filter('manage_users_custom_column', array($this, 'show_wp_user_avatar_column'), 10, 3);
44
+ add_action('admin_enqueue_scripts', array($this, 'media_upload_scripts'));
45
+ }
46
+
47
+ // Add to user profile edit
48
+ function action_show_user_profile($user){
49
+ $wp_user_avatar = get_user_meta($user->ID, 'wp_user_avatar', true);
50
+ $hide = empty($wp_user_avatar) ? ' style="display:none;"' : '';
51
+ ?>
52
+ <h3><?php _e('WP User Avatar') ?></h3>
53
+ <table class="form-table">
54
+ <tbody>
55
+ <tr>
56
+ <th><label for="wp_user_avatar"><?php _e('WP User Avatar'); ?></label></th>
57
+ <td>
58
+ <input type="hidden" name="wp-user-avatar" id="wp-user-avatar" value="<?php echo $wp_user_avatar; ?>" />
59
+ <p><button type="button" class="button" id="add-wp-user-avatar"><?php _e('Edit WP User Avatar'); ?></button></p>
60
+ <div id="wp-user-avatar-preview">
61
+ <p>
62
+ <?php
63
+ if(!empty($wp_user_avatar)){
64
+ echo get_wp_user_avatar($user->ID, 'medium');
65
+ } else {
66
+ if(get_option('show_avatars') == '1'){
67
+ echo get_avatar($user->ID, 96);
68
+ } else {
69
+ echo '<img src="'.includes_url().'images/blank.gif" alt="" />';
70
+ }
71
+ }
72
+ ?>
73
+ </p>
74
+ </div>
75
+ <p><button type="button" class="button" id="remove-wp-user-avatar"<?php echo $hide; ?>><?php _e('Remove'); ?></button></p>
76
+ <p id="wp-user-avatar-message"><?php _e('Press "Update Profile" to save your changes.'); ?></p>
77
+ </td>
78
+ </tr>
79
+ </tbody>
80
+ </table>
81
+ <script type="text/javascript">
82
+ jQuery(function($){
83
+ <?php if(function_exists('wp_enqueue_media')) : // Use Backbone uploader for WP 3.5+ ?>
84
+ wp.media.wpUserAvatar = {
85
+ get: function() {
86
+ return wp.media.view.settings.post.wpUserAvatarId;
87
+ },
88
+ set: function(id) {
89
+ var settings = wp.media.view.settings;
90
+ settings.post.wpUserAvatarId = id;
91
+ settings.post.wpUserAvatarSrc = $('div.attachment-info').find('img').attr('src');
92
+ if(settings.post.wpUserAvatarId)
93
+ setWPUserAvatar(settings.post.wpUserAvatarId, settings.post.wpUserAvatarSrc);
94
+ },
95
+ frame: function(){
96
+ if(this._frame)
97
+ return this._frame;
98
+ this._frame = wp.media({
99
+ state: 'library',
100
+ states: [ new wp.media.controller.Library({ title: "Edit WP User Avatar: <?php echo $user->display_name; ?>" }) ]
101
+ });
102
+ this._frame.on('open', function(){
103
+ var selection = this.state().get('selection');
104
+ id = jQuery('#wp-user-avatar').val();
105
+ attachment = wp.media.attachment(id);
106
+ attachment.fetch();
107
+ selection.add(attachment ? [ attachment ] : []);
108
+ }, this._frame);
109
+ this._frame.on('toolbar:create:select', function(toolbar){
110
+ this.createSelectToolbar(toolbar, {
111
+ text: 'Set WP User Avatar'
112
+ });
113
+ }, this._frame);
114
+ this._frame.state('library').on('select', this.select);
115
+ return this._frame;
116
+ },
117
+ select: function(id) {
118
+ var settings = wp.media.view.settings,
119
+ selection = this.get('selection').single();
120
+ wp.media.wpUserAvatar.set(selection ? selection.id : -1);
121
+ },
122
+ init: function() {
123
+ $('body').on('click', '#add-wp-user-avatar', function(e){
124
+ e.preventDefault();
125
+ e.stopPropagation();
126
+ wp.media.wpUserAvatar.frame().open();
127
+ });
128
+ }
129
+ };
130
+ $(wp.media.wpUserAvatar.init);
131
+ <?php else : // Fall back to Thickbox uploader ?>
132
+ $('#add-wp-user-avatar').click(function(e){
133
+ e.preventDefault();
134
+ tb_show('Edit WP User Avatar: <?php echo $user->display_name; ?>', 'media-upload.php?type=image&post_type=user&tab=library&TB_iframe=1');
135
+ });
136
+ <?php endif; ?>
137
+ });
138
+ jQuery(function($){
139
+ $('#remove-wp-user-avatar').click(function(e){
140
+ var gravatar = '<?php echo addslashes(get_avatar($user->ID)); ?>';
141
+ if(gravatar == ''){
142
+ gravatar = '<img src="<?php echo includes_url().'images/blank.gif'; ?>" alt="" />';
143
+ }
144
+ e.preventDefault();
145
+ $(this).hide();
146
+ $('#wp-user-avatar-preview').find('img').replaceWith(gravatar);
147
+ $('#wp-user-avatar').val('');
148
+ $('#wp-user-avatar-message').show();
149
+ });
150
+ });
151
+ </script>
152
+ <?php
153
+ }
154
+ // Update user meta
155
+ function action_process_option_update($user_id){
156
+ update_user_meta($user_id, 'wp_user_avatar', (isset($_POST['wp-user-avatar']) ? $_POST['wp-user-avatar'] : ''));
157
+ }
158
+
159
+ // Add button to attach image
160
+ function add_wp_user_avatar_attachment_field_to_edit($fields, $post){
161
+ $image = wp_get_attachment_image_src($post->ID, "medium");
162
+ $button .= '<button type="button" class="button" id="set-wp-user-avatar-image" onclick="setWPUserAvatar(\''.$post->ID.'\', \''.$image[0].'\')">Set WP User Avatar</button>';
163
+ $fields['wp-user-avatar'] = array(
164
+ 'label' => __('WP User Avatar'),
165
+ 'input' => 'html',
166
+ 'html' => $button
167
+ );
168
+ return $fields;
169
+ }
170
+
171
+ // Add column to Users page
172
+ function add_wp_user_avatar_column($columns){
173
+ return $columns + array('wp-user-avatar' => __('WP User Avatar'));;
174
+ }
175
+
176
+ // Show thumbnail of wp_user_avatar
177
+ function show_wp_user_avatar_column($value, $column_name, $user_id){
178
+ $wp_user_avatar = get_user_meta($user_id, 'wp_user_avatar', true);
179
+ $wp_user_avatar_image = wp_get_attachment_image($wp_user_avatar, array(32,32));
180
+ if($column_name == 'wp-user-avatar'){
181
+ return $wp_user_avatar_image;
182
+ }
183
+ }
184
+
185
+ // Media uploader
186
+ function media_upload_scripts(){
187
+ wp_enqueue_script('media-upload');
188
+ wp_enqueue_script('thickbox');
189
+ if(function_exists('wp_enqueue_media')){
190
+ wp_enqueue_media();
191
+ }
192
+ wp_enqueue_script('wp-user-avatar', WP_USER_AVATAR_URLPATH.'js/wp-user-avatar.js');
193
+ wp_enqueue_style('thickbox');
194
+ wp_enqueue_style('wp-user-avatar', WP_USER_AVATAR_URLPATH.'css/wp-user-avatar.css');
195
+ }
196
+ }
197
+ // Initialize wp_user_avatar
198
+ global $wp_user_avatar_instance;
199
+ $wp_user_avatar_instance = new wp_user_avatar();
200
+ }
201
+
202
+ // Find wp_user_avatar, show get_avatar if empty
203
+ function get_wp_user_avatar($id_or_email = '', $size = '96', $default = '', $alt = ''){
204
+ global $post;
205
+ $author_name = get_query_var('author_name');
206
+ // Find author ID on author page or post
207
+ if(!empty($id_or_email)){
208
+ $user = is_numeric($id_or_email) ? get_user_by('id', $id_or_email) : get_user_by('email', $id_or_email);
209
+ } else {
210
+ $user = is_author() ? get_user_by('slug', $author_name) : get_the_author_meta('id');
211
+ }
212
+ $id_or_email = $user->ID;
213
+ $alt = $user->display_name;
214
+ $wp_user_avatar_meta = get_the_author_meta('wp_user_avatar', $id_or_email);
215
+ if(!empty($wp_user_avatar_meta)){
216
+ $get_size = is_numeric($size) ? array($size,$size) : $size;
217
+ $wp_user_avatar_image = wp_get_attachment_image_src($wp_user_avatar_meta, $get_size);
218
+ $dimensions = is_numeric($size) ? ' width="'.$wp_user_avatar_image[1].'" height="'.$wp_user_avatar_image[2].'"' : '';
219
+ $wp_user_avatar = '<img src="'.$wp_user_avatar_image[0].'"'.$dimensions.' alt="'.$alt.'" class="wp-user-avatar wp-user-avatar-'.$size.' avatar avatar-'.$size.' photo" />';
220
+ } else {
221
+ $wp_user_avatar = get_avatar($id_or_email, $size, $default, $alt);
222
+ }
223
+ return $wp_user_avatar;
224
+ }
225
+ ?>