To create consistency and clean layouts, create image guidance for Latest Updates articles

[jenniferthibault]

Guidance should include:

• [x] What dimensions should be standard (for small and large images)
• [x] Where images should be placed in relation to text

System design opportunity:

• [x] Investigate whether guidance can be incorporated as helper text to Wagtail admin interface.

Share and demo with the FEC team.

[noahmanger]

If it helps, it's possible for us to control this tightly in the system if we want (and live less room for mistakes). For instance, we could only allow images as separate fields, and then control where they get placed, what dimensions they're rendered and cropped at, etc.

[jenniferthibault]

Thanks to @noahmanger's help with the feed styling in https://github.com/18F/fec-cms/issues/549 , we have some recommendations for how to integrate images that leaves a lot of flexibility for FEC.

We're thinking that we should keep the ability to add images at any point in the post (don't limit images to only appearing in one place), but provide guidance on image sizes for consistency.

Add multiple images at any point in the post

This way, for posts with many detailed images, like Statistical posts you can include more than one large image, and intersperse them between the text. This allows images to appear large enough on the page that you shouldn't have to open them in a separate window.

It also allows the author to choose the right point in the text for an image, instead of making the call with code.

Provide guidance on image sizes

Limiting to small, medium, and large sizes will help fit the majority of the images I've seen in posts so far.

Large images

Should be 620px wide, but can be any height. This keeps a lot of flexibility, and will be great for statistical images, election district images, or banner-type images that the FEC makes

Medium images

Should be 460px wide x 240px tall (but height is a bit flexible). This is very close to the existing size for most FEConnect images, and could also fit the dimensions of Commission chair announcements

Small images

Should be 140px wide x 180px tall. The dimensions of this size are pretty strict to create standardization of even the smallest images on FEC's site. It best fits cover images for brochures, publications, or single commissioner bio photos

How images should be placed in Wagtail:

Step 1: Placing images in the post

@noahmanger recommended that it's better to use the ImageBlock field (this)

instead of the richtext image button in the paragraph block (not this)

This means a slight change in the regular copy/paste workflow, because if you'd like to add a new image between text paragraphs, you need to make a paragraph block, image block, paragraph block

If I were to add one of each image size, that would look like this in Wagtail:

Which would look like this as a generated page:

Step 2: Assigning "Feed images"

This tells wagtail which image to show in the Latest Updates feed as a thumbnail. You'll be able to select any image already uploaded (so no need to upload a separate thumbnail unless you want to). The image will be automatically resized to fit the feed, as seen here.

---

Ok!

This was a lot to read, but it's not a very burdensome workflow when you see it in action for a new page. Once the changes from https://github.com/18F/fec-cms/pull/808 are implemented and running on the live site, it's worth a walkthrough with @patphongs and @dorothyyeager + whoever else would like to join in the fun 😄

Feel free to ping with any questions on your mind in the meantime!

[noahmanger]

@jenniferthibault can we capture this guidance somewhere permanent, like Drive or Github docs (wherever other things like this are going) and then we can close?

[jenniferthibault]

I would love that. @emileighoutlaw where are you keeping Wagtail guidance?

[emileighoutlaw]

I've been keeping it in this Google Doc, but maybe it's time to consider a better, long-term solution. Maybe it should be incorporated into the Content Guide?

[jenniferthibault]

Where does the content guide live?

[emileighoutlaw]

Also Google Doc 😬

[jenniferthibault]

Comparing the content in each, it seemed to fit better with the Wagtail guidance for now, so I put it in that document. I know this may change in the future.

Ok to close this?

[noahmanger]

Yep! Thanks, @jenniferthibault .