How to change default user avatar?

Beantwortet

22 Kommentare

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

    0
  • Shawn Yoder

    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?

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

    0
  • Shawn Yoder

    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?

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

     

    0
  • Shawn Yoder

    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.

     

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

    0
  • Shawn Yoder

    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.

     

     

    0
  • Shawn Yoder

    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.

     

     

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

     

     

    1
  • Shawn Yoder

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

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    :)

    0
  • Shawn Yoder

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

     

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

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

     

    0
  • Shawn Yoder

    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?

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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.

    0
  • Shawn Yoder

    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.

     

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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.

    0
  • Shawn Yoder

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

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Cheeeeeeers :)

     

     

    0
  • Ré-Angelo Jarvis

    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!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk