Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-05T15:08:15.487Z
Answers.Text: 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.
Answers.UserDisplayName: Shad
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-05T19:07:24.470Z
Answers.Text: 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.
Answers.UserDisplayName: Anna_MediaGirl
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-09T11:51:48.890Z
Answers.Text: 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!
Answers.UserDisplayName: Shad
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-09T20:16:17.847Z
Answers.Text: @Shad Your code is not set up correctly to get a Bootstrap modal working. I edited my answer with the correct setup.
Answers.UserDisplayName: Anna_MediaGirl
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-12T16:06:57.513Z
Answers.Text: 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!
Answers.UserDisplayName: Shad
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-12T20:23:46.053Z
Answers.Text: Use this instead: {{ loop.index }}
Answers.UserDisplayName: Anna_MediaGirl
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-13T15:38:15.783Z
Answers.Text: THANK YOU. Just for my edification, why did loop.index work but not asset.loop.index?
Answers.UserDisplayName: Shad
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-16T18:59:30.090Z
Answers.Text: asset.loop.index is the wrong code to use. It doesn't need the for loop name added at the start.
Answers.UserDisplayName: Anna_MediaGirl
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-04T20:09:27.977Z
Answers.LastActivityDate: 2021-08-16T18:59:48.503Z
Answers.LastEditDate: 2021-08-16T18:59:48.503Z
Answers.UserDisplayName: Anna_MediaGirl
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-04T19:27:03.167Z
Answers.Text: 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.
Answers.UserDisplayName: Shad
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-05T14:00:05.797Z
Answers.Text: 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!
Answers.UserDisplayName: Shad
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-03T20:27:46.803Z
Answers.LastActivityDate: 2021-08-03T20:27:46.803Z
Answers.UserDisplayName: RitterKnight
Body: <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>
  
Tags: <assets><modal>
Title: Bootstrap 4 Modal show same image, regardless of thumbnail selected
ThreadText: # 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 %}
  
  <div class="container-fluid decades">
    <div class="row ">
      <h1 class="col-sm-12">{{ category.title }}</h1>
    </div>
  
    {% paginate craft.entries
    .section('decades')
    .relatedTo(category)
    .limit(10)
    .orderBy('bikeYear')
    as entries
    %}
  
    {% if entries|length %}
  
    {# Content #}
    {% for entry in entries %}
    <div class="row bike-info">
      <div class="col-md-6 col-12">
  
        <h2>{{ entry.title }} </h2>
        {{ entry.body }}
        <div class="col-md-4"><strong>Bike Model:</strong> {{ entry.bikeModel }}</div>
        <div class="col-md-4"><strong>Bike Year:</strong> {{ entry.bikeYear }}</div>
        <div class="col-md-4">{% if entry.bikePrice %}<strong>Bike Price:</strong> ${{ entry.bikePrice }}{% endif %}</div>
        <div class="col-md-4">{% if entry.bikeEngine %}<strong>Engine type:</strong> {{ entry.bikeEngine }}{% endif %}
        </div>
        <div class="col-md-4">{% if entry.bikeProduction %}<strong>Production Totals:</strong>
          {{ entry.bikeProduction }}{% endif %} </div>
        <div class="col-md-4">{% if entry.isEditable() %}<a href="{{ entry.cpEditUrl }}">Edit entry</a>{% endif %}</div>
  
      </div>
      <div class="col-md-6 col-12 py-3">
        {% for asset in entry.mainImage.all() %}
        <img src="{{ asset.url }}" alt="{{ asset.title }}" class="img-fluid" />
        {% endfor %}
        <div class="py-3" data-toggle="modal" data-target="#bikeShowcase-{{ asset.loop.index }}">
  
          {% for asset in entry.smallerImages.all() %}
          <img src="{{ asset.getUrl('thumb') }}" width="{{ asset.getWidth('thumb') }}"
            height="{{ asset.getHeight('thumb') }}" title="image" data-toggle="modal"
            data-target="#bikeShowcase-{{ asset.loop.index }}">
          <div class="modal fade" id="bikeShowcase-{{ asset.loop.index }}">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
              <div class="modal-content">
                <div class="modal-body">
                  <img src="{{ asset.url }}" class="img-fluid" />
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    <hr>
  </div>
  
  {% endfor %}
  
  {% else %}
  <div class="row bike-info">
    <div class=" col-12">
  
      <h2>No items have been added to this Category yet. What kind of slacker website is this?</h2>
    </div>
  </div>
  
  {% endif %}
  
  </div>
  
  {% 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 }}"
  
  <div id="modal-{{ loop.index }}">
  
  ```
  
  ---
  
  EDIT
  
  Your "smallerImages" {% for %} loop needs to look something like this.
  
  ```
  {% for asset in entry.smallerImages.all() %}
      <img src="{{ asset.getUrl('thumb') }}" width="{{ asset.getWidth('thumb') }}" height="{{ asset.getHeight('thumb') }}" title="image" data-toggle="modal" data-target="#bikeShowcase-{{ loop.index }}">
      <div class="modal fade" id="bikeShowcase-{{ loop.index }}">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
          <div class="modal-content">
            <div class="modal-body">
              <img src="{{ asset.url }}"/>
            </div>
          </div>
        </div>
      </div>
  {% 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 username_2'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**: @username_0 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](https://diegovogel.medium.com/create-a-lightbox-gallery-with-standard-bootstrap-components-b9de322ddb9e) example.
  
  Basically for the modal contents, you want to load up the larger images again for the modal:
  
  ```
  {% for asset in entry.assetField %}
  <div class="carousel-item">
                <img class="d-block w-100" src="{{asset.url}}">
  </div>
  
  ```
  
  One last option would be to handle this would be to treat the images like a Lightbox and use a [Lightbox bootstrap plugin](https://ashleydw.github.io/lightbox/) 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!  
  
  ---
  
  