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:
{
useId : .... ,
...
profilePictureUrl: 'http://...'
}
My choice was to keep Profiles outside universal collections – like users – to manage subscriptions the way I need.
So according to the utilities:avatar documentation – https://github.com/meteor-utilities/avatar/ – there’s a field in Avatar options which can help me on this:
Avatar.setOptions ({customImageProperty : ???? })
Now it looks like I can specify a property field from user collection and assign it to this customImageProperty object property:
customImageProperty: If you’re storing images URLs in a property on the user object, you can specify it here.
No way to use a custom collection field instead?
BTW I can’t make the customImageProperty working properly with a user’s property field too.
What Am I doing wrong?
Avatar.setOptions({
defaultImageUrl : "images/default-profile-pic.gif",
backgroundColor : "#e8e8e8",
customImageProperty : 'profile.picture'
} );
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:
Meteor.publish(null, function() {
return Meteor.users.find({}, {fields: {_id: 1, username: 1, emails: 1, 'profile.picture': 1}});
});I solved it.
I made a stupid mistake calling the avatar template. I was doing:
<div class="avatar-message-container">{{> avatar user=userId shape='circle' size='small'}}</div>
instead of:
<div class="avatar-message-container">{{> avatar user=currentUser shape='circle' size='small'}}</div>is there a way to randomly use a background color like what they use in this forums?
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.
@massimosgrelli thanks. i’ve already made my own helper to do this without using an avatar package. i only use the randamColor() package =)
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:
Meteor.users.update({_id : Meteor.userId()}, {$set : {'profile.avatarUrl' : $('#profilePicture').val()}})
Remember to publish profile with the user data, so in your publications do something like:
Meteor.publish(null, function() {
return Meteor.users.find({}, {fields: {_id: 1, username: 1, emails: 1, 'profile.avatarUrl': 1}});
});
and that’s it. Read the avatar documentation, it’s pretty well done
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.
Any help??
My project: https://github.com/fricolab/slowfashionnext-events
Thanks.