Question

Can I give users a default profile image?

  • 3 August 2022
  • 9 replies
  • 116 views
lrodman
Rank
Userlevel 7
Badge +6

I want to encourage people to change their profile images

I was hoping to set a default image instead of the iMessage-style first and last initial. Something in unpleasant colors that says “change me” in large letters probably.

 

I know that gamification of updating your profile image is coming in October hopefully!

 

P.S. Want to make your users’ profile images larger? Free CSS here!

 

9 replies

Bfarkas
Rank
Userlevel 7
Badge +4

Closest I got to this was using a webhook that triggers on new user and then there is an API to update user where some items not coming from the initial creation field get adjusted, and adjust the ‘Avatar’ setting of the user. Never moved forward with it though, so not sure if still works. You have to have have the file loaded already, so I had loaded it to a test user, looked up that user using the API to get the current value to use when updating the new users.

gstager
Rank
Userlevel 7
Badge +6

This one is not very cut and dry because there are multiple places where your avatar can appear and each one would need to be addressed if you want that avatar to show in all those places.

For example: This code would only affect the flyout menu with the hamburger button.

If you want the avatar to show on a Profile Widget on a custom page - you would need different code.

/** Default Avatar for Main Menu **/

/** This Block Removes the Default User Initials **/
/** Not Sure if that 3 would be Different per Platform **/
span.ui-typography-heading-3 {
    display: none;
}

/** This Block Sets the URL for Your Default Avatar **/
 div.ui-avatar-background-light.ui-avatar-body.ui-avatar-text-color-accent {
    background-image: url("path/to/avatar.png") !important;
}

 

Greg
Bfarkas
Rank
Userlevel 7
Badge +4

Thinking about this more, you could go a different route entirely and instead of trying to encourage them to change it by modifying the image directly, just do an email notification tied to new users, or periodically with like a welcome to the system, heres some things to go do message with steps to update their image.

gstager
Rank
Userlevel 7
Badge +6

Yeah - I’m not sure the ROI is there on this one.

Might be better off having an orientation contest of sorts and award points/badges for certain aspects that folks complete such as uploading an avatar.

Greg
gstager
Rank
Userlevel 7
Badge +6

There is another reason NOT to do this.

If the learner does upload their own avatar image - it doesn’t override the default.

Greg
Bfarkas
Rank
Userlevel 7
Badge +4

There is another reason NOT to do this.

If the learner does upload their own avatar image - it doesn’t override the default.

Yeah, that’s why I was going the route of just putting an image in, then they can replace it. I don’t think it is worth the effort alone, but if doing another process for ‘new user do x’ than an relatively easy additional change.

lrodman
Rank
Userlevel 7
Badge +6 
myprofile-widget div.avatar__initials {
	background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/default-profile-image.png)  !important;
	height: 100px !important;
    width: 100px !important;
}/* default avatar image */

 

gstager
Rank
Userlevel 7
Badge +6 
myprofile-widget div.avatar__initials {
	background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/default-profile-image.png)  !important;
	height: 100px !important;
    width: 100px !important;
}/* default avatar image */

 

This *sort of* covers a widget but not adequately. It also does not address the avatar in the side menu or the avatar on the ‘My Activities’ page.

I can still see the initials and it covers other information as shown.

 

Greg
lrodman
Rank
Userlevel 7
Badge +6

Sorry! Normally it goes with this css:

 

/*move avatar image up and left*/
myprofile-widget div.wrapper.wrapper-shadow.ng-star-inserted div.cover div.profile { 
    padding-top: 10px !important;
    padding-left: 10px !important;
}
/*resize profile widget avatar image*/
myprofile-widget .profile .avatar-container avatar .avatar-clip .avatar__image {
    height: 100px !important;
    width: 100px !important;
}
/*move profile widget realname and email to the right*/
myprofile-widget .profile .details-container {
	padding-left: 110px !important;
	color: black !important;
	font-weight: bold !important;
}

Only appearing on the home page my profile widget is intentional.

 

Thanks! I forgot the initials.

Reply


Terms & ConditionsCookie settings