Merge pull request #56 from chnm/refactor/forensic-display

Use Wagtail for the forensic images page

config/urls.py

@@ -9,9 +9,10 @@
 urlpatterns = [
     path("", include("denig.urls")),
     path("admin/", admin.site.urls),
-    path("cms/", include(wagtailadmin_urls)),
-    path("essays/", include(wagtail_urls)),
     path("accounts/", include("authuser.urls")),
     path("prose/", include("prose.urls")),
     path("__debug__/", include("debug_toolbar.urls")),
+    # Wagtial URLs
+    path("cms/", include(wagtailadmin_urls)),
+    path("essays/", include(wagtail_urls)),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

denig/models.py

@@ -338,8 +338,7 @@ def alphabetize_tags(self):
 
     def get_absolute_url(self):
         """Return the URL for this document."""
-        """changed from return reverse("document", args=[str(self.id)]) """
-        return reverse("document", kwargs={"slug": self.slug})
+        return reverse("manuscript_page", kwargs={"slug": self.slug})
 
     @property
     def permalink(self):

denig/urls.py

@@ -5,7 +5,6 @@
 urlpatterns = [
     path("", views.index, name="index"),
     path("about/", views.about, name="about"),
-    path("forensics/", views.ForensicsListView.as_view(), name="forensics"),
     path("music/", views.MusicListView.as_view(), name="music"),
     path("manuscript/", views.DocumentListView.as_view(), name="manuscript"),
     path(

denig/views.py

@@ -191,21 +191,6 @@ def get_context_data(self, **kwargs):
         return context
 
 
-class ForensicsListView(generic.View):
-    def get(self, request, *args, **kwargs):
-        image_list = Image.objects.filter(image_type="forensics").order_by("id")
-        document_list = (
-            Document.objects.filter(attached_images__image_type="forensics")
-            .order_by("id")
-            .distinct()
-        )
-        return render(
-            request,
-            "forensics.html",
-            {"image_list": image_list, "document_list": document_list},
-        )
-
-
 class MusicListView(generic.View):
     def get(self, request, *args, **kwargs):
         hymnal_list = (

essays/migrations/0022_forensicpage_galleryimage.py

@@ -0,0 +1,90 @@
+# Generated by Django 4.2.13 on 2024-10-17 20:41
+
+import django.db.models.deletion
+import modelcluster.fields
+import wagtail.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("wagtailcore", "0093_uploadedfile"),
+        ("wagtailimages", "0026_delete_uploadedimage"),
+        ("essays", "0021_essaypage_preview_image"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="ForensicPage",
+            fields=[
+                (
+                    "page_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailcore.page",
+                    ),
+                ),
+                ("body", wagtail.fields.RichTextField(blank=True)),
+                ("link_to_manuscript_page", models.URLField(blank=True)),
+                (
+                    "preview_image",
+                    models.ForeignKey(
+                        blank=True,
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="+",
+                        to="wagtailimages.image",
+                    ),
+                ),
+            ],
+            options={
+                "abstract": False,
+            },
+            bases=("wagtailcore.page",),
+        ),
+        migrations.CreateModel(
+            name="GalleryImage",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                (
+                    "sort_order",
+                    models.IntegerField(blank=True, editable=False, null=True),
+                ),
+                ("caption", models.CharField(blank=True, max_length=250)),
+                (
+                    "image",
+                    models.ForeignKey(
+                        blank=True,
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="+",
+                        to="wagtailimages.image",
+                    ),
+                ),
+                (
+                    "page",
+                    modelcluster.fields.ParentalKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="gallery_images",
+                        to="essays.forensicpage",
+                    ),
+                ),
+            ],
+            options={
+                "ordering": ["sort_order"],
+                "abstract": False,
+            },
+        ),
+    ]

essays/migrations/0023_forensicpage_related_manuscript_page_and_more.py

@@ -0,0 +1,38 @@
+# Generated by Django 4.2.13 on 2024-10-18 14:23
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("denig", "0043_alter_image_caption"),
+        ("wagtailimages", "0026_delete_uploadedimage"),
+        ("essays", "0022_forensicpage_galleryimage"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="forensicpage",
+            name="related_manuscript_page",
+            field=models.ForeignKey(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="+",
+                to="denig.document",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="forensicpage",
+            name="preview_image",
+            field=models.ForeignKey(
+                blank=True,
+                help_text="If no preview image is provided, the first image in the gallery will be used.",
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="+",
+                to="wagtailimages.image",
+            ),
+        ),
+    ]

essays/models.py

@@ -5,11 +5,63 @@
 from modelcluster.fields import ParentalKey
 from prose.models import Document
 from taggit_selectize.managers import TaggableManager
-from wagtail.admin.panels import FieldPanel
-from wagtail.fields import RichTextField
+from wagtail.admin.panels import FieldPanel, InlinePanel, PageChooserPanel
+from wagtail.fields import RichTextField, StreamField
+from wagtail.images.blocks import ImageChooserBlock
 from wagtail.models import Orderable, Page
 from wagtail.search import index
 
