How to change default user avatar?

Hey, 

To change the user avatar image:

1. Top right corner of Guide Admin.
2. Click user profile :
   
3. Click the first option View Profile.
   
   
4. You will reach a profile window and can change the profile by clicking:
   
   

Thanks

Team

Thank you for a response. What I am trying to do is change the default user avatar for everyone, not just me.

Right now, if someone does not have a custom user avatar, they see the grey circle with the white silhouette.

How can I change everyone's default user avatar to something else?

If someone doesn't change the image of user avatar via Guide Admin, then obviously people can't see the image of his user avatar.

I think you are finding something like this; it will permanently change the user avatar image, never shown the grey circle with the white silhouette.

Use this code to change the default Image SRC of user avatar. Paste it into the script file.

function customUserAvatar(){
    var imageTag = document.querySelector('.user-avatar');

     // Replace your image URL here - start
    var assetsImage = "https://theme.zdassets.com/theme_assets/1/3cc7e6328cd4f823ed1332d774490412f0531606.svg";
     // End

    imageTag.setAttribute("id", "user-avatar");
    document.getElementById("user-avatar").src = assetsImage;
  }
  
  customUserAvatar();  // Call the function

Team

I must be doing something wrong.

I copied/pasted the code into script.js.

The image that I am using is uploaded as an asset and added the image to the header of my theme.

I used the browser's inspector to view the images url (theme.zdassets.com/theme_assets/69704/ff5d28f89772a9371ac695291618cfdb8aa723e4.png)

I copied/pasted that url into your script in script.js.

function customUserAvatar(){
    var imageTag = document.querySelector('.user-avatar');

     // Replace your image URL here - start
    var assetsImage = "https://theme.zdassets.com/theme_assets/69704/ff5d28f89772a9371ac695291618cfdb8aa723e4.png";
     // End

    imageTag.setAttribute("id", "user-avatar");
    document.getElementById("user-avatar").src = assetsImage;
  }
  
  customUserAvatar();  // Call the function

It did not change the default image. Someone will still be able to use a custom user avatar once this is working correct?

You just need to change the image URL in the script code, see it's working for me;

I only added script code into bottom of script file:

Output:

another one:

Okay then, can you share your HC public URL so I can figure out that if the classes, I have added, is same because there is only this simple code added.

Once you should try again to import new copenhagen theme, upload your image into the assets folder, get the assets URL by developer inspect tool and replace the image URL with my image URL in the script code script code; that must be working and then you can figure out that what's going wrong in your working project.

Thanks

Sorry for the late response. I was on vacation last week and was not able to reply. I downloaded a new copy of Copenhagen and uploaded the asset. I added the code to the bottom of the Scripts.js template. It did change the image.

Unfortunately, it does not change the overall default user avatar.

It also does not change If someone has a custom user avatar.

Hi, Remove previous provided code and add this new code and then test, it will work

 function customUserAvatar(){
    var imageTag = document.querySelectorAll('.user-avatar');
    var assetsImage = "https://theme.zdassets.com/theme_assets/69704/ff5d28f89772a9371ac695291618cfdb8aa723e4.png";   // Uploaded assets folder image
   var defaultUserAvatar = "https://secure.gravatar.com/avatar/f1e430571f9d62a331f067e0391d9ba0?default=https%3A%2F%2Fassets.zendesk.com%2Fhc%2Fassets%2Fdefault_avatar.png&r=g";   // Default user avatar circle path
if($(imageTag).attr('src') == defaultUserAvatar) {  // check image has src
 $(imageTag).attr("src", assetsImage);
  }
 }
 customUserAvatar();  // Call the function

but first, add the jquery library on the document_head.hbs file because the code depends on jquery.

I think this default user avatar circle path is same for all users

var defaultUserAvatar = "https://secure.gravatar.com/avatar/f1e430571f9d62a331f067e0391d9ba0?default=https%3A%2F%2Fassets.zendesk.com%2Fhc%2Fassets%2Fdefault_avatar.png&r=g";

Thanks

I must still be doing something wrong.

I tried this in the new copy of Copenhagen.

I replaced the code and then pasted the following line of code in the document_head.hbs.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

It did not seem to do anything. The greyed default user avatar still shows.

A custom avatar seems to work properly.

I received an email with this code.

$(document).ready(function(){
   function customUserAvatar(){
    var imageTag = $('.user-avatar');
    var assetsImage = "https://theme.zdassets.com/theme_assets/69704/ff5d28f89772a9371ac695291618cfdb8aa723e4.png";   // Uploaded assets folder image
    var keyword = $('img.user-avatar[src*="//secure.gravatar.com/"]')
     
if($(keyword)) {  // check image has src
 $(imageTag).attr("src", assetsImage);
  }
 }
 customUserAvatar();  // Call the function
});

