images working

5 files changed, 62 insertions, 4 deletions

diff --git a/.gitignore b/.gitignore
index fbb125e..4de7d65 100644
--- a/.gitignore
+++ b/.gitignore
@@ -137,3 +137,5 @@ dmypy.json
 #vscode bullshit
 .vscode/
 
+*.jpg
+
diff --git a/blog/migrations/0007_blogpostgalleryimage.py b/blog/migrations/0007_blogpostgalleryimage.py
new file mode 100644
index 0000000..591aa3e
--- /dev/null
+++ b/blog/migrations/0007_blogpostgalleryimage.py
@@ -0,0 +1,30 @@
+# Generated by Django 3.0.3 on 2020-03-05 00:13
+
+from django.db import migrations, models
+import django.db.models.deletion
+import modelcluster.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0001_squashed_0021'),
+        ('blog', '0006_auto_20200304_0226'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='BlogPostGalleryImage',
+            fields=[
+                ('id', models.AutoField(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.BlogPost')),
+            ],
+            options={
+                'ordering': ['sort_order'],
+                'abstract': False,
+            },
+        ),
+    ]
diff --git a/blog/models.py b/blog/models.py
index 50210e7..9b92ce8 100644
--- a/blog/models.py
+++ b/blog/models.py
@@ -3,6 +3,7 @@ from django import forms
 from wagtail.core.models import Page, Orderable
 from wagtail.core.fields import RichTextField
 from wagtail.admin.edit_handlers import FieldPanel, InlinePanel, MultiFieldPanel
+from wagtail.images.edit_handlers import ImageChooserPanel
 from wagtail.search import index
 
 from modelcluster.fields import ParentalKey, ParentalManyToManyField
@@ -40,6 +41,13 @@ class BlogPost(Page):
     body = RichTextField(blank=True)
     tags = ClusterTaggableManager(through=BlogPostTag, blank=True)
     categories = ParentalManyToManyField('blog.BlogCategory', blank=True)
+    
+    def main_image(self):
+        gallery_item = self.gallery_images.first()
+        if gallery_item:
+            return gallery_item.image
+        else:
+            return None
 
     search_fields = Page.search_fields + [
         index.SearchField('intro'),
@@ -52,8 +60,9 @@ class BlogPost(Page):
             FieldPanel('tags'),
             FieldPanel('categories', widget=forms.CheckboxSelectMultiple),
         ], heading="Blog information"),
+        InlinePanel('gallery_images', label="Gallery images"),
         FieldPanel('intro'),
-        FieldPanel('body')
+        FieldPanel('body', classname="full")
     ]
 
 class BlogTagIndexPage(Page):
@@ -82,3 +91,15 @@ class BlogCategory(models.Model):
 
     class Meta:
         verbose_name_plural = 'blog categories'
+
+class BlogPostGalleryImage(Orderable):
+    page = ParentalKey(BlogPost, 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 = [
+        ImageChooserPanel('image'),
+        FieldPanel('caption'),
+    ]
\ No newline at end of file
diff --git a/blog/templates/blog/blog_index_page.html b/blog/templates/blog/blog_index_page.html
index 043539f..194fa03 100644
--- a/blog/templates/blog/blog_index_page.html
+++ b/blog/templates/blog/blog_index_page.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {% load wagtailcore_tags %}
+{% load wagtailcore_tags wagtailimages_tags %}
 
 {% block body_class %}template-blogindexpage{% endblock %}
 
@@ -22,7 +23,9 @@
 
         <!-- Blog Post -->
         <div class="card mb-4">
-          <img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
+          {% if post.main_image %}
+          {% image post.main_image fill-750x300-c100 class="card-img-top" %}
+          {% endif %}
           <div class="card-body">
             <h2 class="card-title">{{ post.title }}</h2>
             <p class="card-text">{{ post.intro }}</p>
diff --git a/blog/templates/blog/blog_post.html b/blog/templates/blog/blog_post.html
index 2521b20..e39456d 100644
--- a/blog/templates/blog/blog_post.html
+++ b/blog/templates/blog/blog_post.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {% load wagtailcore_tags %}
+{% load wagtailcore_tags wagtailimages_tags %}
 
 {% block body_class %}template-blogpage{% endblock %}
 
@@ -21,8 +22,9 @@
         <hr>
 
         <!-- Preview Image -->
-        <img class="img-fluid rounded" src="http://placehold.it/900x300" alt="">
-
+        {% if page.main_image %}
+        {% image page.main_image fill-900x300-c100 class="img-fluid rounded" %}
+        {% endif %}
         <hr>
 
         <!-- Post Content -->