new: usr: Add opportunity to use profile picture. #4

templates/Game/index.html.twig

@@ -18,7 +18,13 @@
     <div class="hero-auth">
       {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
         <a href="{{ path('MineSeekerBundle_profile') }}" class="hero-auth-btn hero-auth-btn--profile">
-          <i class="fa fa-user-circle"></i>
+          {% if app.user.avatarPath %}
+            <img src="{{ app.user.avatarPath|imagine_filter('avatar_thumb') }}"
+                 alt="{{ app.user.username }}"
+                 class="hero-auth-avatar">
+          {% else %}
+            <span class="hero-auth-avatar hero-auth-avatar--initials">{{ app.user.username|slice(0, 2)|upper }}</span>
+          {% endif %}
           {{ app.user.username }}
         </a>
         <a href="{{ path('MineSeekerBundle_profile_security') }}" class="hero-auth-btn hero-auth-btn--security">

templates/Security/profile.html.twig

@@ -5,8 +5,10 @@
 {% block body %}
   <div class="profile-page">
     <div class="profile-header">
-      <div class="profile-avatar">
-        {{ app.user.username|slice(0, 2)|upper }}
+      <div id="profile-avatar-root"
+           data-upload-url="{{ path('MineSeekerBundle_profile_avatar') }}"
+           data-thumb-url="{{ app.user.avatarPath ? app.user.avatarPath|imagine_filter('avatar_thumb') : '' }}"
+           data-initials="{{ app.user.username|slice(0, 2)|upper }}">
       </div>
       <div class="profile-info">
         <h1 class="profile-name">{{ app.user.username }}</h1>
@@ -21,7 +23,6 @@
         </p>
       </div>
     </div>
-
     <div class="profile-stats">
       <div class="profile-stat">
         <i class="fa fa-gamepad profile-stat__icon"></i>
@@ -70,7 +71,6 @@
     {% endif %}
 
     <div id="profile-battle-root" data-games="{{ gamesData|json_encode|e('html') }}"></div>
-
     {% if recent|length > 0 %}
       <div class="profile-section">
         <h2 class="profile-section__title">