It replaces the default user avatar, which is great, but it does not allow custom user avatars. When using a custom user avatar, you can see it for a split second and then it is replaced by the default user avatar.

Hey Shown,

The previous code snippet I share but when I found that's wrong I was deleted that, but you have got the email notification with that code.

Use this updated code snippet, and after adding code, test user avatar image with all perspectives on the templates (article template, post template, user profile template, comment area on the templates):

$(document).ready(function(){
   function customUserAvatar(){
    var imageTag = $('.user-avatar');
    var assetsImage = "https://theme.zdassets.com/theme_assets/69704/ff5d28f89772a9371ac695291618cfdb8aa723e4.png";   // Uploaded assets folder image
   if(imageTag.attr('src').indexOf('secure.gravatar.com') > -1) {  // check image has src
 $(imageTag).attr("src", assetsImage);
  }
 }
 customUserAvatar();  // Call the function
});

Make sure the jquery library must be added on document_head.hbs file

Thanks

Team

That worked perfectly! Thank you so much for all of your hard work! I greatly appreciate it!

:)

Hello Ifra,

I am not sure if I should start a new topic or add to this one.

I was using a snippet of code I found on this site to hide the "New Post" button in the Community from end users but still allow agents/admin to view it. This code seems to override your code for end users and will not display the new default user avatar.

This is the code:

 if (HelpCenter.user.role=='end_user') { 
    var communityPostBlock = document.querySelector('.post-to-community');
     communityPostBlock.style.display = 'none';
  }

Hi Shawn, try this new code snippet and let me know if this works:

$(document).ready(function (){
   function customUserAvatar(){
    // var url = window.location.href; 
   
     var imageTag = $('.user-avatar');

     // These bolded classes took from Copenhagen theme, you need to check in your theme if these classes exist then okay if not then you will have to replace these with your's
     var commentAvatar = $('.comment-author img.user-avatar');
     var articleAvatar = $('.article-author img.user-avatar');
     var postAvatar = $('.post-author img.user-avatar');
     var tableAvatar = $('.table img.user-avatar');
     
     var defaultAvatar = 'https://secure.gravatar.com/avatar/XZY2Fassets.zendesk.com%XZY%2Fdefault_avatar.png&r=g';  // Replace this default white circle(default avatar) URL with your's HC white circle URL (default avatar).
     var assetsImage = "https://theme.zdassets.com/theme_assets/69704/ff5d28f89772a9371ac695291618cfdb8aa723e4.png";   // Uploaded assets folder image
 
   
    if (imageTag && commentAvatar && articleAvatar && tableAvatar.attr("src") == defaultAvatar) {
    $(imageTag).attr("src", assetsImage);
    }
     

   }
 customUserAvatar();  // Call the function
  
});

I tried HC Role Code with if condition but didn't work:

 if (HelpCenter.user.role=='end_user') 

My theme is just a modified Copenhagen, so all of those classes are there. I have been testing your code in a new Copenhagen to eliminate any of my changes causing an issue. I tried your code but doesn't show the new default user avatar. It only shows the original user avatar. I did change the original default user avatar url in your script.

For some reason this post will not let me add a code section. Here is the  url for my original default user avatar. It was the only thing I changed in your script.

https://secure.gravatar.com/avatar/20ae92d81a06c65d4b172ea7c9901f87?default=https%3A%2F%2Fassets.zendesk.com%2Fhc%2Fassets%2Fdefault_avatar.png&r=g

Is the new code to allow the button to be hidden without affecting the user avatar? Wouldn't it be easier to change the button code to only affect that button since the other code was working?

It will definitely work:

$(document).ready(function (){
   function customUserAvatar(){
   
     var imageTag = $('.user-avatar');

     // These bolded classes took from Copenhagen theme, you need to check in your theme if these classes exist then okay if not then you will have to replace these with your's
     var commentAvatar = $('.comment-author img.user-avatar');
     var articleAvatar = $('.article-author img.user-avatar');
     var postAvatar = $('.post-author img.user-avatar');
     var tableAvatar = $('.table img.user-avatar');
     
// Replace this default white circle(default avatar) URL with your's HC white circle URL (default avatar).
     var defaultAvatar = 'https://secure.gravatar.com/avatar/XYZdefault_avatar.png&r=g';  
     
    var assetsImage = "https://theme.zdassets.com/theme_assets/69704/ff5d28f89772a9371ac695291618cfdb8aa723e4.png";   // Uploaded assets folder image
 
   
       if (imageTag.attr("src") == defaultAvatar) {
    $(imageTag).attr("src", assetsImage);
    }
     
      if (commentAvatar.attr("src") == defaultAvatar) {
    $(imageTag).attr("src", assetsImage);
    }
     
       if (articleAvatar.attr("src") == defaultAvatar) {
    $(imageTag).attr("src", assetsImage);
    }
     
        if (postAvatar.attr("src") == defaultAvatar) {
    $(imageTag).attr("src", assetsImage);
    }
     
         if (tableAvatar.attr("src") == defaultAvatar) {
    $(imageTag).attr("src", assetsImage);
    }

   }
 customUserAvatar();  // Call the function
  
});

