As a content editor, I want to embed images in pages that don't span the full width of the page so I can create more varied or readable page layouts.

[thatbudakguy]

Describe the solution you'd like
Wagtail evidently has a native solution for applying special styles to images embedded in rich text: "image formats". As the docs say:

Images embedded in Rich Text fields can’t be controlled by the template developer as easily. There are no image objects to work with, so the {% image %} template tag can’t be used. Instead, editors can choose from one of a number of image “Formats” at the point of inserting images into their text.

Wagtail comes with three pre-defined image formats, but more can be defined in Python by the developer.

Image formats do two things:

• Apply a configured image transformation, e.g. width-800
• Apply a class so the image can be styled with css, e.g. left

The three predefined formats are Full width, Left-aligned, and Right-aligned, which sound very congruent with what we want.

Describe alternatives you've considered
If the Wagtail-native solution doesn't work, we can look at the PPA backend implementation, which creates custom block types for half-width images.

Additional context
This functionality was first implemented in PPA as "side-by-side images"; for the relevant styles see:
https://github.com/Princeton-CDH/ppa-django/blob/9324b103f56dcd59a4507f4479a2e0772df45404/srcmedia/scss/_mixins.scss#L170-L220

[rlskoeser]

@cvansant I'm hoping to get to this issue and adapt the related work we did in PPA - you can see an example page that uses it in Gissoo's essay on the design.

Image display options on PPA are left (half width), right (half width) and full width (default, what we have now).

Content width is narrower on CDH web than on PPA, so I want to try making the left/right images stick out from the content a bit on desktop. I was also thinking that a extra wide (not sure what to call this) option might be nice (I already figured out the styles when I did the code block).

I think these will be nice to have generally, but would also be something we could use if we want to create some gallery pages somewhere on the site to better showcase CDH work.

Please let me know if you think that set of options sounds like enough (content width, left, right, extra wide) and please suggest a better name for that last option if you have one.

[rlskoeser]

discussed with @cvansant on slack:

I think those options would be great for the gallery itself. For blogs, it would be nice to have a small image on the left and text on the right; or image on the right and text on the left.
Maybe half width? It’s just sometimes the blog photos are unnecessarily large. I’m thinking about headshots in particular.