How to change default user avatar?

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

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!

Cheeeeeeers :)

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

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.

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.

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.

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?

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') 

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';
  }