Full size image doesn't show-up when using bs5-lightbox plugin in a Django project

124 Views Asked by At

I'm trying to use the bs5-lightbox plugin in a Django project and I'm encoutering some display issues. The plugin seems to be properly implemented and reactive, however when I click on one of the images, it doesn't display the image at the expected size.

You can see a video of what's happening on the GH issue page: https://github.com/trvswgnr/bs5-lightbox/issues/

I didn't do it in the video, but if I right click on the small-sized popped up image and "open in new tab", the proper-sized image shows up.

I uploaded the script locally but the issue was exactly the same when loading it from the CDN. The script is loaded at the end of my html file, after the bootstrap script.

Here's an excerpt of my Django template code. If the image has principale == True, it displays as a single image:

{% for image in object.illustrations.all %}
{% if image.principale == True %}

<figure class="figure">
  <a href="{{ image.image.url }}" data-toggle="lightbox" data-gallery="focus-gallery" data-caption={{ image.legende }}>
          <img src="{{ image.image_thumbnail_medium.url }}" class="img-fluid">

  </a>
</figure>

{% endif %}
{% endfor %}

And when principale == False, it loads a gallery with the other images:

{% for image in object.illustrations.all %}
{% if image.principale == False %}

<figure class="figure">
  <a href="{{ image.image.url }}" data-toggle="lightbox" data-gallery="general-gallery">
  <img src="{{ image.image_thumbnail_small.url }}" class="rounded justify-content-between mx-1 my-1">
  </a>
</figure>

{% endif %}
{% endfor %}

The {{ image.image.url }} and other sections between curly brackets dynamically load the images based on their model definition. I don't think that's where the issue comes from as I tested with different values and it seems to be loading all the expected images.

0

There are 0 best solutions below