Merge pull request '10695-header-image' (#4) from 10695-header-image into master

Reviewed-on: #4

publichealth/home/models/models.py

@@ -40,6 +40,13 @@ class ArticleIndexPage(Page):
         'title_en',
     )
 
+    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)
     intro_en = RichTextField(default='', blank=True)
@@ -73,6 +80,7 @@ class ArticleIndexPage(Page):
         FieldPanel('intro_fr'),
         FieldPanel('title_en'),
         FieldPanel('intro_en'),
+        ImageChooserPanel('header_image'),
         ImageChooserPanel('feed_image'),
         MultiFieldPanel(
         [

publichealth/home/templates/home/article_index_page.html

@@ -16,7 +16,18 @@
   </section>
 
 {% 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({{img.url}})">
+		</div></div></div>
+
+	</div>
+</div>
+  {% endif %}
   <section id="article-index" class="article-index-page">
     <div class="container">
     	<h2>{{ page.trans_title }}</h2>