How can I replace the username with an avatar in Accounts.UI/LoginButtons?

help
1

My goal is to display an avatar instead of the username when signed in, like this:

1000×345 21.8 KB

This, it would seem, is a fairly common pattern, but I have not been able to locate an easy way to do it.

Test app
I have posted a test app at https://github.com/andersr/meteor-avatar-test In the test app, the avatar displays in the header, but is not integrated with LoginButtons.

Packages I’m using

⚡   meteor list
accounts-github              1.0.4  Login service for Github accounts
accounts-google              1.0.4  Login service for Google accounts
accounts-password            1.1.1  Password support for accounts
autopublish                  1.0.3  Publish the entire database to all clients
ian:accounts-ui-bootstrap-3  1.2.79  Bootstrap-styled accounts-ui with multi-language support.
insecure                     1.0.3  Allow all database writes by default
meteor-platform              1.2.2  Include a standard set of Meteor packages in your app
reactive-var                 1.0.5  Reactive variable
twbs:bootstrap               3.3.5  The most popular front-end framework for developing responsive, mobile first projects on the web.
utilities:avatar             0.9.0  Consolidated user avatar template (twitter, facebook, gravatar, etc.)

Customize meteor-accounts-ui-bootstrap?
Looking at the source for meteor-accounts-ui-bootstrap-3, it appears there is an option for including a user profile picture:

<template name="_loginButtonsLoggedInDropdown">
	<li id="login-dropdown-list" class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown">
			{{displayName}}

                    <!-- how can I make use of this? -->
			{{#with user_profile_picture}}
				<img src="{{this}}" width="30px" height="30px" class="img-circle" alt="#" />
			{{/with}}

			<b class="caret"></b>
		</a>
		<div class="dropdown-menu">
			{{#if inMessageOnlyFlow}}
				{{> _loginButtonsMessages}}
			{{else}}
				{{#if inChangePasswordFlow}}
					{{> _loginButtonsChangePassword}}
				{{else}}
					{{> _loginButtonsLoggedInDropdownActions}}
				{{/if}}
			{{/if}}
		</div>
	</li>
</template>

However, I have not been able to locate any documentation on how to do that.

Any tips on how to display an avatar instead of the username would be appreciated!

2 Likes
2

Hi,

meteor-accounts-ui-bootstrap-3 is checking if user.profile.display_picture is set. If so it’ll show the image that is referenced as display_picture.

Here is an example how to set this picture from Facebook:

Accounts.onLogin(function() {

  if (Meteor.user().services.facebook) {
    var facebookId = Meteor.user().services.facebook.id;
    Meteor.users.update({
      _id: Meteor.userId()
    }, {
      $set: {
        "profile.display_picture": "http://graph.facebook.com/" + facebookId + "/picture?type=square"
      }
    });
  }
  return true;
});

I hope this helps.

Best regards
Tilmann