Extend the embedding feature to images

[walpox]

Describe the feature you'd like It would be handy if you could embed images from MediaCMS the same way as with videos.

<img src="https://mediacms.example.com/embed?m=<id>"/>

Optionally, this feature could be extended to all other media types: audio and pdf.

Describe alternatives you've considered Besides using a different service to host images supporting this feature, I cannot think of any other alternatives.

Additional context

Using this image as an example:

https://demo.mediacms.io/view?m=YqYwNJeTb

When you click on Share, there is no Embed option for the image.

The actual link to the image is:

https://demo.mediacms.io/media/original/thumbnails/user/markos/9814e7f15ca04de1a2cb16517f840f6e.IMG_20240111_085327.jpg_pOUmFbZ.jpg

Our static website generator (Zola) allows so-called shortcodes. These shortcodes can serve as functions. For example, we have a shortcode that, given a certain YouTube video ID, it will return the embed code for that video.

<figure class="inline-image">
  <div class="ratio169">
    <iframe
    src="https://www.youtube-nocookie.com/embed/{{ id }}"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
  </div>
  {% if caption %}<figcaption><p>{{ caption }}</p></figcaption>{% endif %}
</figure>

MediaCMS could have URLs that resolve to the files, for hotlinking on our blog. We would define a Zola shortcode, pass it the ID of the media object to return the corresponding URL.

For example, an image URL such as:

https://demo.mediacms.io/embed?m=YqYwNJeTb

To resolve to: https://demo.mediacms.io/media/original/thumbnails/user/markos/9814e7f15ca04de1a2cb16517f840f6e.IMG_20240111_085327.jpg_pOUmFbZ.jpg

Or a URL with different format, but still allowing hotlinking.

<figure class="inline-image">
  <div class="ratio169">
    <img src="https://mediacms.example.com/embed?m={{ id }}/>"
  </div>
  {% if caption %}<figcaption><p>{{ caption }}</p></figcaption>{% endif %}
</figure>