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 %}

Crafted by GlenH with 🔥 using  React     NextJS,     MDX, Tailwind CSS     & ContentLayer. Hosted on Netlify  

© GlenH.me Contents from 2018 - 2024. Open Source