Craft CMS Asked on August 5, 2021
I have the following code that’s mostly working:
<img src="{{ asset.getUrl('thumb') }}" data-toggle="modal" data-target="#largeBike"
width="{{ asset.getWidth('thumb') }}" height="{{ asset.getHeight('thumb') }}" title="image" >
<!-- Modal -->
<div class="modal fade" id="largeBike" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">{{ entry.title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="{{ asset.url }}" class="img-fluid" /> TEST
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
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?
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.
Answered by RitterKnight on August 5, 2021
Your Bootstrap code is not correct... 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: {{ asset.loop.index }}
data-target="#modal-{{ asset.loop.index }}"
<div id="modal-{{ asset.loop.index }}">
Answered by Anna_MediaGirl on August 5, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP