Added blog.ImageUpload to simplify attaching images to entries

Author: bmispelon

blog/admin.py

@@ -1,7 +1,12 @@
+from pathlib import Path
+
 from django.contrib import admin
-from django.utils.translation import gettext as _
+from django.urls import reverse
+from django.utils.html import format_html, format_html_join
+from django.utils.translation import gettext as _, gettext_lazy
+from sorl.thumbnail import get_thumbnail
 
-from .models import Entry, Event
+from .models import ContentFormat, Entry, Event, ImageUpload
 
 
 @admin.register(Entry)
@@ -22,6 +27,13 @@ def formfield_for_dbfield(self, db_field, **kwargs):
                     "style": "font-family: monospace; width: 810px;",
                 }
             )
+            formfield.help_text = format_html(
+                _(
+                    "Want to include an image? "
+                    '<a href="{}" target="_blank">Use the image upload helper!</a>'
+                ),
+                reverse("admin:blog_imageupload_changelist"),
+            )
         return formfield
 
 
@@ -37,3 +49,54 @@ class EventAdmin(admin.ModelAdmin):
         "is_published",
     )
     list_filter = ("is_active",)
+
+
+@admin.register(ImageUpload)
+class ImageUploadAdmin(admin.ModelAdmin):
+    list_display = (
+        "title",
+        "thumbnail",
+        "uploaded_on",
+        "link",
+        "copy_buttons",
+    )
+
+    class Media:
+        js = ["js/admin_blog_imageupload.js"]
+
+    @admin.display(description=gettext_lazy("Thumbnail"))
+    def thumbnail(self, obj):
+        thumbnail = get_thumbnail(obj.image, "150x150", quality=90)
+        return format_html('<img src="{}" alt="{}">', thumbnail.url, obj.alt_text)
+
+    @admin.display(description=gettext_lazy("Link"))
+    def link(self, obj):
+        url = obj.image.url
+        filename = Path(obj.image.name).name
+        return format_html('<a href="{}">{}</a>', url, filename)
+
+    def _get_copy_button(self, obj, contentformat):
+        source = contentformat.img(obj.image.url, obj.alt_text)
+        return format_html(
+            '<button type="button" data-clipboard-content="{}">{}</button>',
+            source,
+            contentformat.label,
+        )
+
+    @admin.display(description=gettext_lazy("Copy buttons"))
+    def copy_buttons(self, obj):
+        buttons = ((self._get_copy_button(obj, cf),) for cf in ContentFormat)
+        return format_html(
+            "<ul>{}</ul>",
+            format_html_join("\n", "<li>{}</li>", buttons),
+        )
+
+    def save_model(self, request, obj, form, change):
+        obj.uploaded_by = request.user
+        super().save_model(request, obj, form, change)
+
+    def formfield_for_dbfield(self, db_field, **kwargs):
+        formfield = super().formfield_for_dbfield(db_field, **kwargs)
+        if db_field.name == "image":
+            formfield.widget.attrs.update({"accept": "image/*"})
+        return formfield

blog/migrations/0004_imageupload.py

@@ -0,0 +1,30 @@
+# Generated by Django 5.1.5 on 2025-03-27 16:58
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0003_entry_content_format_markdown'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ImageUpload',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(help_text='Not published anywhere, just used internally', max_length=100)),
+                ('image', models.FileField(upload_to='blog/images/%Y/%m/')),
+                ('alt_text', models.TextField(help_text='Make the extra effort, it makes a difference 💖')),
+                ('uploaded_on', models.DateTimeField(auto_now_add=True)),
+                ('uploaded_by', models.ForeignKey(editable=False, null=True, on_delete=django.db.models.deletion.SET_NULL, to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'ordering': ('-uploaded_on',),
+            },
+        ),
+    ]

blog/models.py

@@ -64,6 +64,38 @@ def to_html(cls, fmt, source):
             )
         raise ValueError(f"Unsupported format {fmt}")
 
+    def img(self, url, alt_text):
+        """
+        Generate the source code for an image in the current format
+        """
+        CF = type(self)
+        return {
+            CF.REST: f".. image:: {url}\n   :alt: {alt_text}",
+            CF.HTML: f'<img src="{url}" alt="{alt_text}">',
+            CF.MARKDOWN: f"![{alt_text}]({url})",
+        }[self]
+
+
+class ImageUpload(models.Model):
+    """
+    Make it easier to attach images to blog posts.
+    """
+
+    title = models.CharField(
+        max_length=100, help_text="Not published anywhere, just used internally"
+    )
+    image = models.FileField(upload_to="blog/images/%Y/%m/")
+    alt_text = models.TextField(
+        help_text="Make the extra effort, it makes a difference 💖"
+    )
+    uploaded_on = models.DateTimeField(auto_now_add=True)
+    uploaded_by = models.ForeignKey(
+        "auth.User", null=True, editable=False, on_delete=models.SET_NULL
+    )
+
+    class Meta:
+        ordering = ("-uploaded_on",)
+
 
 class Entry(models.Model):
     headline = models.CharField(max_length=200)

blog/tests.py

@@ -3,11 +3,12 @@
 from io import StringIO
 
 from django.contrib.auth.models import User
+from django.core.files.base import ContentFile
 from django.test import TestCase
 from django.urls import reverse
 from django.utils import timezone
 
-from .models import ContentFormat, Entry, Event
+from .models import ContentFormat, Entry, Event, ImageUpload
 from .sitemaps import WeblogSitemap
 
 
@@ -235,3 +236,41 @@ def test_sitemap(self):
         self.assertEqual(len(urls), 1)
         url_info = urls[0]
         self.assertEqual(url_info["location"], entry.get_absolute_url())
+
+
+class ImageUploadTestCase(TestCase):
+    @classmethod
+    def setUpTestData(cls):
+        cls.user = User.objects.create_superuser("test")
+
+    def setUp(self):
+        super().setUp()
+        self.client.force_login(self.user)
+
+    def test_uploaded_by(self):
+        # Can't test the ModelForm directly because the logic in
+        # ModelAdmin.save_model()
+        data = {
+            "title": "test",
+            "alt_text": "test",
+            "image": ContentFile(b".", name="test.png"),
+        }
+        response = self.client.post(
+            reverse("admin:blog_imageupload_add"),
+            data=data,
+        )
+        self.assertEqual(response.status_code, 302)
+        upload = ImageUpload.objects.get()
+        self.assertEqual(upload.uploaded_by, self.user)
+
+    def test_contentformat_image_tags(self):
+        for cf, expected in [
+            (ContentFormat.REST, ".. image:: /test/image.png\n   :alt: TEST"),
+            (ContentFormat.HTML, '<img src="/test/image.png" alt="TEST">'),
+            (ContentFormat.MARKDOWN, "![TEST](/test/image.png)"),
+        ]:
+            with self.subTest(contentformat=cf):
+                self.assertEqual(
+                    cf.img(url="/test/image.png", alt_text="TEST"),
+                    expected,
+                )

djangoproject/static/js/admin_blog_imageupload.js

@@ -0,0 +1,16 @@
+document.addEventListener('DOMContentLoaded', function () {
+  document
+    .querySelectorAll('button[data-clipboard-content]')
+    .forEach(function (el) {
+      el.addEventListener('click', function (e) {
+        // Copy to clipboard and flash the button for a second
+        navigator.clipboard.writeText(el.dataset.clipboardContent);
+        el.style.backgroundColor = 'rebeccapurple';
+        el.style.color = 'white';
+        window.setTimeout(function () {
+          el.style.backgroundColor = '';
+          el.style.color = '';
+        }, 1000);
+      });
+    });
+});