Allow custom profile images.

botwiki · Apr 28, 2018 · 3b1bd65 · 3b1bd65
1 parent 6322eda
commit 3b1bd65
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 19 deletions.
diff --git a/admin-css/styles.css b/admin-css/styles.css
@@ -14,6 +14,7 @@
 /* Site dimensions */
 /* Fonts */
 /* Colors */
+.profile-img-preview,
 .background-img-preview {
   display: block;
   max-width: 100%;

diff --git a/admin-css/styles.min.css b/admin-css/styles.min.css
diff --git a/admin-css/user-profile.css b/admin-css/user-profile.css
@@ -1,6 +1,7 @@
 /* Site dimensions */
 /* Fonts */
 /* Colors */
+.profile-img-preview,
 .background-img-preview {
   display: block;
   max-width: 100%;

diff --git a/admin-css/user-profile.min.css b/admin-css/user-profile.min.css
@@ -1 +1 @@
-.background-img-preview{display:block;max-width:100%;margin-bottom:1rem}
+.background-img-preview,.profile-img-preview{display:block;max-width:100%;margin-bottom:1rem}
diff --git a/archive.php b/archive.php
@@ -2,6 +2,12 @@
   if(is_author()){
     $author_id = get_query_var('author');
 
+    $profile_img_url = esc_attr( get_the_author_meta( 'profile-img-url', $user->ID ) );
+
+    if ( empty( $profile_img_url )){
+      $profile_img_url = get_avatar_url($author_id);
+    }
+
     $background_img_url = esc_attr( get_the_author_meta( 'background-img-url', $author_id ) );
     $background_img_dominant_color = esc_attr( get_the_author_meta( 'background-img-dominant-color', $author_id ) );
 

diff --git a/author-card.php b/author-card.php
@@ -3,7 +3,7 @@
     <div class="card-body mt-4">
       <div class="row">
         <div class="col-sm-12 col-md-2">
-          <img class="mb-4 u-photo rounded" src="<?php echo get_avatar_url($author_id); ?>" alt="<?php echo $full_name; ?>">
+          <img class="mb-4 u-photo rounded" src="<?php echo $profile_img_url; ?>" alt="<?php echo $full_name; ?>">
         </div>
         <div class="col-sm-12 col-md-10">
           <h3 class="mt-0 mb-3"><?php echo $nickname; ?></h3>

diff --git a/author.php b/author.php
@@ -40,8 +40,14 @@
 	$website_url = esc_attr( get_the_author_meta( 'user_url', $author_id ) );
 	$twitter_handle = str_replace('@', '', esc_attr( get_the_author_meta( 'twitter-handle', $author_id ) ) );
 
-	$background_img_url = esc_attr( get_the_author_meta( 'background-img-url', $author_id ) );
-	$background_img_dominant_color = esc_attr( get_the_author_meta( 'background-img-dominant-color', $author_id ) );
+  $profile_img_url = esc_attr( get_the_author_meta( 'profile-img-url', $author_id ) );
+
+  if ( empty( $profile_img_url )){
+    $profile_img_url = get_avatar_url($author_id);
+  }
+
+  $background_img_url = esc_attr( get_the_author_meta( 'background-img-url', $author_id ) );
+  $background_img_dominant_color = esc_attr( get_the_author_meta( 'background-img-dominant-color', $author_id ) );
 
   if ( empty( $background_img_url )){
     $background_img_url = esc_attr( get_the_author_meta( 'background-img-url', 2 ) );
@@ -62,7 +68,7 @@
     <div class="mt-5">
       <div class="row">
         <div class="col-sm-12 col-md-2 text-center">
-          <img class="mr-3 mb-4 u-photo rounded" src="<?php echo get_avatar_url($author_id); ?>" alt="<?php echo $full_name; ?>">
+          <img class="mr-3 mb-4 u-photo rounded" src="<?php echo $profile_img_url; ?>" alt="<?php echo $full_name; ?>">
         </div>
         <div class="col-sm-12 col-md-10">
           <h1 class="mt-0 mb-3"><?php echo $nickname; ?></h1>

diff --git a/includes/extra-user-fields.php b/includes/extra-user-fields.php
@@ -41,48 +41,94 @@ function extra_user_profile_fields( $user ) { ?>
       </td>
     </tr>
     <tr>
-      <th><label for="twitter-handle">Profile header</label></th>
+      <th><label for="background-img-url">Profile image</label></th>
+      <td>
+        <?php
+        $profile_img_url = esc_attr( get_the_author_meta( 'profile-img-url', $user->ID ) );
+
+        if ( empty( $profile_img_url )){
+          $profile_img_url = get_avatar_url($author_id);
+        }
+
+        ?>
+        <img id="profile-img-preview" class="profile-img-preview" src="<?php echo $profile_img_url; ?>">
+        <input hidden id="profile-img-url" type="text" value="<?php echo $profile_img_url; ?>" name="profile-img-url" />
+        <input id="select-profile-img" type="button" class="button-primary" value="Choose profile image" />
+        <input id="clear-profile-img" type="button" class="button" value="Remove profile image" />
+        <p class="description">Square images work best. If you don't set your profile image, your <a href="https://gravatar.com" target="_blank">Gravatar</a> will be used.</p>
+      </td>
+    </tr>
+    <tr>
+      <th><label for="background-img-url">Profile header</label></th>
       <td>
         <?php
         $background_img_url = esc_attr( get_the_author_meta( 'background-img-url', $user->ID ) );
         ?>
         <img id="background-img-preview" class="background-img-preview" src="<?php echo $background_img_url; ?>">
         <input hidden id="background-img-url" type="text" value="<?php echo $background_img_url; ?>" name="background-img-url" />
-        <input id="upload-button" type="button" class="button-primary" value="Choose background" />
+        <input id="select-background-img" type="button" class="button-primary" value="Choose background" />
         <input id="clear-background-img" type="button" class="button" value="Remove background" />
       </td>
     </tr>
     </table>
     <script type="text/javascript">
       jQuery(document).ready(function($){
 
-        var mediaUploader;
+        var mediaUploaderBackgroundIMG;
 
-        $('#upload-button').click(function(e) {
+        $('#select-background-img').click(function(e) {
           e.preventDefault();
-          if (mediaUploader) {
-            mediaUploader.open();
+          if (mediaUploaderBackgroundIMG) {
+            mediaUploaderBackgroundIMG.open();
             return;
           }
-          mediaUploader = wp.media.frames.file_frame = wp.media({
+          mediaUploaderBackgroundIMG = wp.media.frames.file_frame = wp.media({
             title: 'Choose Image',
             button: {
             text: 'Choose Image'
           }, multiple: false });
 
-          mediaUploader.on('select', function() {
-            attachment = mediaUploader.state().get('selection').first().toJSON();
+          mediaUploaderBackgroundIMG.on('select', function() {
+            attachment = mediaUploaderBackgroundIMG.state().get('selection').first().toJSON();
             $('#background-img-url').val(attachment.url);
             $('#background-img-preview').attr('src', attachment.url);
           });
-          mediaUploader.open();
+          mediaUploaderBackgroundIMG.open();
+        });
+
+        var mediaUploaderProfileIMG;
+
+        $('#select-profile-img').click(function(e) {
+          e.preventDefault();
+          if (mediaUploaderProfileIMG) {
+            mediaUploaderProfileIMG.open();
+            return;
+          }
+          mediaUploaderProfileIMG = wp.media.frames.file_frame = wp.media({
+            title: 'Choose Image',
+            button: {
+            text: 'Choose Image'
+          }, multiple: false });
+
+          mediaUploaderProfileIMG.on('select', function() {
+            attachment = mediaUploaderProfileIMG.state().get('selection').first().toJSON();
+            $('#profile-img-url').val(attachment.url);
+            $('#profile-img-preview').attr('src', attachment.url);
+          });
+          mediaUploaderProfileIMG.open();
         });
 
         $('#clear-background-img').click(function(e) {
           e.preventDefault();
           $('#background-img-url').val('');
           $('#background-img-preview').attr('src', '');
         });
+
+        $('#clear-profile-img').click(function(e) {
+          e.preventDefault();
+          $('#profile-img-url').val('');
+          $('#profile-img-preview').attr('src', '<?php echo get_avatar_url($author_id); ?>');
+        });
       });
     </script>
   <?php }
@@ -94,6 +140,7 @@ function save_extra_user_profile_fields( $user_id ) {
 
     update_user_meta( $user_id, 'botwiki-team-role', $_POST['botwiki-team-role'] );
     update_user_meta( $user_id, 'twitter-handle', $_POST['twitter-handle'] );
+    update_user_meta( $user_id, 'profile-img-url', $_POST['profile-img-url'] );
     update_user_meta( $user_id, 'background-img-url', $_POST['background-img-url'] );
 
     try {

diff --git a/single.php b/single.php
@@ -232,6 +232,11 @@ function get_network_name($network){
 
 									$botwiki_profile_page_url = get_site_url() . '/author/' . $username;
 
+							    $profile_img_url = esc_attr( get_the_author_meta( 'profile-img-url', $user->ID ) );
+
+							    if ( empty( $profile_img_url )){
+							      $profile_img_url = get_avatar_url($author_id);
+							    }
 
 									// $background_img_url = esc_attr( get_the_author_meta( 'background-img-url', $author_id ) );
 									// $background_img_dominant_color = esc_attr( get_the_author_meta( 'background-img-dominant-color', $author_id ) );

diff --git a/src/admin-styles/user-profile.scss b/src/admin-styles/user-profile.scss
@@ -1,5 +1,6 @@
 @import "../styles/variables.scss";
 
+.profile-img-preview,
 .background-img-preview{
   display: block;
   max-width: 100%;

diff --git a/template-submit-your-bot.php b/template-submit-your-bot.php
@@ -307,11 +307,33 @@ function get_network_name( $network_term_slug ){
           <form id="submit-bot-form" method="post" class="mt-5">
 
 
-          <?php if ( is_user_logged_in() ) {?>
+          <?php if ( is_user_logged_in() ) {
+            $author_id = get_current_user_id();
+            $username = get_the_author_meta('user_nicename', get_current_user_id() );
+            $profile_img_url = esc_attr( get_the_author_meta( 'profile-img-url', $author_id ) );
+
+            if ( empty( $profile_img_url )){
+              $profile_img_url = get_avatar_url($author_id);
+            }
+
+            $botwiki_profile_page_url = get_site_url() . '/author/' . $username;
+
+          ?>
             <div class="card mb-5">
               <div class="card-body">
-                <h5 class="card-title mt-1">You are logged in</h5>
-                <p class="card-text">This bot will be added to your profile.</p>
+                <div class="container">
+                  <div class="row">
+                    <div class="col-sm-2">
+                      <a href="<?php echo $botwiki_profile_page_url; ?>">
+                        <img class="img-thumbnail" style="width: 100%; height: 100%; max-width: 100px; max-height: 100px;" src="<?php echo $profile_img_url; ?>">
+                      </a>
+                    </div>
+                    <div class="col-sm-10">
+                      <h5 class="card-title mt-1">You are logged in</h5>
+                      <p class="card-text">This bot will be added to <a href="<?php echo $botwiki_profile_page_url; ?>">your profile</a>.</p>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           <?php } else { ?>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		.background-img-preview{display:block;max-width:100%;margin-bottom:1rem}
		.background-img-preview,.profile-img-preview{display:block;max-width:100%;margin-bottom:1rem}