Итерируемый список в Django HTML?

Я хочу использовать bootstrap для создания карусели, используя методы D.R.Y. Моя идея (и это может быть даже не осуществимо) состоит в том, чтобы иметь список или словарь и циклически перебирать местоположения изображений. Вот что я написал на данный момент.

            <div class="carousel-inner">
              {% with images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg'] %}
              {% for image in images %}
              <div class="carousel-item active" data-bs-interval="10000" style="background-image:url({%static {image}%})">
                <div class='container'>
                  <section class='time'>
                    <h3><strong>HOURS</strong></h3>
                    <h3><strong>Monday - Saturday</strong></h3>
                    <h3><strong>11 a.m. - 9 p.m.</strong></h3>
                </section>
            
                <div class='headline'>
                    <h1>Title</h1>
                    <h2>Menu</h2>
                </div>
                
                <section class='address'>
                    <h3> <strong>NAME</strong> </h3>
                    <h4>Phone</h4>
                    <h4>Address</h4>
                    <h4>City</h4>
                </section>
                </div>
              </div>
              {% endfor %}
              {% endwith %}```

Попробуйте передать список из бэкенда следующим образом -

Views.py Функция, из которой вы выводите свой шаблон

def index(request): # Change the name of the function as per your requirements
    context = {
        "images": ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg']     
    }
    return render(request, "index.html", context) # Change the path of the template as per your requirements

Теперь images - переменная со значением списка, содержащего пути различных изображений, которые вы можете использовать в своем шаблоне

Теперь ваш .html файл будет выглядеть следующим образом -

            <div class="carousel-inner">
              {% for image in images %}
              <div class="carousel-item active" data-bs-interval="10000" style="background-image:url({%static {image}%})">
                <div class='container'>
                  <section class='time'>
                    <h3><strong>HOURS</strong></h3>
                    <h3><strong>Monday - Saturday</strong></h3>
                    <h3><strong>11 a.m. - 9 p.m.</strong></h3>
                </section>
            
                <div class='headline'>
                    <h1>Title</h1>
                    <h2>Menu</h2>
                </div>
                
                <section class='address'>
                    <h3> <strong>NAME</strong> </h3>
                    <h4>Phone</h4>
                    <h4>Address</h4>
                    <h4>City</h4>
                </section>
                </div>
              </div>
              {% endfor %}
              </div>

Передайте изображения как контекст из вашего представления

def your_view(request):
   images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg']
   return render(request, "your-file.html", {images: images})

Теперь в вашем HTML у вас будет доступ к вашему списку, так что вы можете сделать что-то вроде этого:

<div class="carousel-inner">
              {% for image in images %}
              <div class="carousel-item active" data-bs-interval="10000" style="background-image:url({% static image %})">
                <div class='container'>
                  <section class='time'>
                    <h3><strong>HOURS</strong></h3>
                    <h3><strong>Monday - Saturday</strong></h3>
                    <h3><strong>11 a.m. - 9 p.m.</strong></h3>
                </section>
            
                <div class='headline'>
                    <h1>Title</h1>
                    <h2>Menu</h2>
                </div>
                
                <section class='address'>
                    <h3> <strong>NAME</strong> </h3>
                    <h4>Phone</h4>
                    <h4>Address</h4>
                    <h4>City</h4>
                </section>
                </div>
              </div>
              {% endfor %}
Вернуться на верх