Support URL image handling via media/embed source input

[kristiandg]

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

[ssddanbrown]

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.