Add thumbnails on search results

common/settings.py

@@ -17,6 +17,7 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'easy_thumbnails',
     'recette',
 ]
 
@@ -75,4 +76,10 @@ STATIC_ROOT = os.path.join(BASE_DIR, 'static')
 MEDIA_URL = '/media/'
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
 
+THUMBNAIL_ALIASES = {
+    '': {
+        'thumbnail': {'size': (120, 120), 'crop': True},
+    },
+}
+
 from .local_settings import *

common/urls.py

@@ -1,5 +1,7 @@
+from django.conf import settings
 from django.contrib import admin
 from django.urls import path
+from django.views.static import serve
 
 from recette.views import home, recette
 
@@ -9,3 +11,10 @@ urlpatterns = [
     path('', home, name='home'),
     path('recette/<int:pk>/', recette, name='recette'),
 ]
+
+if settings.DEBUG:
+    urlpatterns += [
+        path('media/<path:path>', serve, {
+            'document_root': settings.MEDIA_ROOT,
+        }),
+    ]

requirements.txt

@@ -1,2 +1,3 @@
 django>=2.0
 pillow
+easy-thumbnails==2.5

templates/index.html

@@ -1,19 +1,34 @@
 {% extends 'base.html' %}
+{% load thumbnail %}
+
+{% block extrahead %}
+<style>
+ul.results { list-style-type: none; padding: 0; }
+ul.results li { margin: 0; padding: 2px; }
+ul.results li, ul.results li * { vertical-align: middle; }
+ul.results li:nth-child(odd) { background-color: #eee; }
+input#id_text { padding: 10px 0; }
+form#search-form p { display: inline-block; margin-right: 1em; }
+</style>
+{% endblock %}
 
 {% block content %}
 <h1>Recettes</h1>
 
-<form method="POST">{% csrf_token %}
+<form id="search-form" method="POST">{% csrf_token %}
     {{ form.as_p }}
-    <button>Rechercher</button>
+    <div><button>Rechercher</button></div>
 </form>
 
 {% if num_results is not None %}
 <div class="results">{{ num_results }} résultat(s)</div>
 {% endif %}
-<ul>
+<ul class="results">
 {% for recette in recettes %}
-    <li><a href="{{ recette.get_absolute_url }}">{{ recette.nom }}</a></li>
+    <li>
+        <a href="{{ recette.get_absolute_url }}">{{ recette.nom }}</a>
+        <img src="{{ recette.photo|thumbnail_url:'thumbnail' }}">
+    </li>
 {% endfor %}
 </ul>
 {% endblock %}