Added thumbnail to wagtail CMS

[noisecapella]

What are the relevant tickets?

Fixes #518

What's this PR do?

Adds a field to the program page which represents the thumbnail shown on the home page for that program.

How should this be manually tested?

Before you upload any images, first make sure the default image looks appropriate. It will be the same filler image as before but with the correct aspect ratio. If you resize the browser window you should see this image get smaller or bigger to fill the box space which is roughly half the main container.

Run database migrations. Then in /cms/ upload an image using the Images link on the left sidebar. Then go into a program page and set the thumbnail image to the image you uploaded. Go to the home page and see the program page with the new thumbnail. Resize the browser to make sure the image stretches and shrinks appropriately. Note that the image must always keep the correct aspect ratio and the height should not change. Anything toward the bottom of the image should be cut off.

Any background context you want to provide?

edx course images are 378x225 so the homepage will probably be redesigned around these smaller boxes at some point soon.

Screenshots (if appropriate)

Full window:

Resized smaller:

[giocalitri]

I think this should go before the courses and faqs, because these lists can be really long.
Maybe put at the beginning right before the link to the external page?

[giocalitri]

I think that resizing the page changes the height of the visible part of the image.

[giocalitri]

2 minor comments, but overall good.

[giocalitri]

cc @roberthouse54

[roberthouse54]

Yeah, see if you can fix the sizing of that image. I think the image should just be 100% the width of the box, with no height specified. It is being clipped apparently

[noisecapella]

Comments are addressed

[giocalitri]

ok, but now is something like this acceptable?

[giocalitri]

in other words: can we leave the users the possibility to mess up with our home page?

[roberthouse54]

I was under the impression that the EDx course thumbnails were all the same size... No?

[noisecapella]

The CMS users aren't ordinary users, they should be trusted to upload the right thumbnails

[giocalitri]

@roberthouse54 No idea

@noisecapella Fine with me

@pdpinch ??

[Ferdi]

• These are the "Micromasters thumbnails" not course thumbnails, so we dont have to think edx in our design
• Is this enabled in our app ? https://wagtail.io/features/image-cropping/ . If so I'd assume user selected the relevant area of the image so we can safely scale/crop at some predefined image sizes.

[noisecapella]

@Ferdi Yes it should be. If we aren't using edX thumbnails, how big should we expect our thumbnails to be?

[Ferdi]

No idea, @roberthouse54 ?

[roberthouse54]

Sorry I was thinking of the EDx course thumbnails. OK, so the program thumbnails should be the same aspect ration as the EDx course thumbnails. So the program thumbnail can be the same size 378x225. If the image cropping is working, can we set it to crop at that aspect ratio, and then save the image at that size?

[noisecapella]

Just made the change. To clarify, here's what's happening:

• User uploads an image to the CMS images section. They can optionally drag a focus area, but this is not a cropping tool, it just tells wagtail where the center of the image is if something needs to be cropped.
• Image is output at 378x225 or smaller resolution, keeping aspect ratio. It's using the 'fill' resize rule which means that it will resize the image smaller to fit this resolution, then crop whatever doesn't fit. It uses the focus area to determine where to crop, or else just the center of the image.
• The image is then displayed in the browser to fill 100% of the box width, then however much height it needs, keeping the aspect ratio the same.

[giocalitri]

this is the output I see: is that what is expected?

[noisecapella]

Yes, it should have the same aspect ratio as 378x225, cropped to that size, and scaled up to whatever width the box has in the browser

[roberthouse54]

I am still unclear what is happening. We need the images to all have the same aspect ratio. These two images in the mock above do not seem to have the same aspect ratio.

[noisecapella]

The image on the right is the default image if no image was picked. I'll crop that image to have the same resolution as the other ones

[noisecapella]

The default thumbnail should be the same aspect ratio now. Here's a new screenshot:

The box on the bottom isn't necessarily the same size. Should it we make it the same size?

[giocalitri]

tests are failing

[giocalitri]

I suspect this is expected, but still I would like an opinion

[roberthouse54]

Truncate to some reasonable character limit with a "... (View More)" link to the program page.

[giocalitri]

that text comes from the django model and not the CMS: I wonder if the should move it to the CMS...

[noisecapella]

@giocalitri Filed #656

[noisecapella]

@roberthouse54 I'm going to file an issue for the View More link, in the interest of getting this PR merged first
edit #658

[giocalitri]

please rebase and squash. Then 👍