I’m looking for code samples to learn how to use utilities:avatar package when each user has his custom profile picture (i.e. not retrieved from other services).
In my case I want to store the URL of user’s profile picture in the picture field of Profiles collection.
I can’t find any github project online.
Anything to share or suggest?
Sorry, I don’t understand @crapthings
My question is: in order to associate a user-chosen avatar – not a random one – to each one of the users connected on my platform, I need a way to store the URL of their avatar in a profile collection field.
My Profiles collection is structured like this:
I put this code in lib/lib.js file.
I’m trying to store the profile picture URL in profile.picture property of users universal collection as stated in the documentation:
customImageProperty: If you’re storing images URLs in a property on the user object, you can specify it here.
but it doesn’t load the image
UPDATE
Of course I’m publishing the picture property:
I don’t think so, but you can always get the same behavior using the class attribute:
class: Any custom CSS classes you’d like to define on the avatar container. The string is passed straight through to the class attribute on the div container element.
and then assigning 1 of 10 classes with different background colors.
Hi, I try to do the same with you, but I’m new on meteor. How do you do that?, I have this package installed, and I only get the avatar for facebook users, and I don`t know what to do for get the user pic.
Sorry I see this post now.
To use the custom picture for each user you need to define a custom field in users collection. The field should be under users.profile and there you store your custom pic url. In my case I defined this field:
profile.avatarUrl
Then set your avatar options, like this:
Avatar.setOptions({
//defaultImageUrl : "images/default-profile-pic.gif", //this work only when deployed to a publicly accessible URL
fallbackType : 'initials',
backgroundColor : "#e8e8e8",
customImageProperty : 'profile.avatarUrl',
imageSizes : {
small : 35,
large : 100
}
});
and put this definition under /lib/settings.js so both client and server can access it.
That said you need to create a function to store the custom pic url in this field. In my case I made something like:
I have been stuck with using Utilities avatar. One of my biggest disconnects is that I used CFS file system to save images before but now I want to use utilities avatar to preset initials then save an avatar image when users are ready. It appears that you are saving just the url value to profile.avatarUrl. When I try this the initials are not changing to the image. the url string that is save looks like C:\fakepath\300x300.jpg which doesnt seem right. Are there other steps you are taking other than set the value in the html file value?
Hi @massimosgrelli, I am stuck trying to make avatar depend on a User profile property. I would like every user to choose a category in their profile and make their avatar have a colored border in order to other users identify their category just looking to the avatar.
I was thinking about setting a class to the avatar and dinamically changing that class depending on the value of that category but not able to acomplish it…
Maybe I could use customImageProperty to make the avatar inherit the url but also add some custom class depending on the value set by the user in his profile.