<p>I believe the issue is this:</p>
<p><strong><code>data-target=&quot;&quot;</code></strong> MUST be unique for each modal and the unique name MUST match the corresponding modal's DIV ID.</p>
<p>Your code as currently written names all modals &quot;<strong>largeBike</strong>&quot; and this is why you're always seeing the first modal for every click.</p>
<p>To make the names unique, try something like this inside your entry loop: <code>{{ loop.index }}</code></p>
<pre><code>data-target=&quot;#modal-{{ loop.index }}&quot;

&lt;div id=&quot;modal-{{ loop.index }}&quot;&gt;
</code></pre>
<hr />
<p>EDIT</p>
<p>Your &quot;smallerImages&quot; {% for %} loop needs to look something like this.</p>
<pre><code>{% for asset in entry.smallerImages.all() %}
    &lt;img src=&quot;{{ asset.getUrl('thumb') }}&quot; width=&quot;{{ asset.getWidth('thumb') }}&quot; height=&quot;{{ asset.getHeight('thumb') }}&quot; title=&quot;image&quot; data-toggle=&quot;modal&quot; data-target=&quot;#bikeShowcase-{{ loop.index }}&quot;&gt;
    &lt;div class=&quot;modal fade&quot; id=&quot;bikeShowcase-{{ loop.index }}&quot;&gt;
      &lt;div class=&quot;modal-dialog modal-dialog-scrollable&quot; role=&quot;document&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
            &lt;img src=&quot;{{ asset.url }}&quot;/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
{% endfor %}
</code></pre>
<p>Here is working code:<br />
<a href="https://gist.githubusercontent.com/mediagirl/4f2f9ccfce6facc86073b87202b7c408/raw/6ff754acce8ebbbc87ae5fd42283de24d7fc9110/gistfile1.txt" rel="nofollow noreferrer">https://gist.githubusercontent.com/mediagirl/4f2f9ccfce6facc86073b87202b7c408/raw/6ff754acce8ebbbc87ae5fd42283de24d7fc9110/gistfile1.txt</a></p>

CC BY-SA 4.0
2021-08-05T15:08:15.487Z
Thanks for the response - same issue however. As it seems to be the consensus that it's a bootstrap error, I'm going to give RitterKnight's suggestion of creating a lightbox gallery a shot. Thanks again.
Shad
CC BY-SA 4.0
2021-08-05T19:07:24.470Z
It's not a bootstrap error exactly, it's just that the code isn't set up correctly. Is your code live somewhere? Post a URL. ALSO, if you can update your code in the question to include the OPENING {% for XXX %} statement, that would be helpful as well. The code sample should be complete so we can see all the pieces.
Anna_MediaGirl
CC BY-SA 4.0
2021-08-09T11:51:48.890Z
Thanks for the continued efforts at fixing my bad code! I've updated the code above with the complete template. An example page of where I'm trying to get this to work lives at https://www.harleyroads.com/decades/1930-1940. I'd like to be able to click one of the two smaller images and have it load into the modal window. Thanks again, so much!
Shad
CC BY-SA 4.0
2021-08-09T20:16:17.847Z
@Shad Your code is not set up correctly to get a Bootstrap modal working. I edited my answer with the correct setup.
Anna_MediaGirl
CC BY-SA 4.0
2021-08-12T16:06:57.513Z
Hi Anna, and thanks again for all your help. After updating my code with your updated code, I'm still having the same issues. I notice when inspecting, the `{{ asset.loop.index }}` isn't being populated: 

`<div class="modal fade show" id="bikeShowcase-" style="display: block;" aria-modal="true">`
I hate to be a bother, but any ideas on what I'm missing?

