Iterable list in Django HTML?-CodePudding

I want to use bootstrap to make a carousel using D.R.Y. methods. my idea (and it may not even be feasible) is to have a list or dictionary and cycle through image locations. Here's what I've written so far.

            <div >
              {% with images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg'] %}
              {% for image in images %}
              <div  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 %}```

CodePudding user response：

Try passing the list from the backend like this -

Views.py The function from where you are rendering your template

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

Now images is a variable with the value of a list containing path of different images which you can use in your template

Now your .html file will look like this -

            <div >
              {% for image in images %}
              <div  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>

CodePudding user response：

Pass the images as context from your view

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

Now in your HTML you will have access to your list, so you can do something like so:

<div >
              {% for image in images %}
              <div  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 %}