Wagtail embedding images with HTML

Question

We use StreamField to allow editors to add HTML for custom layouts. We used to be able include images in by looking up the ID of the Image and an embed code:

<embed alt="My Image" embedtype="image" format="responsive" id="3896"/>

Since performing an update to Wagtail these do not render. I'm wondering if this was an unintended feature which has been removed or if something about this code has changed.

This is indeed the standard representation of images in rich text content: https://docs.wagtail.io/en/stable/extending/rich_text_internals.html#data-format. Can you give more details of what you're doing here? e.g. what version did you update from and to, how are you inserting this embed code, how are you rendering the output (through a template, or via the API)? — gasman, Jan 18 '22 at 13:06
This line is being used with a StreamField that has richtext and htmltext blocks. This is then rendered in a template. For richtext block_type we use the `richtext` filter i.e. `{{ block.value|richtext }}` but for the hrmltext block_type we don't use any filter i.e. `{{block.value}}`. We're on wagtail `2.15.1`. I think this happened when we updated from `2.14`. — Zemogle, Jan 18 '22 at 13:44
In case its not clear I should also say that this `` code is being used in the `htmltext` block_type, amongst HTML code supplied by the author, through the wagtail admin. — Zemogle, Jan 18 '22 at 14:09
I'd really need to see some code to understand what's going on here. Assuming your `htmltext` block is a RawHTMLBlock, those have never supported the custom rich-text syntax, only actual HTML. Maybe there's some non-standard combination of StreamField definitions and template tags that had that effect, but I can't diagnose that without code. — gasman, Jan 18 '22 at 19:19
We are using `RawHTMLBlock` without any custom definitions or template tags. It sounds like this was a loop hole in the core Wagtail which should never have worked, and an update closed up. I'll work on something custom to sort this out. — Zemogle, Jan 19 '22 at 11:57

score 0 · Accepted Answer · answered Jan 19 '22 at 16:30

I came up with a solution to this using a custom template filter:

from django.utils.safestring import mark_safe
from wagtail.core.rich_text import expand_db_html

@register.filter
def betterhtml(html):
    return mark_safe(expand_db_html(html))

This leverages the excellent Wagtail expand_db_html function which processes embed codes that are added as part of the rich text editor.

In my templates, when I have a StreamField with a RawHTMLBlock I can use:

{% with blocks=self.content %}
  {% for block in blocks %}
    ...
    {% elif block.block_type == 'htmltext'%}
      {{ block.value|betterhtml}}
  {% endfor %}

Wagtail embedding images with HTML

1 Answers1