As mentioned in the title. Is it possible to display a specific number of photos in a particular grid-container? For example, a maximum of 3 columns with a card in the row using a loop? I was able to achieve the effect of displaying all the photos from the defined model,but I don't know how to set the limit.
Below I present fragments of the code responsible for displaying the created model
forms.py
class ProductsForm(forms.ModelForm):
class Meta:
model = Product
fields = ('name', 'description', 'image', 'file_type')
models.py
class Product(models.Model):
name = models.CharField(max_length=20, default='')
description = models.CharField(max_length=100, default='')
file_type = models.CharField(max_length=256, choices=[('image', 'image'), ('thumbnail', 'thumbnail')], default='')
image = models.ImageField(upload_to='products', default='')
def __str__(self):
return self.name
views.py
def gallery(request):
image = Product.objects.filter(file_type='image')
thumbnail = Product.objects.filter(file_type='thumbnail')
return render(request, 'products/fruits.html', {'img': image, 'thumb': thumbnail})
fruits.html
<!DOCTYPE html>
{% load staticfiles %}
{% load thumbnail %}
{% block body_block %}
<div class="grid-container">
<div class="card-deck">
{% for i in thumb %}
{% thumbnail i.image "150x150" crop="center" as im %}
<!-- Card -->
<div class="card mb-4">
<!--Card image-->
<div class="view overlay">
<img src="{{ im.url }}"
alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up
the
bulk
of
the
card's
content.</p>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-light-blue btn-md">Read more</button>
</div>
</div>
{% endthumbnail %}
{% endfor %}
</div>
</div>
{% endblock %}
The build-in Django filter divisibleby may work, inside your loop, you check whether the iteration is divisible by (in your case) 3, then you break the row to jump to another one:
{% for i in thumb %}
{% if forloop.counter|divisibleby:3 %}
----------
{% endif %}
{% endfor %}