Implemented django-thumbs-v2 and modified PlaceOverview template to use scaled images.

requirements.txt

@@ -1 +1,2 @@
-django
+django
+django-thumbs-v2

source/lostplaces/lostplaces/settings.py

@@ -38,6 +38,7 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'django_thumbs'
 ]
 
 MIDDLEWARE = [

source/lostplaces/lostplaces_app/models.py

@@ -3,7 +3,7 @@ import uuid
 
 from django.db import models
 from django.dispatch import receiver
-from django.utils.translation import ugettext_lazy as _
+from django_thumbs.fields import ImageThumbsField
 
 # Create your models here.
 
@@ -18,10 +18,15 @@ class Place (models.Model):
         return self.name
 
 class PlaceImage (models.Model):
-    filename = models.ImageField(
+    filename = ImageThumbsField(
-        upload_to=lambda instance, filename: 'places/' + str(uuid.uuid4()),
+        upload_to=lambda instance, filename: 'places/' + str(uuid.uuid4())+'.'+filename.split('.')[-1],
-        max_length=50
+        max_length=50,
+        sizes = (
+            {'code': 'thumbnail', 'wxh': '390x390'},
+            {'code': 'hero', 'wxh': '700x700'},
+            {'code': 'large', 'wxh': '1920x1920'}
         )
+    )
     place = models.ForeignKey(Place, on_delete=models.CASCADE, related_name='images')
     description = models.TextField(blank=True)
 

source/lostplaces/lostplaces_app/templates/placeOverview.html

@@ -7,7 +7,7 @@
 
 <article class="LP-PlaceOverview">
     <div class="LP-PlaceOverview__Info">
-        <img class="LP-PlaceOveriew__Image" src="{{ place.images.first.filename.url }}">
+        <img class="LP-PlaceOveriew__Image" src="{{ place.images.first.filename.url_hero }}">
         <article class="LP-PlaceOverView__Description">
             <div class="LP-TextSection">
                 <h1 class="LP-Headline LP-Headline--main">{{place.name}}</h1>
@@ -63,7 +63,7 @@
             <ul class="LP-PlaceOverView__ImageList">
                 {% for place_image in place.images.all %}
                 <li class="LP-PlaceOverView__ImageItem">
-                    <a href="{{ place_image.filename.url }}"> <img src="{{ place_image.filename.url }}"></a>
+                    <a href="{{ place_image.filename.url_large }}"> <img src="{{ place_image.filename.url_thumbnail }}"></a>
                 </li>
                 {% endfor %}
             </ul>