Миниатюры в Django при помощи easy-thumbnail

Категория: Разработка Теги: Веб-разработка Опубликовано: 19 июня 2022 г. 14:53
Установка и настройка easy-thumbnail в Django
Установка и настройка easy-thumbnail в Django

Сегодня я расскажу как установить и настроить в Django библиотеку для создания миниатюр easy-thumbnail, которая поможет сжать динамические картинки на веб-странице.

Скорость загрузки веб-страницы самый важный параметр, так как при скорости загрузки от 3 секунд и выше пользователь скорее всего закроет сайт не дожидаясь окончания загрузки. И так как у нас всех сегодня есть там или иная метрика, будь то яндекс метрика или гугл аналитикс, то выходит, что поисковые системы могут отслеживать такие посещения, начиная от перехода из поиска и заканчивая временем просмотра страницы 0,03 минуты. Такой показатель сигнализирует отказ и при высоком показателе отказов ваша страница понижается в поиске. Иными словами, это самый важный поведенческий фактор ранжирования.

Чаще всего большую часть веса занимают картинки, и если статические ресурсы можно один раз пережать вручную и изменить размер под отображаемый на веб-странице. Однако, как быть если у вас большой каталог товаров и требуется наличие превьюшек, то есть чтобы человек мог нажать на миниатюру картинки и увидеть полноразмерное изображение. Если тут пережать, то полноразмерный режим пострадает, создавать вручную через теги picture и img две версии изображения это долго и муторно. Представьте, 1500 материалов и каждый нужно пережать под два размера. Решением данной проблемы в Django можно назвать библиотеку easy-thumbnail.

Для начала нужно установить библиотеку easy-thumbnail командой:

pip install easy_thumbnail

Далее открываем settings.py и добавляем в блок INSTALLED_APPS элемент:

'easy_thumbnails',

Далее в конце settings.py добавляем настройки для easy-thumbnail:

THUMBNAIL_ALIASES = {
    '': {
        'my_preview_1': {'size': (250, 180), 'crop': 'smart'},
        'my_preview_2': {'size': (500, 0), 'crop': 'smart'},
        'my_preview_3': {'size': (75, 0), 'crop': 'smart'},
    },
}

Где my_preview это варианты обрезки картинки. Напишите свои варианты с подходящими для вас размерами. Если вторую цифру поставить 0, тогда по вертикали обрезаться картинка не будет.

Сохраняем изменения и открываем косноль, в которой пишем команду:

python manage.py migrate

easy-thumbnail создаст служебные таблицы в базе данных. Картинки будут хранится в папке media, а в базе данных будут храниться ссылочки на них.

Теперь нужно отредактировать шаблоны из папки templates. Откройте шаблон с динамическими картинками, который необходимо отредактировать. В начало html файла нужно добавить:

{% load thumbnail %}

Далее в этом же файле нужно отредактировать блок с картинками. Например, было:

<img src="{{ obj.photo' }}" alt="{{ obj.title }}" 
title="{{ obj.title }}" class="img-fluid" 
width="250" height="180">

Нужно добавить в источник фото thumbnail_url:'my_preview_1', теперь стало:

<img src="{{ obj.photo|thumbnail_url:'my_preview_1' }}" 
alt="{{ obj.title }}" title="{{ obj.title }}" class="img-fluid"
width="250" height="180">

Также могу предложить конструкцию для страницы материалов:

{% if obj.photo %}

<div align="center">

<a href="{{ obj.photo.url }}" data-lightbox="image-1" 
data-title="{{ obj.photo_title }}">
 
<picture srcset="{{ obj.photo.url }}">

<img src="{{ obj.photo|thumbnail_url:'my_preview_2' }}" 
alt="{{ obj.photo_title }}" title="{{ obj.photo_title }}" 
width="500" class="img-fluid">

</picture>

</a>
</div>
{% endif %}

Обратите внимание на data-lightbox="image-1" - это сигнал для превью, но для его работы нужно добавить в блок head lightbox.css и lightbox.js в конце документа. Иначе превью работать не буду. Описывать как сделать превью не буду, так как статья не про это.

Теперь нужно пояснить, хотя в случае с Python\Django всё из кода само по себе становится понятно, но все же.

Строкой {% if obj.photo %} мы проверяем наличие фотографии в данном объекте, и не забывайте про {% endif %} в конце условия.

<div align="center"> нужен просто для того, чтобы изображение отображалось по середине холста.

Обратите внимание, что в теге a и picture источником указывается {{ obj.photo.url }}, а в теге img указывается уже {{ obj.photo }}, то есть в thumbnail нужно передать объект, а не ссылку на картинку. Если в easy-thumbnail передать {{ obj.photo.url }}, тогда возникнет ошибка.

Правильное написание для библиотеки миниатюр источника в теге img такое src="{{ obj.photo|thumbnail_url:'my_preview_2' }}" . В thumbnail_url мы передаём профиль сжатия из настроек.

Похожие материалы:


Код функции-контроллера с декоратором
Разрешить только определенные HTTP запросы при помощи require_http_methods в Django
Автор: Алексей Черемных3 января 2021

В Django существует довольно простой способ разрешить только определенные типы HTTP запросов при помощи декоратора представлений require_http_methods.

Для этого необходимо во …

Форма заявки (пример)
Django автоматическое заполнение поля в модели при её создании
Автор: Алексей Черемных10 января 2021

Появилась необходимость заполнить поле с номером заявки до формирования формы, связанной с моделью, но как это сделать? В интернете много способов, …

Код функции
Простой способ в Django блокировать конкретные IP на всем сайте
Автор: Алексей Черемных3 января 2021

На любом сайте приходится блокировать определенные IP адреса. Если таковых нет, это значит только одно - что этим сайтом никто не …

VisualSEOStudio
Бесплатная программа для создания карты сайта
Автор: Алексей Черемных30 ноября 2020

Сегодня не так много бесплатных программ для создания карты сайта. Пара штук, и те работают как не очень. О переводе …

Код
Способ передать варианты выбора choices в forms.ChoiceField из views.py
Автор: Алексей Черемных21 июня 2021

Недавно сам столкнулся с проблемой передачи вариантов выбора для поля формы с типом виджета Radio и типом формы forms.ChoiceField из views.py. Зачем, …

Прогон по каталогам
Есть ли эффект от прогонов по каталогам?
Автор: Алексей Черемных28 ноября 2020

Уже давно разного рода сео специалисты спорят о пользе от прогона по каталогам. Под прогоном имеется в виду рассылка объявлений, …

Все теги:

Подписка на рассылку свежих статей