How can I hide (with CSS) the ability for users to click their profile avatar in order to change it?

[rosenbet]

I'd like to disable the hover state for the avatar on the user profile page so that the "edit" pencil does not show. I'd also like to disable the click action so the user cannot click to upload a new image. Has anyone done this? I am not a code person, unfortunately! I know people have done lots of things with avatars but haven't been able to find this specific mod.

[stuart_ryan]

Hi  @rosenbet ,

I have not done this myself, however, wanted to share your question with the Canvas Developers‌ group. There are a lot of creative minds in there on how this might be done. I am unsure if you could do it with CSS alone (it is entirely possible) or you may need Javascript as well.

Hope that helps!

Stuart

[mcphersona7]

Hi Tom,

Our school has a similar issue. I've just then made up some JavaScript that you can add to your theme's JS file. 

//This code removes the link to change profile picture by
//replacing the 'a' element with the 'div' that surrounds it,
//copying the styles necessary to display the picture 
var loc = window.location.href.split('/');
if (loc[loc.length-1] == "profile") {
     var x = document.getElementsByClassName("avatar");
     if (x.length == 1) {
          var y = document.getElementsByClassName("profile-avatar-wrapper");
          //Copy styles from the 'a' to the 'div'
          y[0].style.backgroundImage = x[0].style.backgroundImage;
          y[0].style.width = x[0].style.width;
          y[0].style.height = x[0].style.height;
          y[0].style.backgroundSize = "cover";
          y[0].style.border = "2px solid #d3d9d9";
          y[0].style.backgroundRepeat = "no-repeat";
          y[0].style.backgroundPosition = "center";
          y[0].style.backgroundColor = "white";
          y[0].style.borderRadius = "500px";
          y[0].style.display = "block";
          //Now hide the 'a' element.
          x[0].style.display = "none";
          console.log("Locked profile picture.");
     }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It appears to work, but I suggest that you apply it to a test instance first and make sure it looks all well and good before moving further. Also take note that I haven't tried this on mobile yet. 

- Alex.

[rosenbet]

Wow, thanks  @mcphersona7 ‌. We had actually applied the following CSS to our site with similar results:

.profile-avatar-wrapper {
   pointer-events: none;
}‍‍‍

However...we did not haphazardly because I don't know nearly enough about code of any kind! Are you or your colleagues able to explain the difference between these two approaches in plain English narrative? I know the difference between CSS and JS but I don't know the difference is possible implications for one over the other. For example, is my approach too broad and might affect other parts of Canvas?

I'm also wondering if anyone has experience modifying mobile CSS or JS because those files are separate, so the above won't impact mobile.

[mcphersona7]

If anything that trick there is better than my approach, much simpler, no JS involved. I didn't know there was a value in CSS for disabling pointer events. 

The main implications that need to be considered are whether certain solutions will work for everyone. I believe it used to be a big issue with cross-browser compatibility of CSS and JavaScript solutions, but there seems to be a trend of increasing interoperability between browsers and platforms for web design solutions. Both my solution and yours create the same result with seemingly no adverse consequence. 

If affecting other elements with that class is your concern, you can better specify the element you want to change through CSS Combinators. 

Thank you for sharing your solution there!

- Alex.

[KristinL]

I just tried this, and it works really well! I'm much more comfortable with CSS than JavaScript, so thank you for sharing. Now it's just a matter of getting my bulk-upload of profile photos to work.

[sngamage]

Hi Tom

I have used your JS and uploaded into themes, but no joy.

Do we need to edit the JS? Thanks.

[mcphersona7]

Hi Surain,

The JS I provided there is not as useful as the CSS Tom provided, but over time I've made a few additions to patch a few holes. 

.profile-avatar-wrapper {
   pointer-events: none;
}

.avatar.profile_pic_link.none {
	pointer-events: none;
}

.avatar.profile_pic_link.approved {
	display:none;
}
.avatar.profile_pic_link.submitted {
	display:none;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I ended up removing the JS I posted above and am now relying on this CSS.

Regards,

Alex

[sngamage]

Thanks Alex. It's worked like a charm.

Do you have the solution for mobile app as well?

[mcphersona7]

I haven't really paid much attention to the mobile app so I don't, I'm not sure if just applying the same CSS to the mobile theme just works as is or not but our students mostly just use the website rather than the mobile app, so it hasn't been a problem for us thus far. 

[vrichter]

@alex and others.

Thanks so much for this long-awaited solution.  I have a super naive question:  when I upload the css file, is this all it contains?  Is the extension .css in a text file, or do I need a header for the document as in a standard css page in a website?  Thanks, Vi

[RickCannonVBCPS]

As a developer myself, the easy solution would be for the Canvas' developers to add an update avatar permission to the app I would think. I've done a lot of work within the SDK to move our students profile pictures from Synergy to Canvas, and it comes down to "what if the student changes their avatar?" Rerunning the RESTful service job is about a 20 hour task to update 60,000+ avatars daily. I'll do some digging to see if something's hiding in the SDK classes that may be of use.