Создание миниатюр изображений с помощью sorl-thumbnail

На странице отображается исходное изображение, но размеры для разных изображений могут различаться. Кроме того, исходные файлы для некоторых изображений могут быть огромными, и загрузка их может занять слишком много времени. Лучшим способом отображения оптимизированных изображений в единообразном виде является создание миниатюр. Для этой цели мы собираемся использовать приложение Джанго под названием sorl-thumbnail.

Откройте терминал и установите sorl-thumbnail с помощью следующей команды:

pip install sorl-thumbnail==12.3

Отредактируйте файл settings.py проекта bookmarks и добавьте sorl.thumbnail в настройки INSTALLED_APPS.

Затем выполните следующую команду для синхронизации приложения с базой данных:

python manage.py migrate

Вы должны увидеть вывод, который включает в себя следующую строку:

Creating table thumbnail_kvstore

Приложение sorl-thumbnail предлагает различные способы определения миниатюр изображений. Приложение предоставляет тег шаблона {% thumbnail %} для создания эскизов в шаблонах и кастомного ImageField, если требуется определить миниатюры в моделях. Мы будем использовать тег шаблона. Отредактируйте шаблон images/image/detail.html и замените строку:

<img src="{{ image.image.url }}" class="image-detail">

на:

{% load thumbnail %}
{% thumbnail image.image "300" as im %}
    <a href="{{ image.image.url }}">
        <img src="{{ im.url }}" class="image-detail">
    </a>
{% endthumbnail %}

Здесь мы определим миниатюру с фиксированной шириной 300 пикселов. При первой загрузке пользователем этой страницы будет создана миниатюра. Запустите сервер разработки с помощью команды:

python manage.py runserver

И пройдите к странице сведений о изображении для существующего изображения. Миниатюра будет создана и отображена на сайте.

Приложение sorl-thumbnail предлагает несколько вариантов настройки миниатюр, включая алгоритмы кадрирования. При наличии затруднений при создании миниатюр можно добавить в параметры THUMBNAIL_DEBUG = True, чтобы получить отладочную информацию. Вы можете прочитать полную документацию о приложении sorl-thumbnail здесь: http://sorl-thumbnail.readthedocs.org/