draft: improved article body output #26
Conversation
| from wagtail.images.rich_text import ImageEmbedHandler | ||
|
|
||
|
|
||
| class CustomImageEmbedHandler(ImageEmbedHandler): |
There was a problem hiding this comment.
A handler is how Wagtail converts internal xml/html-like format into frontend html. The current example works but should ideally be expanded to include srcset of all relevant sizes based on output of https://github.com/gathering/tgno-backend/blob/main/aktuelt/serializers.py#L11 (which is used for other news article images)
| from wagtail.images.formats import Format, register_image_format | ||
|
|
||
|
|
||
| class InlineNewsImageFormat(Format): |
There was a problem hiding this comment.
This formatter is what Wagtail uses to display different image "formats" that can be selected when inserting an image in editor UI. This example does nothing useful, but outlines how we could use this to define a new format. This could for example be
- A fullscreen image
- An image with or without caption
- An image that includes custom field data
- ...etc
| @@ -99,7 +100,7 @@ def schedule(self): | |||
|
|
|||
| api_fields = [ | |||
| APIField("intro"), | |||
| APIField("body"), | |||
| APIField("body", serializer=NewsBodySerializer()), | |||
There was a problem hiding this comment.
There is also the option of going with https://docs.wagtail.org/en/stable/topics/streamfield.html which seems to allow a few more advanced options. Mainly I think it could be useful if we wanted to transition to JSON array output rather than html and leave more of the body rendering logic to frontend (and remove the need for extending/hacking into wagtail frontend related code).
|
|
||
| class NewsBodySerializer(Field): | ||
| def to_representation(self, value): | ||
| return expand_db_html(value) |
There was a problem hiding this comment.
This is what Wagtail uses in own frontend when rendering this type of data, mainly via a richtext template filter
A collection of image related things for later reference for anyone that wants to take a stab at it. Links to relevant code/docs is included as comment on top of files