Мобильная версияЯ пытаюсь создать ленту новостей. По идее, пользователь может прикрепить к посту до 10 изображений. В зависимости от количества изображений я хочу расположить их в несколько рядов с заполнением всего блока.
Вот примеры структуры изображений одного поста.
Правила размещения следующие: [*]Картинки расположены в несколько строк. Количество строк и количество изображений в строке зависит от приведенного выше шаблона. [*]Изображения заполняют максимальную ширину блока. Их высота меняется для сохранения пропорций и должна быть одинаковой для всех изображений подряд. [*]Добавление небольших равных промежутков между изображениями приветствуется. [*]Поскольку высота строк может меняться, высота родительского блока не ограничена. [*]Я использую динамическое добавление изображений сообщений в шаблон. Задавать размеры каждого элемента — плохое решение. [*]Хотелось бы обойтись без js. Обновлено:
Сейчас я делаю так: формирую ряды изображений на стороне модели данных и возвращаю объекты строк в шаблон. Мне это кажется плохим решением, так как отображение не должно настраиваться в бэкенд части сайта. Я использую следующий код:
из моделей импорта django.db из django.core.files.images импортируйте get_image_dimensions из userprofile.models импортировать профиль класс Feed(models.Model): pub_date = models.DateTimeField('опубликовано') текст = модели.TextField() автор = модели.ForeignKey(Профиль, on_delete=models.CASCADE) защита __str__(сам): return str(self.pub_date) + ' ' + self.text @свойство защита image_rows (сам): если self.images.count() == 0: возврат Нет image_rows_grouping_template = [ [1], [2], [1, 2], [2, 2], [2, 3], [2, 4], [3, 4], [3, 3, 3], [3, 3, 4] ] image_rows_template = image_rows_grouping_template[self.images.count()-2] rows = [ {'images': []} for i in range(len(image_rows_template))] # Группировка изображений в ряды для изображения в self.images.all(): для i, строка в перечислении (image_rows_template): если строка > 0: rows['images'].append(изображение) image_rows_template -= 1 перерыв # Вычисление соотношения ширины и высоты строки для строки в строках: соотношение = 0 для изображения в строке['images']: ширина, высота = get_image_dimensions(image.image.file) соотношение += ширина/высота row['ratio'] = соотношение возврат строк класс FeedImage(models.Model): изображение = модели.ImageField(upload_to='feeds-images') канал = модели.ForeignKey(Feed, on_delete=models.CASCADE, linked_name='images') Контекст собирается следующим образом:
#views.py из django.views.generic.list импортировать ListView из Feeds.models импортировать фид класс FeedsListView(ListView): модель = Фид paginate_by = 100 имя_шаблона = 'home/index.html' context_object_name = 'каналы' защита get_context_data(self, **kwargs): контекст = super().get_context_data(**kwargs) вернуть контекст Если разделение изображений на термины является хорошим решением, предоставьте дополнительный пример такого формирования строк.
Последнее, что я пробовал, — размещать изображения с помощью flex-wrap: Wrap. У меня очень плохие навыки верстки, поэтому я не знал, что картинки будут вставлены с оригинальными размерами. Теперь эта часть шаблона выглядит так:
{% для строки в файлеfeed.image_rows%} {% для изображения в row.images %}
{% конец для %} {% конец для %} .feed-images{ ширина: 100%; размер шрифта: 0; переполнение: скрыто; } .feed-image-row{ ширина: 100%; дисплей: встроенный гибкий; поле-дно: 0; } .feed-image-row > img{ высота: 100%; соответствие объекта: содержать; } Сводка Теперь работает корректно, но хотелось бы добавить расстояние между картинками и рядами картинок, и тогда расчет соотношения будет неверным. Хотелось бы отказаться от расчета соотношения в модели, и сделать раскладку изображений с динамической равной шириной в ряд. Если есть возможность - отказаться от распределения изображений по линиям в части модели.
Буду благодарен за любые идеи!
