From 9e77205fed726d55f3cdf523dffd4b3dc8ca4bfd Mon Sep 17 00:00:00 2001
From: Leonardo Hakim <leohakim@gmail.com>
Date: Wed, 29 Nov 2023 17:08:23 +0100
Subject: [PATCH] feat: Add preview widget in Image Field Form

---
 gas/gas_settings.py                               | 2 ++
 gas/static/gas/css/gas.css                        | 4 ++++
 gas/templates/gas/tags/widgets/image_preview.html | 5 +++++
 gas/templatetags/form_tags.py                     | 9 +++++++--
 4 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 gas/templates/gas/tags/widgets/image_preview.html

diff --git a/gas/gas_settings.py b/gas/gas_settings.py
index 5d690b8..6bde0e2 100644
--- a/gas/gas_settings.py
+++ b/gas/gas_settings.py
@@ -20,3 +20,5 @@ MEDIA = getattr(settings, 'GAS_MEDIA', {
 })
 
 EXTRA_MEDIA = getattr(settings, 'GAS_EXTRA_MEDIA', None)
+
+IMAGE_PREVIEW_WIDTH = getattr(settings, 'IMAGE_PREVIEW_WIDTH', 240)
diff --git a/gas/static/gas/css/gas.css b/gas/static/gas/css/gas.css
index 6371124..b8db2f9 100644
--- a/gas/static/gas/css/gas.css
+++ b/gas/static/gas/css/gas.css
@@ -262,3 +262,7 @@ label {
     width: 20em;
     padding: 1em;
 }
+
+.preview {
+    display: block;
+}
diff --git a/gas/templates/gas/tags/widgets/image_preview.html b/gas/templates/gas/tags/widgets/image_preview.html
new file mode 100644
index 0000000..f6e47dd
--- /dev/null
+++ b/gas/templates/gas/tags/widgets/image_preview.html
@@ -0,0 +1,5 @@
+{% if widget.is_initial %}{{ widget.initial_text }}: <a href="{{ widget.value.url }}"><img src="{{ widget.value.url }}" width="{{ widget.attrs.IMAGE_PREVIEW_WIDTH }}" class="preview" /></a>{% if not widget.required %}
+<input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}>
+<label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>{% endif %}<br>
+{{ widget.input_text }}:{% endif %}
+<input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>
diff --git a/gas/templatetags/form_tags.py b/gas/templatetags/form_tags.py
index a0d8853..b8de373 100644
--- a/gas/templatetags/form_tags.py
+++ b/gas/templatetags/form_tags.py
@@ -1,7 +1,8 @@
-from django import forms
-from django import template
+from django import forms, template
 from django.template.loader import render_to_string
 
+from ..gas_settings import IMAGE_PREVIEW_WIDTH
+
 register = template.Library()
 
 
@@ -19,6 +20,10 @@ def base_form_field(field, css=None, container_class='', add_another_url=None, f
     elif isinstance(field.field, forms.DateField):
         field.field.widget.input_type = 'date'
 
+    if isinstance(field.field, forms.ImageField):
+        field.field.widget.template_name = 'gas/tags/widgets/image_preview.html'
+        field.field.widget.attrs['IMAGE_PREVIEW_WIDTH'] = IMAGE_PREVIEW_WIDTH
+
     if isinstance(field.field, forms.SplitDateTimeField):
         field.field.widget.widgets[1].attrs['placeholder'] = '00:00:00'
     else: