course_template_list_item.hbs

<div class="pure-g">
  <div class="pure-u-20-24 padding-r-s-mobile">
    <h2 class="h3 margin-none">
      {{course.title}}
    </h2>
      <p class="light margin-none small">
      {{#t}}Next Due {{date course.next_section_due "full"}}{{/t}}
      <span class="pink">({{date course.next_section_due "fromNow"}})</span>
      &nbsp;/&nbsp;

        {{#t}}{{course.total_sections}} Sections{{/t}}
      </p>
  </div>
  <div class="pure-u-4-24">
    {{user-avatar user=course.author class="right"}}
  </div>
</div>

user_avatar.hbs

{{#if user.avatar_url}}
  <img class="user-avatar__img" {{bind-attr src=user.avatar_url}} alt="" />
{{else}}
  <span class="user-avatar__name">{{initials}}</span>
{{/if}}

user_avatar.js

GetSmart.UserAvatarComponent = Ember.Component.extend({
  GRADIENTS: [
    'nikki-sixx',
    'dee-snider',
    'david-lee-roth',
    'axel-rose'
  ],

  user: null,

  classNames: ['user-avatar'],

  classNameBindings: ['backgroundClass'],

  /**
   * Internal: Map user to a background class.
   *
   * Returns a class string.
   */
  backgroundClass: function() {
    if (this.get('user.avatar_url')) { return null; }
    return this.GRADIENTS[this.userHash()];
  }.property(),

  /**
   * Internal: Hash the user's name to a number between 0 and 3.
   *
   * Returns a number.
   */
  userHash: function() {
    var uid   = this.get('user.name'),
        total = 0;

    // get rid of this once it's all working
    return Math.round(Math.random() * 3);

    for (var i=0,l=uid.length; i<l; i++) {
      total += uid.charCodeAt(i);
    }

    return total % this.GRADIENTS.length;
  },

  initials: function() {
    return 'PH';
  }.property()
});