Merge pull request #11460 from edx/peter-fogg/edx-header-profile-image

Correctly add profile image to edX header.

lms/static/sass/shared/_header.scss

@@ -450,6 +450,7 @@ header.global-new {
 
   .user {
     @include float(right);
+    margin-top: 0;
 
     > .primary {
       display: block;
@@ -487,7 +488,7 @@ header.global-new {
       letter-spacing: 0;
 
       .user-image-frame {
-        max-width: ($baseline/2);
+        max-width: ($baseline*2);
         border-radius: 10%;
       }
 
@@ -507,7 +508,7 @@ header.global-new {
 
     .dropdown {
       font-size: $body-font-size;
-      padding: 0 ($baseline/2);
+      padding: ($baseline/5) ($baseline/2);
       color: $base-font-color;
       border: none;
       background: $white;

themes/edx.org/lms/templates/header.html

@@ -9,6 +9,8 @@ from django.utils.translation import ugettext as _
 import branding
 # app that handles site status messages
 from status.status import get_site_status_msg
+
+from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
 %>
 
 ## Provide a hook for themes to inject branding on top.
@@ -76,7 +78,12 @@ site_status_msg = get_site_status_msg(course_id)
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
           <span class="sr">${_("Dashboard for:")}</span>
-          <div>${user.username}</div>
+          <%
+          username = user.username
+          profile_image_url = get_profile_image_urls_for_user(user)['medium']
+          %>
+          <img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
+          <div class="label-username">${username}</div>
         </a>
       </li>
       <li class="primary">