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

Сегодня я расскажу как установить и настроить в 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 мы передаём профиль сжатия из настроек.