Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Full size image doesn't display when using the plugin in a Django project #68

Open
mapperfr opened this issue Sep 7, 2023 · 0 comments

Comments

@mapperfr
Copy link

mapperfr commented Sep 7, 2023

Hi,

I'm trying to use bs5-lightbox 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.

Here's what's happening:

Capture.video.du.2023-09-07.11-46-04.webm

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. There's a bit of Django templating language in it but it shouldn't be hard to read. In substance, 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.

Any suggestion would be very welcome on how to fix this. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant