How to place alt and title values on several places in insert-image.html.twig?

Unfortunately, this method will not work. The Insert module is processing the image attributes on the JavaScript layer only, hence does not process alt and title attributes through the backend. Neither alt, nor title variables are available in the Twig template.

Attribute synchronisation can be set up using the instructions on Synchronizing text input → . However, this synchronises attributes only, not text content. I'm afraid it's not possible at this point and would be required to be added as feature.

There would need to be some sort of "#text" option on the "attach" object that would then set the text content of the node that is attached to the Insert module logic. Feel free to create a feature request or convert this issue to a feature request if it is still relevant. Patches welcome of course. It would not be a huge change, yet I doubt I will have time to implement it. Also, please consider the future of the module is uncertain: https://www.drupal.org/project/insert/issues/3314446 📌 CKEditor 5 compatibility Active .

Ok, I find sollution.

For using constructions like:

<div>{{ alt }}</div>
<div>{{ title }}</div>

must be used 8.x-1.0 version of insert https://www.drupal.org/project/insert/releases/8.x-1.0 →

So in ADMIN_THEME/templates/insert-image.html.twig code should be like

<div>__title__</div>      
<div>__alt__</div>

yes, without {{ }}

but if image without title inserted value would be:
<div>__title__</div>
not
<div>TITLE OF IMAGE</div>
let's fix that.

In js/FileInserter.js function _cleanupPlaceholders: function(template) should be changed to:

    /**
       * @param {string} template
       * @return {string}
       */
      _cleanupPlaceholders: function(template) {
        // Cleanup unused tags.
        template = template.replace(/<[a-z]+>__[a-z]+__<\/[a-z]+>/g, '');

        // Cleanup unused replacements.
        template = template.replace(/"__([a-z0-9_]+)__"/g, '""');

        // Cleanup empty attributes (other than alt).
        template = template.replace(/([a-z]+)[ ]*=[ ]*""[ ]?/g, function(match, tagName) {
          return (tagName === 'alt') ? match : '';
        });

        template = template.replace(/[ ]?>/g, '>');

        return template;
      },

patch attached.

Just scanning through the code—after all it has been a while since I looked at it in depth—I came across a functionality that actually seems to set a node's content in Insert version 2.x: https://git.drupalcode.org/project/insert/-/blob/8.x-2.x/js/Handler.js#L205

In your template file overwrite, you should be able to define an object similar to attach like so:

{%
  set attach_content = {
    id: id,
    content: ['title'],
  }
%}

And attach the object to the node in the same template overwrite:

<div data-insert-attach='{{ attach_content|json_encode() }}' data-insert-type="{{ field_type }}" />

If your code works for you and you are fine using Insert version 1.x, that's just alright of course. But I would not want to merge in the patch because it will also remove the wrapping node if there is no text. '<div>__title__</div>' would become ''. And what about the node having attributes etc. The Insert module placeholders should be agnostic to their environment. '<div>__title__</div>' becoming '<div></div>' would be expected behaviour. Altering the behaviour with a custom patch would of course be one way to customize the functionality.

I spend the time trying the solution I suggested in my previous message. Unfortunately, it does not just work at the moment because the JSON passed to data-insert-attach expects attributes to be provided. Fortunately, it's easy to fix, which is what I attached a change set for.

Also important to note is that, in the template file which I placed in my backend theme's folder, I eventually used:

<div data-insert-attach='{{ attach_content|json_encode() }}' data-insert-type="{{ field_type }}"> </div>

Note the space inside the div node. If the code is empty, or a self-closing tag is used, the placed template will be messed up resulting in erroneous behaviour. Therefore, the tag should just not be empty.

Hello, I am very interested in this possibility.
I use Colorbox with Insert Colorbox and there is the same problem:
the alt and title values are not displayed with insert because it is in the href tag that you must include alt
how to write this code?
THANKS

I'm not precisely sure what you are trying to achieve.

