[#1160] Added cropping for profile image

Author: vaszig

requirements/base.in

@@ -47,6 +47,7 @@ django-open-forms-client
 django-htmx
 playwright
 django-yubin
+django-image-cropping
 
 # API libraries
 djangorestframework

requirements/base.txt

@@ -111,7 +111,9 @@ django==3.2.15
 django-admin-index==1.5.0
     # via -r requirements/base.in
 django-appconf==1.0.5
-    # via django-timeline-logger
+    # via
+    #   django-image-cropping
+    #   django-timeline-logger
 django-autoslug==1.9.8
     # via -r requirements/base.in
 django-axes==5.25.0
@@ -151,6 +153,8 @@ django-hijack==3.0.4
     # via -r requirements/base.in
 django-htmx==1.13.0
     # via -r requirements/base.in
+django-image-cropping==1.7
+    # via -r requirements/base.in
 django-import-export==2.6.1
     # via -r requirements/base.in
 django-ipware==4.0.0

requirements/ci.txt

@@ -176,6 +176,7 @@ django-appconf==1.0.5
     # via
     #   -c requirements/base.txt
     #   -r requirements/base.txt
+    #   django-image-cropping
     #   django-timeline-logger
 django-autoslug==1.9.8
     # via
@@ -250,6 +251,10 @@ django-htmx==1.13.0
     # via
     #   -c requirements/base.txt
     #   -r requirements/base.txt
+django-image-cropping==1.7
+    # via
+    #   -c requirements/base.txt
+    #   -r requirements/base.txt
 django-import-export==2.6.1
     # via
     #   -c requirements/base.txt

requirements/dev.txt

@@ -201,6 +201,7 @@ django-appconf==1.0.5
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
+    #   django-image-cropping
     #   django-timeline-logger
 django-autoslug==1.9.8
     # via
@@ -279,6 +280,10 @@ django-htmx==1.13.0
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
+django-image-cropping==1.7
+    # via
+    #   -c requirements/ci.txt
+    #   -r requirements/ci.txt
 django-import-export==2.6.1
     # via
     #   -c requirements/ci.txt

src/open_inwoner/accounts/admin.py

@@ -6,6 +6,7 @@
 from django.utils.html import format_html
 from django.utils.translation import ngettext, ugettext_lazy as _
 
+from image_cropping import ImageCroppingMixin
 from privates.admin import PrivateMediaMixin
 
 from open_inwoner.utils.mixins import UUIDAdminFirstInOrder
@@ -52,7 +53,7 @@ def clean(self, *args, **kwargs):
 
 
 @admin.register(User)
-class _UserAdmin(UserAdmin):
+class _UserAdmin(ImageCroppingMixin, UserAdmin):
     form = _UserChangeForm
     add_form = _UserCreationForm
     hijack_success_url = reverse_lazy("root")
@@ -74,6 +75,7 @@ class _UserAdmin(UserAdmin):
                     "oidc_id",
                     "birthday",
                     "image",
+                    "cropping",
                     "street",
                     "housenumber",
                     "postcode",

src/open_inwoner/accounts/forms.py

@@ -69,13 +69,15 @@ class Meta:
             "email",
             "phonenumber",
             "image",
+            "cropping",
         )
 
     def __init__(self, user, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
         if user.contact_type != ContactTypeChoices.begeleider:
             del self.fields["image"]
+            del self.fields["cropping"]
 
 
 class UserForm(BaseUserForm):
@@ -93,6 +95,7 @@ class Meta:
             "postcode",
             "city",
             "image",
+            "cropping",
         )
 
 

src/open_inwoner/accounts/migrations/0056_auto_20230307_0852.py

@@ -0,0 +1,41 @@
+# Generated by Django 3.2.15 on 2023-03-07 07:52
+
+from django.db import migrations
+import image_cropping.fields
+import open_inwoner.accounts.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("accounts", "0055_user_image"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="user",
+            name="cropping",
+            field=image_cropping.fields.ImageRatioField(
+                "image",
+                "150x150",
+                adapt_rotation=False,
+                allow_fullsize=False,
+                free_crop=False,
+                help_text=None,
+                hide_image_field=False,
+                size_warning=True,
+                verbose_name="cropping",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="user",
+            name="image",
+            field=image_cropping.fields.ImageCropField(
+                blank=True,
+                help_text="Image",
+                null=True,
+                upload_to=open_inwoner.accounts.models.generate_uuid_image_name,
+                verbose_name="Image",
+            ),
+        ),
+    ]

src/open_inwoner/accounts/models.py

@@ -11,6 +11,7 @@
 from django.utils.crypto import get_random_string
 from django.utils.translation import ugettext_lazy as _
 
+from image_cropping import ImageCropField, ImageRatioField
 from localflavor.nl.models import NLBSNField, NLZipCodeField
 from mail_editor.helpers import find_template
 from privates.storages import PrivateMediaFileSystemStorage
@@ -73,13 +74,14 @@ class User(AbstractBaseUser, PermissionsMixin):
         max_length=15,
         validators=[validate_phone_number],
     )