Is the new code to allow the button to be hidden without affecting the user avatar? Wouldn't it be easier to change the button code to only affect that button since the other code was working?

Which button?

are you talking about this code?

 if (HelpCenter.user.role=='end_user') { 
    var communityPostBlock = document.querySelector('.post-to-community');
     communityPostBlock.style.display = 'none';
  }

It will work for the button.

I meant the condition 'if (HelpCenter.user.role=='end_user)' isn't working for the code I provided to you.

I tried your new code and it does the same thing as your previous code. The way the code is right now, the new default user avatar is displayed for agent and admin. It is not displayed for end users. End users see the original grey user avatar. The "New Post" button in Community is viewable by agents/admin but it is not viewable by end users.

Here is what I have.

//Hides "New Post" buttons from end users in the community.
 if (HelpCenter.user.role=='end_user') { 
    var communityPostBlock = document.querySelector('.post-to-community');
     communityPostBlock.style.display = 'none';
  }

// Changes default user avatar
$(document).ready(function (){
   function customUserAvatar(){
   
     var imageTag = $('.user-avatar');

     // These bolded classes took from Copenhagen theme, you need to check in your theme if these classes exist then okay if not then you will have to replace these with your's
     var commentAvatar = $('.comment-author img.user-avatar');
     var articleAvatar = $('.article-author img.user-avatar');
     var postAvatar = $('.post-author img.user-avatar');
     var tableAvatar = $('.table img.user-avatar');
     
// Replace this default white circle(default avatar) URL with your's HC white circle URL (default avatar).
     var defaultAvatar = 'https://secure.gravatar.com/avatar/20ae92d81a06c65d4b172ea7c9901f87?default=https%3A%2F%2Fassets.zendesk.com%2Fhc%2Fassets%2Fdefault_avatar.png&r=g';  
     
    var assetsImage = "https://theme.zdassets.com/theme_assets/69704/ff5d28f89772a9371ac695291618cfdb8aa723e4.png";   // Uploaded assets folder image
 
   
    if (imageTag.attr("src") == defaultAvatar) {
    $(imageTag).attr("src", assetsImage);
    }
     
      if (commentAvatar && articleAvatar && tableAvatar.attr("src") == defaultAvatar) {
    $(imageTag).attr("src", assetsImage);
    }
     
       if (articleAvatar && tableAvatar.attr("src") == defaultAvatar) {
    $(imageTag).attr("src", assetsImage);
    }
     
         if (tableAvatar.attr("src") == defaultAvatar) {
    $(imageTag).attr("src", assetsImage);
    }

   }
 customUserAvatar();  // Call the function
  
});

If I comment out this code, the new default user avatar is displayed for end user, agent, admin but the "New Post" button in Community is viewable by everyone.

//Hides "New Post" buttons from end users in the community.
// if (HelpCenter.user.role=='end_user') { 
// var communityPostBlock = document.querySelector('.post-to-community');
// communityPostBlock.style.display = 'none';
// }

When I use the browser inspector, I do see an error that pertains to the above code. The error happens when viewing the preview as an end user.

I think some issue is in another code anyway, see what I did; I changed your post-to-community button code into jquery and move inside the function. 

Screenshot for the same changes I described above:

You can check the user role by adding this code and go to the console tab under inspect:

 console.log(HelpCenter.user.role); //Check the user role on Console under inspect tool

If you get the 'Anonymous' user then you need to change the user role 'end_user' to 'anonymous'.

Screenshots; I have tested the code; worked fine-

End User Role: Button has hidden and default user avatar image is showing.

Admin Role: Button is showing and default user avatar image is showing.

Admin Role: Button is showing and custom user avatar image is showing (after removing the avatar image from the user profile screen).

after doing code changes, if you get any issue then share the HC public URL and make your working theme live then I can see what's going wrong in your code because now the code is perfectly working on my HC.

Thank you very much!. That code is working perfectly. Everything works just like your screenshots. Thank you for your patience and hard work!

Cheeeeeeers :)

Hey Ifra, Do you know if its possible to change the styling of the avatar? Currently its injected and placed like a column next to the text in an email. This makes the text not full screen on mobile which we are trying to achieve. Cheers!

Hey Ré-Angelo Jarvis,

Can you please share the screenshot of your query so I can better understand?

Where are you getting the issue?

Thank You