From 849d53947857df1289e25df548493ea417a5dca9 Mon Sep 17 00:00:00 2001
From: PCoder <purple.coder@yahoo.co.uk>
Date: Mon, 11 Jul 2022 18:12:53 +0530
Subject: [PATCH 1/3] Add header_image to Article Index Page

---
 publichealth/home/models/models.py                     |  3 +++
 .../home/templates/home/article_index_page.html        | 10 ++++++++++
 2 files changed, 13 insertions(+)

diff --git a/publichealth/home/models/models.py b/publichealth/home/models/models.py
index de655aa..46e47d1 100644
--- a/publichealth/home/models/models.py
+++ b/publichealth/home/models/models.py
@@ -40,6 +40,8 @@ class ArticleIndexPage(Page):
         'title_en',
     )
 
+    header_image = ImageChooserBlock(required=False)
+
     intro_de = RichTextField(default='', blank=True)
     intro_fr = RichTextField(default='', blank=True)
     intro_en = RichTextField(default='', blank=True)
@@ -73,6 +75,7 @@ class ArticleIndexPage(Page):
         FieldPanel('intro_fr'),
         FieldPanel('title_en'),
         FieldPanel('intro_en'),
+        ImageChooserPanel('header_image'),
         ImageChooserPanel('feed_image'),
         MultiFieldPanel(
         [
diff --git a/publichealth/home/templates/home/article_index_page.html b/publichealth/home/templates/home/article_index_page.html
index 6cd4cca..802e245 100644
--- a/publichealth/home/templates/home/article_index_page.html
+++ b/publichealth/home/templates/home/article_index_page.html
@@ -16,7 +16,17 @@
   </section>
 
 {% else %}
+  {% if page.header_image %}
+<div id="carousel-banner" class="slide">
+	<div class="carousel-inner slick slick-initialized slick-slider" role="listbox">
 
+		<div class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 1908px;"><div class="item slick-slide slick-active" data-slick-index="0" style="width: 1908px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;">
+			<img style="background-image:url({{page.header_image}})">
+		</div></div></div>
+
+	</div>
+</div>
+  {% endif %}
   <section id="article-index" class="article-index-page">
     <div class="container">
     	<h2>{{ page.trans_title }}</h2>

From 3a1fa6d724eac0de9ea70f913f7e8f7b1c9ce7e1 Mon Sep 17 00:00:00 2001
From: PCoder <purple.coder@yahoo.co.uk>
Date: Mon, 11 Jul 2022 18:18:55 +0530
Subject: [PATCH 2/3] Use proper field for image

---
 publichealth/home/models/models.py | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/publichealth/home/models/models.py b/publichealth/home/models/models.py
index 46e47d1..6c63c7b 100644
--- a/publichealth/home/models/models.py
+++ b/publichealth/home/models/models.py
@@ -40,7 +40,12 @@ class ArticleIndexPage(Page):
         'title_en',
     )
 
-    header_image = ImageChooserBlock(required=False)
+    header_image = models.ForeignKey(
+        'wagtailimages.Image',
+        null=True, blank=True,
+        on_delete=models.SET_NULL,
+        related_name='+'
+    )
 
     intro_de = RichTextField(default='', blank=True)
     intro_fr = RichTextField(default='', blank=True)

From 8927460dd63a3496a393e9581592f26cfb5d1ea9 Mon Sep 17 00:00:00 2001
From: PCoder <purple.coder@yahoo.co.uk>
Date: Mon, 11 Jul 2022 15:04:51 +0200
Subject: [PATCH 3/3] Fix accessing the header image's url

---
 publichealth/home/templates/home/article_index_page.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/publichealth/home/templates/home/article_index_page.html b/publichealth/home/templates/home/article_index_page.html
index 802e245..f829852 100644
--- a/publichealth/home/templates/home/article_index_page.html
+++ b/publichealth/home/templates/home/article_index_page.html
@@ -17,11 +17,12 @@
 
 {% else %}
   {% if page.header_image %}
+  {% image page.header_image fill-1908x400 as img %}
 <div id="carousel-banner" class="slide">
 	<div class="carousel-inner slick slick-initialized slick-slider" role="listbox">
 
 		<div class="slick-list draggable" tabindex="0"><div class="slick-track" style="opacity: 1; width: 1908px;"><div class="item slick-slide slick-active" data-slick-index="0" style="width: 1908px; position: relative; left: 0px; top: 0px; z-index: 900; opacity: 1;">
-			<img style="background-image:url({{page.header_image}})">
+			<img style="background-image:url({{img.url}})">
 		</div></div></div>
 
 	</div>