Thanks again!
Shad
CC BY-SA 4.0
2021-08-12T20:23:46.053Z
Use this instead: {{ loop.index }}
Anna_MediaGirl
CC BY-SA 4.0
2021-08-13T15:38:15.783Z
THANK YOU. Just for my edification, why did loop.index work but not asset.loop.index?
Shad
CC BY-SA 4.0
2021-08-16T18:59:30.090Z
asset.loop.index is the wrong code to use. It doesn't need the for loop name added at the start.
Anna_MediaGirl
CC BY-SA 4.0
2021-08-04T20:09:27.977Z
2021-08-16T18:59:48.503Z
2021-08-16T18:59:48.503Z
Anna_MediaGirl
<p>This is more of a Bootrap question than Craft but from your code it looks like you're trying to create a modal and corresponding model from each instance?</p>
<p>You probably want to change the <code>data-target</code> in your first for each instance.</p>
<p>A slightly better way to handle this would be follow <a href="https://diegovogel.medium.com/create-a-lightbox-gallery-with-standard-bootstrap-components-b9de322ddb9e" rel="nofollow noreferrer">this</a> example.</p>
<p>Basically for the modal contents, you want to load up the larger images again for the modal:</p>
<pre><code>{% for asset in entry.assetField %}
&lt;div class=&quot;carousel-item&quot;&gt;
              &lt;img class=&quot;d-block w-100&quot; src=&quot;{{asset.url}}&quot;&gt;
&lt;/div&gt;
</code></pre>
<p>One last option would be to handle this would be to treat the images like a Lightbox and use a <a href="https://ashleydw.github.io/lightbox/" rel="nofollow noreferrer">Lightbox bootstrap plugin</a> for such a purpose.</p>

