Enter image in the editor with more extensive HTML

Support Plugins
1

I want to transfer my existing websites to Grav so that other authors can easily edit content without any knowledge of the syntax and semantics of programming languages.
A problem I haven’t been able to solve yet: How can I ensure that inserting an image during editing generates more than just the usual img tag?
Example: I currently have images automatically tagged with the copyright and image description from the EXIF/IPTC data. After installing the “Admin Addon Media Metadata” plugin and “system.yaml → media.auto_metadata_exif: true,” this works explicitly when written into a template:

<div class="crbild center">
   <div>
      {% set obild = page.media[bild] %} {# “bild” is taken from header.media_order or the files in user/pages #} 
      {{ obild.cropResize(500,500).quality(100).html()|raw }}
      {% if obild[“copyright”] %} 
          {% set foto = “© ” ~ obild[“copyright”] %}
      {% elseif obild[“author”] %}
            {% set foto = “Photo: ” ~ obild[“author”] %}
      {% endif %}
      <div>{{ foto }}</div>        
   </div>
   {{ obild[“caption”] }}
</div>

and the corresponding CSS:

.crbild >div { 
   position: relative;
   >div {
      position: absolute;
      right:0.5em;
      bottom:0.25em;
      color:rgb(200 200 200);
       text-shadow:0.1em 0.1em rgb(50 50 50); }}

How can I ensure that such an entry is automatically generated when inserting an image with the admin editor? It would also be nice if you could configure additional image settings in the pop-up window when inserting images in the editor.
I prefer the TinyMCE editor, perhaps an extension of the “image” plugin (tinymce/plugins/image) is possible there. But I haven’t found such options for Grav’s standardized Markdown editor either.

This here is just a simplified example. I do even more with the images: burning in watermarks, foil against unauthorized copying, etc.
All of this should then be possible using only the “insert image” editor function and the corresponding pop-up.

2

@paulchen, Please consider the readability of code snippets. Please edit your post and surround your snippet with triple backticks (```), like

```
your
   nicely indented
snippet
```
3

idk if this will help, just giving an idea
lets say we have this output

you want this to have cropPresize, quality, if-copyright, css-options…
and a lot more.
firstly for css there we can add class

![Some ALT text](sample-image.jpg?classes=myclass "My title")

other than that i have an idea :slight_smile:
when we put things to filed that we edit page at admin plugin, there is a place where its output come to life > base.html.twig > {% block content %}
there we can edit output as we want which is “content” like content|filter
so lets say we put an image to field at admin plugin for a page, and it will come out from “content” like |filter
what can we do with that?
lets say this is what we have

<img title="My title" alt="Some ALT text" class="myclass" src="/images/a/f/2/8/f/af28f2ad724f1e05248ac8dd518b2a5789c6cd41-sample-image.jpg" />

lets say we want to add caption when we have auto,
“My title | Cap: This images caption”
we can use title to add filter like split from title, find 0 and 1 “”" and split between
if it has “|” and has Cap:, replace(" |“,”“) replace(” Cap: “,”“) replace first “>”,”>
This images caption"
etc etc, with that we can have many options to add image i think but need a coding work.

also this needs a try but maybe we can just remove and use its src, alt, title to create twig code to produce image and use cropResize(500,500) etc. on it…