Create image fields in templates for press/latest updates items

[jenniferthibault]

Earlier mockups included opportunities to use images inside press/latest updates items in the embedded preview feeds. These make the feeds more visually interesting and provides different strategies to get users engaged ad clicking in. They don't appear to be present in the first release, but I'd want to check that with @noahmanger , and also get a sense of when we could think about taking this on.

[jenniferthibault]

Quick update:

Aligning the images at the right of the text (instead of left) will keep the list easier to scan:

[noahmanger]

In order to get this layout to work like you've designed we'd need to transfer each of the posts images to a separate image field (Wagtail contains a built-in feed_image field for this). Right now, after scraping and importing, the images are just in the body text, which means that they're output in the same block as the snippet text.

This is a change we can make, but it will require two things:

• Updating both the canonical page templates and the post.html feed template to include feed images if present (and updating styles accordingly)
• Going through all posts with images and uploading them separately to the distinct field, which in turn requires being able to upload images to Wagtail via S3, which should be implemented soon.

I'll let @AmyKort make the call if this is something worth prioritizing now. It takes front-end work and then a manual process that Dorothy or somebody could likely do.

[AmyKort]

We're thinking about this one. Thanks!

[dorothyyeager]

I'm not able to make the call but I would personally love to keep being able to use images with Record articles. We primarily use them for examples, training announcements and staff announcements. I like Jen's suggestion of right-aligning. I am used to uploading images onto the Contribute server and playing with them (and also doing this in blogger for personal stuff), so am not anticipating that this would be too difficult for me to do. Right now it sounds like without the ability to just upload images, it's a more complicated process?

[jenniferthibault]

Big thanks to @noahmanger for helping me figure out what was possible within the CMS template settings, fixing what we could with CSS, and then figuring out the logic for the rest. 🎉

There were a couple different scenarios for how images made it into the new CMS layouts from the old templates. Here's a spread of how they looked:

@noahmanger made some tweaks to the CSS that made all existing latest updates images positioned first in the article, separate from the text. This gives us consistent layouts like the following for all the articles so far without manually updating any of the pages for now:

To clean up the image thumbnails in the feed, we cordoned off 1/4 of the container space to be just for image thumbnails. The thumbnails will be automatically generated from what we have already, and won't need to be cropped. That will give us a layout like this:

This work will be implemented when https://github.com/18F/fec-cms/pull/808 is merged in.

I think these changes bring us to a pretty good spot for the existing images in article pages, but I have some guidance for how to make it even better in the future for new pages, which I'll continue over in 18F/fec-style#622 .

[noahmanger]

Resolved by https://github.com/18F/fec-cms/pull/808