With the patch set I had attached earlier, I can place the alt tag into the template, the same should work for the title. It also works in insert-colorbox-image.html.twig:

...
{%
  set attach_content = {
  id: id,
  content: ['alt'],
}
%}

<div data-insert-attach='{{ attach_content|json_encode() }}' data-insert-type="{{ field_type }}"> </div>
<img .../>
...

However, it's not yet possible to have the element in the a tag. The following does not work at the moment if that is what you trying to achieve, the synchronisation removes necessary DOM structure. Achieving this would require some more look and I'm not sure whether this would actually be out of scope because the module might become too complex:

...
<a ...>
  <div data-insert-attach='{{ attach_content|json_encode() }}' data-insert-type="{{ field_type }}"> </div>
  <img .../>
</a>
...

Could you post some code how you would image your customised template to look like?

Since some time passed on this issue, I have submitted the patch set from comment #5 and am setting the issue to fixed. Feel free to open a new feature request if additional functionality is desired. Just be sure to include a detailed description of the desired functionality as mentioned in comment #7.

Ok, I install latest dev (how I see with patch).

How to place alt and title values in insert-image.html.twig ?

Change

{%
  set attach = {
    id: id,
    attributes: {
      alt: [
        'alt',
        'description',
      ],
      title: [
        'title',
      ],
    },
  }  
%}

to

{%
  set attach_content = {
    id: id,
    content: ['title'],
  }
%

and

{{ attach_content|json_encode() }}

It's doesn't work :(

I have a similar issue but I just don't know from which angle to grab it. Reading through this ticket it seems like I'd override the FileHandler.js but I just don't see where FileHandler is creating the link for ckeditor.

I'd like that my file links created by insert would have a description as a link title and not the filename. Any advice how to achieve that? Thanks in advance.

(Feel free to reopen the ticket if there are additional questions, for me to notice there is continuing activity on the ticket. I just close tickets if there is no more response after a while as it's unfortunately very common that communication just stops at some point.)

@VasyOK: It seems you did like I confirmed things to be working. There are problems if the image is encapsulated in an a though, such will not work unfortunately, but I'm not sure about you whole template setup. Can you post your whole custom template, so I can try to reproduce the issue you are experiencing?

@useernamee: As to what I understand about what you'd like to achieve, this is a feature that works by just activating the description on a file upload field. It's preconfigured in Insert for when inserting files that the description is used as link title instead of the filename, if the description is enabled on the file upload field. You can look into the insert-link.html.twig to see the default mechanism. Or is the description supposed to be taken from some other input element?

I have made it very simple:

<p class="text-align-center">
<a href="{{ url_link }}" class="colorbox insert-colorbox" data-insert-type="{{ field_type }}"{% if gallery_id != '' %} data-colorbox-gallery="{{ gallery_id }}"{% endif %}>
  <img src="{{ url }}"{{ attributes }} {% if width and height %}width="{{ width }}" height="{{ height }}" {% endif %}{% if classes|length %} class="{{ classes|join(' ') }}"{% endif %} data-insert-type="{{ field_type }}" data-entity-type="{{ entity_type }}" data-entity-uuid="{{ uuid }}" data-insert-attach='{"id": "{{ id }}", "attributes": {"alt": ["alt", "description"], "title": ["title"]{% if insert_caption %}, "data-caption": ["title"]{% endif %}}}' />
</a>
{% if ['alt'] %}{% if ['alt'] %}<br/><span data-insert-attach='{"content": ["alt"]}'></span>{% endif %}
</p>

I don't use orientation, so i added a p tag around the link, and if alt is present:

{% if ['alt'] %}<br/><span data-insert-attach='{"content": ["alt"]}'></span>{% endif %}

That's it. :)

Revisiting tickets preparing for the 3.x release, I guess this seems to be figured thanks to the input by nitrocad.

If there is still some issue around this topic in the most current 3.x version, feel free to reopen the issue or create a new one.

Automatically closed - issue fixed for 2 weeks with no activity.