Django отображает ограниченные изображения в строке сетки - PullRequest
0 голосов
/ 24 мая 2018

Как указано в названии. Можно ли отобразить определенное количество фотографий в определенном контейнере-сетке? Например, максимум 3 столбца с картой в строке с использованием цикла?Мне удалось добиться эффекта отображения всех фотографий с определенной модели, , но я не знаю, как установить предел .

Ниже я представляюфрагменты кода, отвечающие за отображение созданной модели

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

1 Ответ

0 голосов
/ 24 мая 2018

Встроенный фильтр Django divisibleby может работать, внутри вашего цикла вы проверяете, делится ли итерация на (в вашем случае) 3, затем разбиваете строку, чтобы перейти к другой:

{% for i in thumb %}
    {% if forloop.counter|divisibleby:3 %}
         ----------
    {% endif %}
{% endfor %}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...