'Django Template Multi Image Carousel
I'm trying to create a Carousel that shows multiple pictures of a single cat for a cattery project I'm doing. I'm trying to figure out the right template to make this work.
My Models
class Cat(models.Model):
name = models.CharField(max_length=32, null=True)
available = models.BooleanField()
main_image = models.ImageField(upload_to="images/")
age = models.CharField(max_length=64, null=True)
mix = models.CharField(max_length=128, null=True)
dob = models.CharField(max_length=16)
sex = models.CharField(max_length=16)
description = models.TextField(max_length=256, null=True)
def __str__(self):
return f"{self.name} : {self.sex} {self.age} || Available : {self.available}"
class Images(models.Model):
name = models.CharField(max_length=64, null=True)
image = models.ForeignKey(Cat, related_name='images', on_delete=models.CASCADE)
def __str__(self):
return self.name
My View
def available(request):
context = {}
return render(request, "cattery/available.html", {'available_kittens': Cat.objects.exclude(available=False).all()})
My HTML
{% for kitten in available_kittens %}
<div class="flexbox-item">
<img class="thumbnail" src="{{ kitten.images.url }}">
<h2> {{ kitten.name }} </h2>
<hr>
<h4> {{ kitten.sex }} </h4>
<h6> {{ kitten.dob }} </h6>
<p> {{ kitten.description}} </p>
</div>
{% endfor %}
My Assumption
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
{% for image in kitten.images.all() %}
<div class="carousel-item active">
<img class="d-block w-100" src="{{ image }}" alt="First slide">
</div>
{% endfor %}
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
How can I call the images related to each kitten with a django Template?
I know I could just include multiple image fields, but I've seen people suggest this method of creating a secondary class.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
