Images no longer float/wrap text after migration to Keystatic

[ttasovac]

In the pre-keystatic Campus, I manually (i.e using style attribute in HTML) floated images in some resources so that the text would wrap around them. See https://dariah-campus-original.vercel.app/resource/posts/introduction-to-dictionaries#ancient-world. These floated images did not get transferred to keystatic and the result is not very pretty: https://campus.dariah.eu/resources/hosted/introduction-to-dictionaries#ancient-world

1. What can we do to fix this for existing resources other than having to go through all of our resources manually?
2. How can we use floated images in the future? Is there a way to create them with keystatic?

This is not a theoretical question because as far as I remember dariahTeach resources also wrap text around smaller images. There are also smaller images in documentation that will look much better if they have the paragraph text wrapped around them. What can we do about this?

[babslgam]

preview of the draft pull request:
https://dariah-campus-git-feat-floating-images-dariah.vercel.app/resources/hosted/introduction-to-dictionaries

suggestion would be to allow left and right for the alignment property.
(works in the rendered result but unsure about how to implement a decent layout in the keystatic cms).

What can we do to fix this for existing resources other than having to go through all of our resources manually?

this has only been used in three resources from what i saw. so not much to go through.

regarding the dariah-teach migration: if i remember correctly norbert can't export that info from moodle (meaning, to float or not to float). so it will be the curators job to set the alignment. (they have to compare the outcome to the original dh-teach version anyway)

[ttasovac]

That's great, @babslgam. Thanks! As far as #dariahTeach is concerned: yes, this should definitely be part of the editorial curation.

(works in the rendered result but unsure about how to implement a decent layout in the keystatic cms).

hm... i guess, an additional problem is that in addition to left and right alignment, we would need to specify the desired or the max width of the image, otherwise the text around it could be too narrow. Should we allow the user to specify the pixels, or should we give predefined options (for instance, 1/4 and 1/3 of the main column width)? I prefer the uniformity of the second approach but I'm not sure if it's flexible enough and what the implications are. Let me know what you think.

[babslgam]

we should be restrictive regarding layout options and only allow fractions.
@stefanprobst whats your opinion on this?

[stefanprobst]

i agree - image widths of 1/2, 1/3 and 1/4 would allow for 344px, 230px, 172px width images (with 32px gap), which sounds reasonable.