title: RoR: How to get active_storage image to trigger a modal?
body: <p>I am trying to make an actiontext blob trigger a modal but it doesn't work.</p>
  <pre><code>action_storage/blobs/_blob.rb
  
      &lt;figure class=&quot;attachment attachment--&lt;%= blob.representable? ? &quot;preview&quot; : &quot;file&quot; %&gt; attachment--&lt;%= blob.filename.extension %&gt;&quot;&gt;
        &lt;% if blob.representable? %&gt;
          &lt;%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 500, 500 ] : [ 500, 500 ]) %&gt;
        &lt;% end %&gt;
      
        &lt;figcaption class=&quot;attachment__caption&quot;&gt;
          &lt;% if caption = blob.try(:caption) %&gt;
            &lt;%= caption %&gt;
          &lt;% end %&gt;
        &lt;/figcaption&gt;
      &lt;/figure&gt;
  
  My modal
  
      &lt;div class=&quot;modal fade&quot; id=&quot;exampleModalCenter&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
        &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
              &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Modal title&lt;/h5&gt;
              &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
              ...
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>I have tried wrapping button or a tags around like this</p>
  <pre><code>&lt;% if blob.representable? %&gt;
      &lt;a href=&quot;#exampleModalCenter&quot; data-toggle=&quot;modal&quot; data-target=&quot;#exampleModalCenter&quot;&gt;
          &lt;%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 500, 500 ] : [ 500, 500 ]) %&gt;
        &lt;/a&gt;
  &lt;% end %&gt;
  </code></pre>
  <p>Or</p>
  <pre><code>&lt;button type=&quot;button&quot; class=&quot;btn&quot; data-toggle=&quot;modal&quot; data-target=&quot;#exampleModalCenter&quot;&gt;
      &lt;%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 500, 500 ] : [ 500, 500 ]) %&gt;
    &lt;/button&gt;
  </code></pre>
  <p>Or</p>
  <pre><code>&lt;%= link_to 'Click Here', &quot;#&quot;, data: {toggle: &quot;modal&quot;, target: &quot;#modal&quot;} do %&gt;
      &lt;%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 200, 200 ] : [ 200, 200 ]) %&gt;
    &lt;% end %&gt;
  </code></pre>
  <p>And more but none trigger the modal</p>
  <p>I want the user to be able to click on the attachment and get a bigger view in a modal.</p>
  <p>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?</p>
  <p>Any ideas? ty</p>