Profiles and Images

View saved

Goal for this part

Attach a profile picture and optional extras to each user. You will create a Profile model with a OneToOneField to User, install Pillow for image handling, configure media settings, and display avatars beside posts.

After this snapshot, home feed posts should show each author’s image (or a default), and media files should load in development.

What you should already know

You should understand the User model and foreign keys from Models and Admin. Login should already work so you can view a profile page while authenticated.

Pillow is a Python imaging library Django uses when you define ImageField. Install it via the shared requirements file.

Concepts: OneToOne profile and media files

A one-to-one link keeps auth fields on User while profile fields live on Profile. Signals (or explicit creation on register) can ensure every user gets a profile row.

User uploads are media files, not static files. Set MEDIA_ROOT and MEDIA_URL, then serve them in development by extending urlpatterns with static() when DEBUG is true.

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

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"

Walkthrough: show images in templates

In the post loop, use {{ post.author.profile.image.url }} for the avatar src. Ensure a default image exists under media so new users do not break the template.

Migrate after adding the model. Create profiles for existing users in the admin or via a data migration/signal included in the snapshot.

# settings.py (development)
MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"

# urls.py when DEBUG
from django.conf import settings
from django.conf.urls.static import static

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

How to run it and what you should see

Run 07-Profiles-And-Images, migrate, open home, and confirm avatars appear. Upload a different image in admin for a user’s profile and refresh the feed.

git clone https://github.com/michaeldunga1/fcc-django-blog.git
cd fcc-django-blog/07-Profiles-And-Images
python3 -m venv .venv
source .venv/bin/activate
pip install -r ../requirements.txt
python manage.py migrate
python manage.py runserver

Common mistakes and troubleshooting

Missing Pillow shows up as an ImageField error on migrate or save. Broken image icons often mean MEDIA URL patterns were not added, or the default file path is wrong.

AttributeError on user.profile means that user has no Profile row yet—create one in admin or fix the create-profile signal.

Try this

Replace one author’s image and confirm only that author’s posts show the new avatar. Inspect the saved file under media/profile_pics/.

  • Profile extends User without subclassing it
  • Media ≠ static: uploads need MEDIA_* settings
  • Always provide a default image for new accounts

Next: Update Profile

Comments

One comment per signed-in account. Comments are saved with this page’s URL.