RoR: How to get active_storage image to trigger a modal?

Question

I am trying to make an actiontext blob trigger a modal but it doesn't work.

action_storage/blobs/_blob.rb

    <figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
      <% if blob.representable? %>
        <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 500, 500 ] : [ 500, 500 ]) %>
      <% end %>
    
      <figcaption class="attachment__caption">
        <% if caption = blob.try(:caption) %>
          <%= caption %>
        <% end %>
      </figcaption>
    </figure>

My modal

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

I have tried wrapping button or a tags around like this

<% if blob.representable? %>
    <a href="#exampleModalCenter" data-toggle="modal" data-target="#exampleModalCenter">
        <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 500, 500 ] : [ 500, 500 ]) %>
      </a>
<% end %>

Or

<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 500, 500 ] : [ 500, 500 ]) %>
  </button>

Or

<%= link_to 'Click Here', "#", data: {toggle: "modal", target: "#modal"} do %>
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 200, 200 ] : [ 200, 200 ]) %>
  <% end %>

And more but none trigger the modal

I want the user to be able to click on the attachment and get a bigger view in a modal.

I have other modals in my application that work just fine. I have tried multiple different ways but the nearest I get is the link just refreshes the page. I assume it's possible to make the image trigger a modal through this partial?

Any ideas? ty

Answer 1

If you inspect what is being rendered in your browser you will find that your data-toggle="modal" and data-target html attributes are not being rendered.

This is due to the sanitize_action_text_content method within ActionText::ContentHelper module, which does not permit the data-toggle or data-target html attribute. I left an issue about this on the Rails project.

To have an html attribute rendered you need to add it to the permitted attributes like:

# config/initializers/action_text.rb
ActionText::ContentHelper.allowed_attributes += %w[ data-toggle data-target ]

OR

# config/initializers/action_text.rb
ActionText::Attachment::ATTRIBUTES.push "data-toggle", "data-target"