Add image/avatar field to users

Question

I want that each user on my website will have an image in his profile. I don't need any thumbnails or something like that, just a picture for each user. The simpler the better. The problem is I don't know how to insert this type of field into my user profile. Any suggestions?

Zapata

What's your specific question? – Kitchen

The question is: "how do you simply add a profile picture field in the User model?", why do you ask? – Falls

Answer 1

You need to make a form that has a clean method that validates the properties you're looking for:

#models.py
from django.contrib.auth.models import User

class UserProfile(models.Model):
    user   = models.OneToOneField(User)
    avatar = models.ImageField()


#forms.py
from django import forms
from django.core.files.images import get_image_dimensions

from my_app.models import UserProfile


class UserProfileForm(forms.ModelForm):
    class Meta:
        model = UserProfile

    def clean_avatar(self):
        avatar = self.cleaned_data['avatar']

        try:
            w, h = get_image_dimensions(avatar)

            #validate dimensions
            max_width = max_height = 100
            if w > max_width or h > max_height:
                raise forms.ValidationError(
                    u'Please use an image that is '
                     '%s x %s pixels or smaller.' % (max_width, max_height))

            #validate content type
            main, sub = avatar.content_type.split('/')
            if not (main == 'image' and sub in ['jpeg', 'pjpeg', 'gif', 'png']):
                raise forms.ValidationError(u'Please use a JPEG, '
                    'GIF or PNG image.')

            #validate file size
            if len(avatar) > (20 * 1024):
                raise forms.ValidationError(
                    u'Avatar file size may not exceed 20k.')

        except AttributeError:
            """
            Handles case when we are updating the user profile
            and do not supply a new avatar
            """
            pass

        return avatar

Hospitalet

Answer 2

To connect the UserProfile model to your User model make sure you are extending your User model as fully explained in this tutorial: http://www.b-list.org/weblog/2006/jun/06/django-tips-extending-user-model/

This will allow you to access UserProfile attributes for your User, including the avatar, using user.get_profile().avatar. (Note the syntax in different in your template, see below for how to display the avatar in your template.)

You can use an image field in your UserProfile model for the avatar:

#upload at specific location
avatar = models.ImageField(upload_to='images')

This works exactly like a FileField but is specific for images and validates that the uploaded object is a valid image. To limit the file size you can use the answer given here by @pastylegs: Max image size on file upload

Then, assuming your userprofile model is called UserProfile, you access the avatar in your template as follows:

<img src=path/to/images/{{ user.get_profile.avatar }}">

More about the image field here: https://docs.djangoproject.com/en/dev/ref/models/fields/#imagefield

Electrocautery

Answer 3

Assuming you're using standard contrib.auth, you can designate a model as an 'user profile' model, via AUTH_PROFILE_MODULE setting. You can then use it to attach any additional information you want to the User objects, e.g.

from django.contrib.auth.models import User

class UserProfile(models.Model):
    user   = models.OneToOneField(User)
    avatar = models.ImageField() # or whatever

Hanfurd

I have a model for UserProfile, my problem is how to insert an image to it (because it is not like any other regular field) – Zapata

@smhagut: Read the file upload documentation. – Hanfurd

This is for every type of file. How do I make sure this is an image file and in a specific size? (not larger than 250KB, for example) and how do I connect it to my user profile? – Zapata