Support URL image handling via media/embed source input #5096

New Issue

OVERLORD · 2026-02-05T09:39:51+03:00

OVERLORD commented

2026-02-05 09:39:51 +03:00

Originally created by @kristiandg on GitHub (Jan 1, 2025).

Describe the Bug

On this example page:
https://demo.bookstackapp.com/books/bookstack-demo-site/page/video-embed-example

The sentence says "You can embed anything that can be included via an iframe..."

I pasted a link to an image file that I'm able to view by pasting directly into my browser, but when I use the Insert Media tool and paste that same image URL, it doesn't work, and ends up not embedding the image. I can do this with YouTube links without issue, but not URLs to image files.

Upon switching to the Embed tab, you can see that the source code is assuming it's a video file, as it has several video related tags (like "video poster", "controls", etc.). You have to manually edit the code to force it to be an image. However, once you do, future edits show the friendlier box for image editing.

I initially looked at the Image Select tool, but that only seems to support stored/uploaded image files, not links to off-server images. Whether the appropriate place for embedding an image file belongs in the Image Select tool or the Insert Media tool, I'll leave up to you all, but there should be a mechanism to do it that's as WYSIWYG as the function for embedding video files.

Steps to Reproduce

Edit a page
Use the Insert/Edit Media tool, and place a URL in the Source box.
View the Source version of what it's planning to create
Notice it assumes video with the "video poster" tag.
You have to manually modify the code with an "img src" tag, to correct for the issue.

Expected Behaviour

I had expected, just like a video, the image file would have also been embedded and pulled from the source location.

Screenshots or Additional Context

No response

Browser Details

Mac Safari v18.2

Exact BookStack Version

24.10.3

Originally created by @kristiandg on GitHub (Jan 1, 2025). ### Describe the Bug On this example page: https://demo.bookstackapp.com/books/bookstack-demo-site/page/video-embed-example The sentence says "You can embed anything that can be included via an iframe..." I pasted a link to an image file that I'm able to view by pasting directly into my browser, but when I use the Insert Media tool and paste that same image URL, it doesn't work, and ends up not embedding the image. I can do this with YouTube links without issue, but not URLs to image files. Upon switching to the Embed tab, you can see that the source code is assuming it's a video file, as it has several video related tags (like "video poster", "controls", etc.). You have to manually edit the code to force it to be an image. However, once you do, future edits show the friendlier box for image editing. I initially looked at the Image Select tool, but that only seems to support stored/uploaded image files, not links to off-server images. Whether the appropriate place for embedding an image file belongs in the Image Select tool or the Insert Media tool, I'll leave up to you all, but there should be a mechanism to do it that's as WYSIWYG as the function for embedding video files. ### Steps to Reproduce 1. Edit a page 2. Use the Insert/Edit Media tool, and place a URL in the Source box. 3. View the Source version of what it's planning to create 4. Notice it assumes video with the "video poster" tag. 5. You have to manually modify the code with an "img src" tag, to correct for the issue. ### Expected Behaviour I had expected, just like a video, the image file would have also been embedded and pulled from the source location. ### Screenshots or Additional Context _No response_ ### Browser Details Mac Safari v18.2 ### Exact BookStack Version 24.10.3

OVERLORD added the 📝 WYSIWYG Editor 🔨 Feature Request labels 2026-02-05 09:39:51 +03:00

OVERLORD commented

2026-02-05 09:39:53 +03:00

@ssddanbrown commented on GitHub (Jan 1, 2025):

Hi @kristiandg,
The editor takes a guess at the content, in an attempt to choose the right embed type, but this is a simple check as far as I remember so might not always be accurate.

That said, I'm assuming you're using the default WYSIWYG editor which I'm not looking to make further changes to, and instead focusing on the new WYSIWYG editor.

I'm going to re-focus this to instead be a feature request for the new editor to handle external image links (identified by a simple extension check) via the media source input, (with the intent to embed them as a standard image instead of an iframe/object embed) for the new WYSIWYG editor.

@ssddanbrown commented on GitHub (Jan 1, 2025): Hi @kristiandg, The editor takes a guess at the content, in an attempt to choose the right embed type, but this is a simple check as far as I remember so might not always be accurate. That said, I'm assuming you're using the default WYSIWYG editor which I'm not looking to make further changes to, and instead focusing on the new WYSIWYG editor. I'm going to re-focus this to instead be a feature request for the new editor to handle external image links (identified by a simple extension check) via the media source input, (with the intent to embed them as a standard image instead of an iframe/object embed) for the new WYSIWYG editor.

OVERLORD referenced this issue

2026-02-05 10:32:33 +03:00

[PR #5096] [MERGED] Wraps file extension comparison components in strtolower() #6449

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#5096