CODEWITHSUNDEEP
htmlcssdjangopython-3.xbootstrap-4
Stagger
Stagger

Reputation: 115

Display profile image in nav bar

I am building my own blog site.

I managed to have the users upload their own profile pic and have it displayed beside their post but now i want to have that same image be displayed in the navbar as a profile image but when i do it the same way i did it with the posts it doesnt work and looks like this.

Look at the right side of the nav bar

For the posts i made a profile image model and accessed the variable from within the html file but the same method does not work for displaying it in the nav bar.

I am using python and django for backend.

This is my model code for the profile image:

from django.db import models
from django.contrib.auth.models import User
from PIL import Image

class Profile(models.Model):
  user = models.OneToOneField(User, on_delete=models.CASCADE)
  image = models.ImageField(default="default.jpg", upload_to="profile_pics")

  def __str__(self):
     return f"{self.user.username} Profile"

  def save(self, *args, **kwargs):
     super().save(*args, **kwargs)

      img = Image.open(self.image.path)
      if img.height > 300 or img.width > 300:
          output_size = (300, 300)
          img.thumbnail(output_size)
          img.save(self.image.path)

This is how i reference it in my html file for displaying next to posts:

<img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}" id="img">

When i use any other image(either from a url or a local file) it works perfectly but when I use that variable to call the image it doesn't work

It might be worth mentioning that the navbar and post sections are in different html files. it looks like the nav bar's html file does not have access to that variable?

What am I doing wrong?

Upvotes: 2

Views: 4121

Answers (1)

Arjun Shahi
Arjun Shahi

Reputation: 7330

Try this:

<img class="rounded-circle article-img" src="{{ request.user.profile.image.url }}" id="img">

Upvotes: 4

Related Questions