+from denig.models import Document
+
+
+class OrderedDocumentChooserPanel(PageChooserPanel):
+    def get_form_class(self):
+        form_class = super().get_form_class()
+        form_class.base_fields[self.field_name].queryset = Document.objects.order_by(
+            "document_id"
+        )
+        return form_class
+
+
+class GalleryImage(Orderable):
+    page = ParentalKey("ForensicPage", related_name="gallery_images")
+    image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+    )
+    caption = models.CharField(blank=True, max_length=250)
+
+    panels = [
+        FieldPanel("image"),
+        FieldPanel("caption"),
+    ]
+
+
+class ForensicPage(Page):
+    body = RichTextField(blank=True)
+    preview_image = models.ForeignKey(
+        "wagtailimages.Image",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text="If no preview image is provided, the first image in the gallery will be used.",
+    )
+    link_to_manuscript_page = models.URLField(blank=True)
+    related_manuscript_page = models.ForeignKey(
+        Document, null=True, blank=True, on_delete=models.SET_NULL, related_name="+"
+    )
+
+    content_panels = Page.content_panels + [
+        FieldPanel("body"),
+        FieldPanel("preview_image"),
+        OrderedDocumentChooserPanel("related_manuscript_page"),
+        InlinePanel("gallery_images", label="Gallery images"),
+    ]
+
 
 class EssayIndexPage(Page):
     intro = RichTextField(blank=True)

essays/templates/essays/essay_index_page.html

@@ -20,10 +20,13 @@ <h1>{{ page.title }}.</h1>
                             <div class="w-full h-48 overflow-hidden">
                                 {% image post.specific.preview_image width-400 %}
                             </div>
+                        {% else %}
+                            <div class="w-full h-48 overflow-hidden">
+                                {% image post.specific.gallery_images.first.image width-400 %}
+                            </div>
                         {% endif %}
                         <div class="p-4">
-                            <h2 class="text-xl font-semibold mb-2"><a href="{% pageurl post %}"
-                                                                      class="text-black underline hover:no-underline">{{ post.title }}</a></h2>
+                            <h2 class="text-xl font-semibold mb-2"><a href="{% pageurl post %}" class="text-black underline hover:no-underline">{{ post.title }}</a></h2>
                             {% if post.specific.author %}
                                 <p class="text-gray-700 mb-2">by {{ post.specific.author }}</p>
                             {% endif %}
@@ -36,5 +39,4 @@ <h2 class="text-xl font-semibold mb-2"><a href="{% pageurl post %}"
             </div>
         </div>
     </div>
-    </div>
-{% endblock content %}
+{% endblock content %}

essays/templates/essays/forensic_page.html

@@ -0,0 +1,73 @@
+{% extends "base.html" %}
+
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+
+{% block body_class %}essay-page top{% endblock %}
+
+{% block content %}
+    <div x-data="{
+                 modalOpen: false,
+                 modalImage: '',
+                 modalCaption: ''
+                 }">
+
+        <div class="prose relative max-w-4xl mx-auto py-12">
+            <h1>{{ page.title }}</h1>
+        </div>
+
+        <div class="prose relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+
+            {% if page.intro %}
+                <div class="intro text-xl">{{ page.intro }}</div>
+            {% endif %}
+
+            {{ page.body|richtext }}
+            {% if page.related_manuscript_page %}
+                <a href="{{ page.related_manuscript_page.get_absolute_url }}" class="link hover:no-underline">&larr;
+                    View manuscript page</a>
+                &middot; Click an image below to view a larger version.
+            {% endif %}
+
+
+            {% if page.gallery_images %}
+                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                    {% for item in page.gallery_images.all %}
+                        {% image item.image width-1200 as large_img %}
+                        <div class="relative overflow-hidden cursor-pointer"
+                             @click="modalOpen = true; modalImage = '{{ large_img.url }}'; modalCaption = '{{ item.caption|escapejs }}'">
+                            {% image item.image fill-400x300 as img %}
+                            <img src="{{ img.url }}" alt="{{ item.image.title }}"
+                                 class="w-full h-full object-cover transition duration-300 ease-in-out transform hover:scale-105" />
+                        </div>
+                    {% endfor %}
+                </div>
+            {% endif %}
+
+        </div>
+
+    <!-- Modal -->
+        <div x-show="modalOpen"
+             class="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-90 flex items-center justify-center"
+             x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300"
+             x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click.away="modalOpen = false">
+            <div class="relative bg-white rounded-lg max-w-5xl max-h-[95vh] overflow-hidden shadow-2xl">
+                <button @click="modalOpen = false"
+                        class="absolute top-0 right-0 m-4 p-2 bg-winterthur-dk-blue text-white hover:bg-winterthur-dker-blue rounded-full shadow-lg z-10">
+                    <svg class="h-10 w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                         xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
+                        </path>
+                    </svg>
+                </button>
+                <div class="flex items-center justify-center w-full h-full">
+                    <img :src="modalImage" alt="Large version" class="max-w-full max-h-full object-contain">
+                </div>
+                <div x-show="modalCaption" class="p-4 bg-white bg-opacity-75 absolute bottom-0 left-0 right-0">
+                    <p x-text="modalCaption" class="text-gray-800 text-lg"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}