Boostrap Modal и загрузка изображений в Django

Во-первых, я новичок в Django, но постепенно учусь, я развернул пару проектов Django, но я столкнулся с проблемой, когда у меня закончились идеи, как ее решить из-за недостатка знаний. У меня нет опыта работы с фронтендом, я еще не касался Boostrap (хотя, очевидно, знаю немного HTML) или JS в деталях.

Я использую HTML шаблон для создания портфолио фотографии, у меня есть представление альбома с миниатюрами изображений, которые хорошо работают, и у меня есть href к списку изображений в этом альбоме.

Проблема в том, что шаблон использует Boostrap Modal для открытия списка изображений на одной странице, это выглядит очень красиво, и я хочу попробовать сохранить это, но не знаю, как передать мои данные Django (т.е. slug из href) через modal.

Я попытался разделить мой шаблон gallery-detail, который принимает список изображений альбома, отфильтрованных по альбому, и затем включить его в мой основной шаблон Gallery, который использует мой Gallery ListView для показа миниатюр. Я думал, что modal будет работать таким образом, так как технически они могут находиться на одной странице?

Я просто не уверен, как мне передать контекст представления в modals? Ниже приведен мой соответствующий код, который, надеюсь, поможет понять, что я пытаюсь сделать

Вот где я сейчас нахожусь.... модал загружается на той же странице, но никаких изображений не показывается, только значок закрытия X. Если я щелкаю правой кнопкой мыши и открываю URL, то все изображения открываются, соответствующие этому альбому, но без css или стилизации.

Модели

    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"

Виды. Достаточно просто.

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)

Шаблоны. Галерея.

{% 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 %}

Шаблон галереи-детали

{% 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 %}

Вернуться на верх