Image gallery (#11)

* add image gallery option to articles

* comments under image gallery

* flex for image gallery #10

* change padding #10

* caption same width as image #10

* show gallery in grid cards #11

* styling #11

* styling #11

---------

Co-authored-by: Naomi Eliasar <naomi@omnimap.nl>

src/blog/migrations/0004_blogpagegalleryimage.py

@@ -0,0 +1,30 @@
+# Generated by Django 5.0.4 on 2024-05-31 19:15
+
+import django.db.models.deletion
+import modelcluster.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0003_comment'),
+        ('wagtailimages', '0025_alter_image_file_alter_rendition_file'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='BlogPageGalleryImage',
+            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(on_delete=django.db.models.deletion.CASCADE, related_name='+', to='wagtailimages.image')),
+                ('page', modelcluster.fields.ParentalKey(on_delete=django.db.models.deletion.CASCADE, related_name='gallery_images', to='blog.blogpage')),
+            ],
+            options={
+                'ordering': ['sort_order'],
+                'abstract': False,
+            },
+        ),
+    ]

src/blog/models.py

@@ -1,9 +1,10 @@
 from django.utils import timezone
 from django.db import models
+from modelcluster.fields import ParentalKey
 
-from wagtail.models import Page
+from wagtail.models import Page, Orderable
 from wagtail.fields import RichTextField
-from wagtail.admin.panels import FieldPanel
+from wagtail.admin.panels import FieldPanel, InlinePanel
 
 from wagtail.search import index
 
@@ -52,6 +53,7 @@ class BlogPage(Page):
         FieldPanel('image'),
         FieldPanel('intro'),
         FieldPanel('body'),
+        InlinePanel('gallery_images', label="Gallery images"),
     ]
 
 class Comment(models.Model):
@@ -68,3 +70,15 @@ class Meta:
 
     def __str__(self):
         return self.body
+
+class BlogPageGalleryImage(Orderable):
+    page = ParentalKey(BlogPage, on_delete=models.CASCADE, related_name='gallery_images')
+    image = models.ForeignKey(
+        'wagtailimages.Image', on_delete=models.CASCADE, related_name='+'
+    )
+    caption = models.CharField(blank=True, max_length=250)
+
+    panels = [
+        FieldPanel('image'),
+        FieldPanel('caption'),
+    ]

src/blog/templates/blog/blog_page.html

@@ -37,7 +37,18 @@ <h1 class="bold text-4xl mb-0 text-black">
                 {{ page.body|richtext }}
             </article>
 
-            {% include "blog/includes/comments.html" with page=page %}
+            <div class="p-4 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {% for item in page.gallery_images.all %}
+                <div class="bg-white rounded-xl overflow-hidden drop-shadow group hover:rotate-3 transition-transform">
+                    {% image item.image fill-1920x1080 %}
+                    <p class="p-2">{{ item.caption }}</p>
+                </div>
+            {% endfor %}   
+            </div>
+
+            <div class="inline-block w-full">
+                {% include "blog/includes/comments.html" with page=page %}
+            </div>
 
             <a href="{{ page.get_parent.url }}" class="inline-block w-full p-4 bg-gray-100 text-center hover:bg-gray-200 transition-colors" title="{% trans "Return to blog" %}">
                 🔙 {% trans "Return to blog" %}
@@ -46,4 +57,4 @@ <h1 class="bold text-4xl mb-0 text-black">
     </div>
 </div>
 
-{% endblock %}
+{% endblock %}