CC BY-SA 4.0
2021-08-04T19:27:03.167Z
Thanks for the response - given that from a Bootstrap point of view everything working as expected, I think my issue is in my Craft code somewhere. I'll keep poking at it.
Shad
CC BY-SA 4.0
2021-08-05T14:00:05.797Z
Ah, given that Anna below suggested bootstrap issues as well, I'm apparently barking up the wrong tree and want to apologize. Apparently you were pointing me in the right direction to begin with!
Shad
CC BY-SA 4.0
2021-08-03T20:27:46.803Z
2021-08-03T20:27:46.803Z
RitterKnight
<p>I have the following code that's mostly working:</p>
<pre><code>{#
# Decades category template
# -------------------
#}

{% extends &quot;_layout&quot; %}
{% set title = &quot;Decades&quot; %}

{% block content %}

&lt;div class=&quot;container-fluid decades&quot;&gt;
  &lt;div class=&quot;row &quot;&gt;
    &lt;h1 class=&quot;col-sm-12&quot;&gt;{{ category.title }}&lt;/h1&gt;
  &lt;/div&gt;


  {% paginate craft.entries
  .section('decades')
  .relatedTo(category)
  .limit(10)
  .orderBy('bikeYear')
  as entries
  %}

  {% if entries|length %}

  {# Content #}
  {% for entry in entries %}
  &lt;div class=&quot;row bike-info&quot;&gt;
    &lt;div class=&quot;col-md-6 col-12&quot;&gt;

      &lt;h2&gt;{{ entry.title }} &lt;/h2&gt;
      {{ entry.body }}
      &lt;div class=&quot;col-md-4&quot;&gt;&lt;strong&gt;Bike Model:&lt;/strong&gt; {{ entry.bikeModel }}&lt;/div&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;&lt;strong&gt;Bike Year:&lt;/strong&gt; {{ entry.bikeYear }}&lt;/div&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;{% if entry.bikePrice %}&lt;strong&gt;Bike Price:&lt;/strong&gt; ${{ entry.bikePrice }}{% endif %}&lt;/div&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;{% if entry.bikeEngine %}&lt;strong&gt;Engine type:&lt;/strong&gt; {{ entry.bikeEngine }}{% endif %}
      &lt;/div&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;{% if entry.bikeProduction %}&lt;strong&gt;Production Totals:&lt;/strong&gt;
        {{ entry.bikeProduction }}{% endif %} &lt;/div&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;{% if entry.isEditable() %}&lt;a href=&quot;{{ entry.cpEditUrl }}&quot;&gt;Edit entry&lt;/a&gt;{% endif %}&lt;/div&gt;

    &lt;/div&gt;
    &lt;div class=&quot;col-md-6 col-12 py-3&quot;&gt;
      {% for asset in entry.mainImage.all() %}
      &lt;img src=&quot;{{ asset.url }}&quot; alt=&quot;{{ asset.title }}&quot; class=&quot;img-fluid&quot; /&gt;
      {% endfor %}
      &lt;div class=&quot;py-3&quot; data-toggle=&quot;modal&quot; data-target=&quot;#bikeShowcase-{{ asset.loop.index }}&quot;&gt;

        {% for asset in entry.smallerImages.all() %}
        &lt;img src=&quot;{{ asset.getUrl('thumb') }}&quot; width=&quot;{{ asset.getWidth('thumb') }}&quot;
          height=&quot;{{ asset.getHeight('thumb') }}&quot; title=&quot;image&quot; data-toggle=&quot;modal&quot;
          data-target=&quot;#bikeShowcase-{{ asset.loop.index }}&quot;&gt;
        &lt;div class=&quot;modal fade&quot; id=&quot;bikeShowcase-{{ asset.loop.index }}&quot;&gt;
          &lt;div class=&quot;modal-dialog modal-dialog-scrollable&quot; role=&quot;document&quot;&gt;
            &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                &lt;img src=&quot;{{ asset.url }}&quot; class=&quot;img-fluid&quot; /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        {% endfor %}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
&lt;/div&gt;


{% endfor %}

{% else %}
&lt;div class=&quot;row bike-info&quot;&gt;
  &lt;div class=&quot; col-12&quot;&gt;

    &lt;h2&gt;No items have been added to this Category yet. What kind of slacker website is this?&lt;/h2&gt;
  &lt;/div&gt;
&lt;/div&gt;

{% endif %}


&lt;/div&gt;



{% endblock %}
</code></pre>
<p>When I click an image, the modal loads, and has the entry title and a larger picture of the one clicked. If there are several small images, however, the first one of the bunch is always loaded into the modal window.</p>
<p>I've wrapped the <code>img src</code> tag in an anchor and set the src to <code>{{asset.url}}</code> and that will load the individual images as expected. If I try and load them into a modal window, only the first option is ever shown.</p>
<p>Any ideas?</p>

<assets><modal>
Bootstrap 4 Modal show same image, regardless of thumbnail selected
# Bootstrap 4 Modal show same image, regardless of thumbnail selected

(Asked by: username_0 on 2021-08-03)

I have the following code that's mostly working:
{#
# Decades category template
# -------------------
#}

{% extends "_layout" %}
{% set title = "Decades" %}

{% block content %}


  
    {{ category.title }}
  


  {% paginate craft.entries
  .section('decades')
  .relatedTo(category)
  .limit(10)
  .orderBy('bikeYear')
  as entries
  %}

  {% if entries|length %}

  {# Content #}
  {% for entry in entries %}
  
    

      {{ entry.title }} 
      {{ entry.body }}
      Bike Model: {{ entry.bikeModel }}
      Bike Year: {{ entry.bikeYear }}
      {% if entry.bikePrice %}Bike Price: ${{ entry.bikePrice }}{% endif %}
      {% if entry.bikeEngine %}Engine type: {{ entry.bikeEngine }}{% endif %}
      
      {% if entry.bikeProduction %}Production Totals:
        {{ entry.bikeProduction }}{% endif %} 
      {% if entry.isEditable() %}Edit entry{% endif %}

    
    
      {% for asset in entry.mainImage.all() %}
      
      {% endfor %}
      

        {% for asset in entry.smallerImages.all() %}
        
        
          
            
              
                
              
            
          
        
        {% endfor %}
      
    
  
  



{% endfor %}

{% else %}

  

    No items have been added to this Category yet. What kind of slacker website is this?
  


{% endif %}






{% endblock %}

When I click an image, the modal loads, and has the entry title and a larger picture of the one clicked. If there are several small images, however, the first one of the bunch is always loaded into the modal window.
I've wrapped the img src tag in an anchor and set the src to {{asset.url}} and that will load the individual images as expected. If I try and load them into a modal window, only the first option is ever shown.
Any ideas?

**Tags:** assets, modal

---

## 2 answers

### Answer by username_1 on 2021-08-04. Score: 1 | Accepted answer

I believe the issue is this:
data-target="" MUST be unique for each modal and the unique name MUST match the corresponding modal's DIV ID.
Your code as currently written names all modals "largeBike" and this is why you're always seeing the first modal for every click.
To make the names unique, try something like this inside your entry loop: {{ loop.index }}
data-target="#modal-{{ loop.index }}"




EDIT
Your "smallerImages" {% for %} loop needs to look something like this.
{% for asset in entry.smallerImages.all() %}
    
    
      
        
          
            
          
        
      
    
{% endfor %}

Here is working code:
https://gist.githubusercontent.com/mediagirl/4f2f9ccfce6facc86073b87202b7c408/raw/6ff754acce8ebbbc87ae5fd42283de24d7fc9110/gistfile1.txt

> **Comments:**
> **username_0**: Thanks for the response - same issue however. As it seems to be the consensus that it's a bootstrap error, I'm going to give RitterKnight's suggestion of creating a lightbox gallery a shot. Thanks again.  
> **username_1**: It's not a bootstrap error exactly, it's just that the code isn't set up correctly. Is your code live somewhere? Post a URL. ALSO, if you can update your code in the question to include the OPENING {% for XXX %} statement, that would be helpful as well. The code sample should be complete so we can see all the pieces.  
> **username_0**: Thanks for the continued efforts at fixing my bad code! I've updated the code above with the complete template. An example page of where I'm trying to get this to work lives at https://www.harleyroads.com/decades/1930-1940. I'd like to be able to click one of the two smaller images and have it load into the modal window. Thanks again, so much!  
> **username_1**: @Shad Your code is not set up correctly to get a Bootstrap modal working. I edited my answer with the correct setup.  
> **username_0**: Hi Anna, and thanks again for all your help. After updating my code with your updated code, I'm still having the same issues. I notice when inspecting, the `{{ asset.loop.index }}` isn't being populated:   `<div class="modal fade show" id="bikeShowcase-" style="display: block;" aria-modal="true">` I hate to be a bother, but any ideas on what I'm missing?  Thanks again!  
> **username_1**: Use this instead: {{ loop.index }}  
> **username_0**: THANK YOU. Just for my edification, why did loop.index work but not asset.loop.index?  
> **username_1**: asset.loop.index is the wrong code to use. It doesn't need the for loop name added at the start.  

---

### Answer by username_2 on 2021-08-03. Score: 1

This is more of a Bootrap question than Craft but from your code it looks like you're trying to create a modal and corresponding model from each instance?
You probably want to change the data-target in your first for each instance.
A slightly better way to handle this would be follow this example.
Basically for the modal contents, you want to load up the larger images again for the modal:
{% for asset in entry.assetField %}

              


One last option would be to handle this would be to treat the images like a Lightbox and use a Lightbox bootstrap plugin for such a purpose.

> **Comments:**
> **username_0**: Thanks for the response - given that from a Bootstrap point of view everything working as expected, I think my issue is in my Craft code somewhere. I'll keep poking at it.  
> **username_0**: Ah, given that Anna below suggested bootstrap issues as well, I'm apparently barking up the wrong tree and want to apologize. Apparently you were pointing me in the right direction to begin with!  

---

