Boostrap Modal and loading images in Django

Firstly I am a beginner at Django but am slowly learning, I have deployed a couple of Django projects, but I have come up against a problem where I have run out of ideas on how to solve due to a lack of knowledge. I have no experience really with the frontend, I have yet to touch Boostrap (although obviously know some HTML ) or JS in detail.

I am using a HTML template to build a Photography portfolio, I have a Album view with image thumbnails which work nicely and I have a href to the list of images within that Album.

The problem is that template uses Boostrap Modal to open the list of images within the same page, this looks very nice and I want to try and keep it working but unsure how to pass my Django data (ie., the slug from the href ) through the modal.

What I have attempted is to split my gallery-detail template which takes in the listview of the Album images filter by that album, and then include that within my main Gallery template which uses my Gallery ListView to show the thumbnails. I though the modal would work this way as they would maybe technically be on the same page?

I'm just unsure, how do I pass view context into modals? Below is my relevant code which hopefully makes it easier to understand what I am trying to do

Where I am at the moment....the modal loads on same page, but no images are shown just the close X icon. If I right-click and open the URL all images open corresponding to that Album correctly but with no css or styling.

Models

    name = models.CharField(max_length=200, null=True)
    slug = AutoSlugField(populate_from='name')
    created = models.DateTimeField()
    visable = models.BooleanField(default=False)
    type = models.ForeignKey(Category, on_delete=models.CASCADE, null=True, blank=True)
    image = models.ForeignKey('Media', on_delete=models.CASCADE)
    album_images = models.ManyToManyField('Media', related_name="album_pictures")

    def __str__(self):
        return str(self.name)

class Media(models.Model):

    timestamp = models.DateTimeField()
    image = models.ImageField(upload_to="media")
    order = models.IntegerField(default=0)
    visable = models.BooleanField(default=True)
    categories = models.ForeignKey(Category, on_delete=models.CASCADE, null=True, blank=True)


    class Meta:
        verbose_name_plural = "Media"

Views. Straightforward enough.

class GalleryView(ListView):

    template_name = "main/gallery.html"
    model = Albums



class GalleryDetailView(ListView):

    template_name = "main/gallery-detail.html"
    model = Media

    def get_queryset(self):

        gallery = get_object_or_404(Albums, slug=self.kwargs['slug'])
        print(gallery)
        return Media.objects.filter(album_pictures=gallery)

Templates. Gallery.


{% extends "main/base.html" %}
{% load static %}
{% block gallery %}
{% for gallery in object_list %}
    <div class="item col-xs-6 col-sm-6 col-md-4">
            <figure class="overlay"> <a href="{% url 'main:gallery_detail' gallery.slug %}"  data-toggle="modal" data-target="#myModal1">
              <div class="text-overlay caption">
                <div class="info">
                  <h2 class="post-title">{{ gallery.name }}</h2>
                  <div class="meta"> <span class="count">7 Photos</span> <span class="category">Hobby</span></div>
                </div>
              </div>
              <img src="{{ gallery.image.image.url }}" alt="" /></a> </figure>
          </div>
{% endfor %}
{% include "main/gallery-detail.html" %}
{% endblock %}

gallery-detail template

{% extends "main/base.html" %}
{% load static %}
{% block gallery %}
{% for gallery in object_list %}
    <div class="item col-xs-6 col-sm-6 col-md-4">
            <figure class="overlay"> <a href="{% url 'main:gallery_detail' gallery.slug %}"  data-toggle="modal" data-target="#myModal1">
              <div class="text-overlay caption">
                <div class="info">
                  <h2 class="post-title">{{ gallery.name }}</h2>
                  <div class="meta"> <span class="count">7 Photos</span> <span class="category">Hobby</span></div>
                </div>
              </div>
              <img src="{{ gallery.image.image.url }}" alt="" /></a> </figure>
          </div>
{% endfor %}
{% include "main/gallery-detail.html" %}
{% endblock %}

Back to Top