-    image = models.ImageField(
+    image = ImageCropField(
         verbose_name=_("Image"),
         null=True,
         blank=True,
         upload_to=generate_uuid_image_name,
         help_text=_("Image"),
     )
+    cropping = ImageRatioField("image", "150x150", size_warning=True)
     is_staff = models.BooleanField(
         verbose_name=_("Staff status"),
         default=False,

src/open_inwoner/components/templates/components/Form/ImageCrop.html

@@ -0,0 +1,15 @@
+{% load form_tags %}
+
+<div class="form__control {{ extra_classes|default:"" }}">
+    <label class="label">
+        {{ field.label }}
+        {{ field|addclass:"image-ratio" }}
+        {% if field.help_text and not no_help %}
+            <p class="p">{{ field.help_text }}</p>
+        {% endif %}
+
+        {% if field.errors %}
+            {% errors errors=field.errors %}
+        {% endif %}
+    </label>
+</div>

src/open_inwoner/components/templatetags/form_tags.py

@@ -272,6 +272,11 @@ def date_field(field, **kwargs):
     return {**kwargs, "field": field}
 
 
+@register.inclusion_tag("components/Form/ImageCrop.html")
+def image_crop(field, **kwargs):
+    return {**kwargs, "field": field}
+
+
 @register.inclusion_tag("components/Form/Search.html")
 def search(field, **kwargs):
     """

src/open_inwoner/conf/base.py

@@ -145,6 +145,7 @@
     "localflavor",
     "treebeard",
     "easy_thumbnails",  # used by filer
+    "image_cropping",
     "filer",
     "mptt",
     "hijack.contrib.admin",
@@ -525,6 +526,15 @@
     },
 }
 
+from easy_thumbnails.conf import Settings as thumbnail_settings
+
+THUMBNAIL_PROCESSORS = (
+    "image_cropping.thumbnail_processors.crop_corners",
+) + thumbnail_settings.THUMBNAIL_PROCESSORS
+
+IMAGE_CROPPING_BACKEND = "image_cropping.backends.easy_thumbs.EasyThumbnailsBackend"
+IMAGE_CROPPING_JQUERY_URL = "/static/admin/js/vendor/jquery/jquery.min.js"
+
 SENDFILE_ROOT = PRIVATE_MEDIA_ROOT
 SENDFILE_BACKEND = "django_sendfile.backends.simple"
 PRIVATE_MEDIA_URL = "/private_files/"

src/open_inwoner/scss/components/Profile/edit.scss

@@ -0,0 +1,5 @@
+.crop-thumb {
+  @extend .input;
+
+  margin-top: var(--spacing-medium);
+}

src/open_inwoner/scss/components/_index.scss

@@ -85,3 +85,4 @@
 @import './modal/modal';
 @import './Emoji/Emoji.scss';
 @import './Profile/personal-information';
+@import './Profile/edit.scss';

src/open_inwoner/templates/master.html

@@ -26,6 +26,7 @@
             }
         </style>
         {% block extra_css %}{% endblock %}
+        {% block extra_head %}{% endblock %}
 
         {% include "analytics/google.html" %}
         {% include "analytics/matomo.html" %}

src/open_inwoner/templates/pages/profile/edit.html

@@ -1,10 +1,45 @@
 {% extends 'master.html' %}
-{% load i18n l10n link_tags file_tags button_tags utils icon_tags form_tags %}
+{% load i18n l10n form_tags %}
+
+{% block extra_head %}
+    {{form.media}}
+{% endblock %}
 
 {% block content %}
-<h1 class="h1" id="title">
-    {% trans "Profiel bewerken" %}
-</h1>
+    <h1 class="h1" id="title">
+        {% trans "Profiel bewerken" %}
+    </h1>
+
+    {% render_form id="profile-edit" method="POST" form=form form_action=form_action enctype="multipart/form-data" %}
+        {% csrf_token %}
+
+        {% with request.user as user %}
+            {% if user.is_digid_and_brp %}
+                {% input form.display_name %}
+                {% input form.email %}
+                {% input form.phonenumber %}
+                {% if user.contact_type == "begeleider" %}
+                    {% input form.image no_help=True %}
+                    {% image_crop form.cropping %}
+                {% endif %}
+            {% else %}
+                {% input form.first_name %}
+                {% input form.last_name %}
+                {% input form.display_name %}
+                {% input form.email %}
+                {% input form.phonenumber %}
+                {% date_field form.birthday no_help=True %}
+                {% input form.street %}
+                {% input form.housenumber %}
+                {% input form.postcode %}
+                {% input form.city %}
+                {% if user.contact_type == "begeleider" %}
+                    {% input form.image no_help=True %}
+                    {% image_crop form.cropping %}
+                {% endif %}
+            {% endif %}
+        {% endwith %}
+        {% form_actions primary_text=_("Opslaan") primary_icon="arrow_forward" secondary_href='accounts:my_profile' secondary_text=_('Terug') secondary_icon='arrow_backward' secondary_icon_position="before" enctype="multipart/form-data" %}
+    {% endrender_form %}
 
-{% form form_object=form method="POST" id="profile-edit" submit_text=_("Opslaan") secondary_href='accounts:my_profile' secondary_text=_('Terug') secondary_icon='arrow_backward' secondary_icon_position="before" enctype="multipart/form-data" %}
 {% endblock content %}