wagtail-grapple
wagtail-grapple copied to clipboard
URL handling in RichTextBlock output
I'm not sure what the expected behavior here is, but I ran into an unexpected inconsistency between the rendering behavior of RichTextBlock and other blocks: RichTextBlock uses absolute URLs (e.g. for internal links and image source URLs) while image renditions use fully-qualified URLs.
For example, here I'm rendering a StreamField that includes both rich text blocks and images:
{
pages {
... on BlogPage {
body {
blockType
... on RichTextBlock {
value
}
... on ImageChooserBlock {
image {
rendition(width:500) {
src
}
}
}
}
}
}
}
The output is
{
"data": {
"pages": [
{
"body": [
{
"blockType": "ImageChooserBlock",
"image": {
"rendition": {
"src": "http://localhost:8000/media/images/test.width-500.png"
}
}
},
{
"blockType": "RichTextBlock",
"value": "<div class=\"rich-text\"><p>paragraph. <a href=\"/\">Link to another page</a></p><img alt=\"right-aligned test\" class=\"richtext-image right\" height=\"500\" src=\"/media/images/test.width-500.jpg\" width=\"500\"><p></p></div>"
}
]
}
]
}
}
Note that both link and image in the rich text block use path-only URLs that are not fully qualified with the domain name, protocol, and port. In the context of a headless CMS, this would complicate rendering.
Possibly related: https://github.com/wagtail/wagtail/issues/2695 (in particular the last comment in the thread)
Good find! I believe it is related to that core issue.
/cc @NathHorrigan
+1 I'm experiencing exactly like this.
+1 I'm experiencing exactly like this.
I did a test today and confirmed that RichTextBlocks are still creating relative urls /media/images/wagtail-grapple.width-800.png to images while ImageFields and ImageChooserBlocks are generating fully qualified URLS http://localhost:8000/media/original_images/wagtail-grapple.png