Added thumbnail to wagtail CMS

cms/migrations/0013_programpage_thumbnail_image.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.7 on 2016-06-22 15:41
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0012_copy_image_permissions_to_collections'),
+        ('cms', '0012_programpage_external_program_page_url'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='programpage',
+            name='thumbnail_image',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.Image'),
+        ),
+    ]

cms/models.py

@@ -78,9 +78,18 @@ class ProgramPage(Page):
     contact_us = RichTextField(blank=True)
     title_over_image = RichTextField(blank=True)
 
+    thumbnail_image = models.ForeignKey(
+        Image,
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name='+'
+    )
+
     content_panels = Page.content_panels + [
         FieldPanel('description', classname="full"),
         FieldPanel('program'),
+        FieldPanel('thumbnail_image'),
         FieldPanel('external_program_page_url'),
         FieldPanel('background_image'),
         FieldPanel('contact_us'),

cms/templates/cms/home_page.html

@@ -79,7 +79,13 @@ <h3>MicroMasters</h3>
                 <div class="media-item">
                   <div class="media-top">
                     <div class="image-wrap">
-                      <img class="image" src="{% static 'images/course-1.png' %}" alt="course image for {{program}}" height="135" width="377">
+                      {% if program.programpage and program.programpage.thumbnail_image %}
+                      {% image program.programpage.thumbnail_image fill-378x225 as thumbnail_image %}
+                      <img class="image" src="{{ thumbnail_image.url }}" alt="course image for {{program}}"
+                           width="{{ thumbnail_image.width }}" height="{{ thumbnail_image.height }}" />
+                      {% else %}
+                      <img class="image" src="{% static 'images/course-thumbnail.png' %}" alt="course image for {{program}}" width="378" height="225" />
+                      {% endif %}
                     </div>
                   </div>
                   <div class="info-wrap">

static/scss/homepage.scss

@@ -197,9 +197,12 @@ body.app-media {
 .app-media .media-list {
   padding-bottom: 25px;
 }
-.app-media .media-list .image-wrap > .image {
-  width:100%;
-  max-width: 100%;
+.app-media .media-list .image-wrap {
+  // edX course images are 378x225
+  > .image {
+    width: 100%;
+    height: auto;
+  }
 }
 .app-media .media-list .media-item-actions {
   display: none;

ui/views_test.py

@@ -10,6 +10,8 @@
 from factory.fuzzy import FuzzyText
 from mock import patch, Mock
 from rest_framework import status
+from wagtail.wagtailimages.models import Image
+from wagtail.wagtailimages.tests.utils import get_test_image_file
 
 from cms.models import HomePage, ProgramPage
 from courses.models import Program
@@ -304,6 +306,37 @@ def test_sign_out_button(self):
         response = self.client.get(self.program_page.url)
         self.assertContains(response, 'Sign out')
 
+    def test_program_thumbnail_default(self):
+        """Verify that a default thumbnail shows up for a live program"""
+        self.create_and_login_user()
+
+        default_image = 'images/course-thumbnail.png'
+        # the default image should not show up if no program is live
+        program = self.program_page.program
+        program.live = False
+        program.save()
+        resp = self.client.get('/')
+        self.assertNotContains(resp, default_image)
+
+        # default image should show up if a program is live and no thumbnail image was set
+        program.live = True
+        program.save()
+        resp = self.client.get('/')
+        self.assertContains(resp, default_image)
+
+    def test_program_thumbnail(self):
+        """Verify that a thumbnail shows up if specified for a ProgramPage"""
+        self.create_and_login_user()
+
+        image = Image.objects.create(title='Test image',
+                                     file=get_test_image_file())
+
+        self.program_page.thumbnail_image = image
+        self.program_page.save()
+
+        resp = self.client.get('/')
+        self.assertContains(resp, image.get_rendition('fill-378x225').url)
+
 
 class TestUsersPage(ViewsTests):
     """