Widen manuscripts intro; add small image sizes

pages/image_formats.py

@@ -0,0 +1,15 @@
+# Extra image sizes for images in CMS rich text, alongside Wagtail's built-in
+# "Full width" (800px wide) and "Left-aligned"/"Right-aligned" (500px wide).
+# The small formats fit the image within 300 x 300 px, so a tall image floated
+# beside a couple of paragraphs doesn't tower over them. They use the same CSS
+# classes as the built-in formats (see static/css/custom.css).
+from wagtail.images.formats import Format, register_image_format
+
+register_image_format(
+    Format("left_small", "Left-aligned (small)", "richtext-image left", "max-300x300")
+)
+register_image_format(
+    Format(
+        "right_small", "Right-aligned (small)", "richtext-image right", "max-300x300"
+    )
+)

pages/tests.py

@@ -1,3 +1,37 @@
-from django.test import TestCase
+import tempfile
 
-# Create your tests here.
+from django.test import SimpleTestCase, TestCase, override_settings
+from wagtail.images.formats import get_image_format, get_image_formats
+from wagtail.images.models import Image
+from wagtail.images.tests.utils import get_test_image_file
+from wagtail.rich_text import expand_db_html
+
+
+class ImageFormatsTest(SimpleTestCase):
+    def test_small_formats_are_offered(self):
+        names = [image_format.name for image_format in get_image_formats()]
+        self.assertEqual(
+            names, ["fullwidth", "left", "right", "left_small", "right_small"]
+        )
+
+    def test_small_formats_fit_within_300px(self):
+        for name, side in [("left_small", "left"), ("right_small", "right")]:
+            image_format = get_image_format(name)
+            self.assertEqual(image_format.filter_spec, "max-300x300")
+            self.assertEqual(image_format.classname, f"richtext-image {side}")
+
+
+class SmallImageFormatRenderingTest(TestCase):
+    def test_right_small_renders_within_300px(self):
+        with tempfile.TemporaryDirectory() as media_root, override_settings(
+            MEDIA_ROOT=media_root
+        ):
+            # a 640 x 480 test image
+            image = Image.objects.create(title="Ship", file=get_test_image_file())
+            html = expand_db_html(
+                f'<embed embedtype="image" id="{image.pk}" format="right_small" alt="Ship"/>'
+            )
+
+        self.assertIn('class="richtext-image right"', html)
+        self.assertIn('width="300"', html)
+        self.assertIn('height="225"', html)

static/css/custom.css

@@ -177,3 +177,9 @@ note[data-notation] {
 .prose {
   max-width: max(65ch, 75%);
 }
+
+/* let a prose block opt out of the width limit above with Tailwind's
+   max-w-none (e.g. the manuscripts page introduction) */
+.prose.max-w-none {
+  max-width: none;
+}

templates/manuscripts.html

@@ -11,7 +11,10 @@
       <h3 class="text-4xl mb-8 font-bold" id="top">
         {{ snippet.title|default:"Manuscripts" }}
       </h3>
-      <div class="prose mb-8">
+      <!-- max-w-none lets the introduction use the page's full width like the
+           lists below; flow-root keeps images floated in the CMS text from
+           overlapping the filters -->
+      <div class="prose max-w-none mb-8 flow-root">
         {% if snippet.body %}
           {{ snippet.body|richtext }}
         {% else %}