0

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?

1

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

8
  • 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
    Aug 5 at 15:08
  • 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
    Aug 5 at 19:07
  • 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 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
    Aug 9 at 11:51
  • @Shad Your code is not set up correctly to get a Bootstrap modal working. I edited my answer with the correct setup.
    – Anna_MediaGirl
    Aug 9 at 20:16
  • 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
    Aug 12 at 16:06
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 %}
<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 for such a purpose.

2
  • 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
    Aug 4 at 19:27
  • 1
    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
    Aug 5 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.