Code

How to display first letter of user's name as avatar

Displaying first letter of user's name as avatar

Here is a snippet to enable you to display the first letter of a user name as avatar in the absence of the user profile image in Django template.

This will display the image corresponding to the first letter of the user's first name. For example if the user's first name is "Tom" the snippet below will enable you to display the letter 'T' as an avatar.

Create a div instead of an image with rounded corners as shown in the code below.

{% if post.author.profile.image %}
      <img src="{{ post.author.profile.image.url }}" class='logo3'/>
 {% else %}
 <div class="text-center align-center"  style="align-items:center !important;justify-content:center !important;background-color: black;width: 50px;height: 50px;border-radius: 50px">
     <p style="padding-top: 25%" >{{ post.author.username.0 }}</p>
 </div>
 {% endif %}
GlenGH Logo

© 2026 Glensea.com - Contents from 2018 / Open Source Code

Crafted using - ReactNextJSMDXTailwind CSS& ContentLayer2Hosted on Netlify