draft: improved article body output

aktuelt/handlers.py

@@ -0,0 +1,28 @@
+# Extends https://github.com/wagtail/wagtail/blob/main/wagtail/images/rich_text/__init__.py#L8
+from django.utils.html import escape
+from wagtail.images.formats import get_image_format
+from wagtail.images.rich_text import ImageEmbedHandler
+
+
+class CustomImageEmbedHandler(ImageEmbedHandler):
+    identifier = "image"
+
+    @classmethod
+    def expand_db_attributes_many(cls, attrs_list: list[dict]) -> list[str]:
+        """
+        Given a dict of attributes from the <embed> tag, return the real HTML
+        representation for use on the front-end.
+        """
+        images = cls.get_many(attrs_list)
+
+        tags = []
+        for attrs, image in zip(attrs_list, images):
+            if image:
+                image_format = get_image_format(attrs["format"])
+                tag = image_format.image_to_html(image, attrs.get("alt", ""))
+            else:
+                tag = '<img alt="">'
+
+            tags.append(tag)
+
+        return tags

aktuelt/image_formats.py

@@ -0,0 +1,15 @@
+# Ref: https://docs.wagtail.org/en/stable/advanced_topics/images/changing_rich_text_representation.html
+from django.utils.html import format_html
+from wagtail.images.formats import Format, register_image_format
+
+
+class InlineNewsImageFormat(Format):
+    def image_to_html(self, image, alt_text, extra_attributes=None):
+        default_html = super().image_to_html(image, alt_text, extra_attributes)
+
+        return format_html("<div>{}<figcaption>{}</figcaption></div>", default_html, alt_text)
+
+
+register_image_format(
+    InlineNewsImageFormat("inline_news_image", "Inline news image", "image-classes object-contain", "max-3200x3200")
+)

aktuelt/models.py

@@ -12,6 +12,7 @@
 from aktuelt.constants import ContributionTypes
 from aktuelt.serializers import (
     ContributorsSerializer,
+    NewsBodySerializer,
     NewsImageSerializer,
     NewsPageGallerySerializer,
     NewsPageTagsSerializer,
@@ -99,7 +100,7 @@ def schedule(self):
 
     api_fields = [
         APIField("intro"),
-        APIField("body"),
+        APIField("body", serializer=NewsBodySerializer()),
         # TODO: Replace with prettier (main model based?) serializer pattern?
         APIField("contributors", serializer=ContributorsSerializer(source="news_page_contributors")),
         APIField("tags", serializer=NewsPageTagsSerializer()),

aktuelt/serializers.py

@@ -1,5 +1,11 @@
 from rest_framework.fields import Field
 from wagtail.images.api.fields import ImageRenditionField
+from wagtail.rich_text import expand_db_html
+
+
+class NewsBodySerializer(Field):
+    def to_representation(self, value):
+        return expand_db_html(value)
 
 
 class NewsImageSerializer(Field):

aktuelt/wagtail_hooks.py

@@ -0,0 +1,10 @@
+# https://docs.wagtail.org/en/stable/extending/rich_text_internals.html#rewrite-handlers
+from wagtail import hooks
+
+from aktuelt.handlers import CustomImageEmbedHandler
+
+
+# Higher order to make sure it runs after image handler hook in images app
+@hooks.register("register_rich_text_features", order=10)
+def register_embed_handler(features):
+    features.register_embed_type(CustomImageEmbedHandler)