Как использовать изображения в шаблонах

Больше контроля над тегом img

Wagtail предоставляет два сокращения для предоставления большего контроля над элементом img:

1. Добавление атрибутов к тегу {% image %}

Дополнительные атрибуты могут быть указаны с синтаксисом attribute="value":

{% image page.photo width-400 class="foo" id="bar" %}

Вы можете установить более подходящий атрибут alt таким образом, переопределяя тот, который автоматически генерируется из названия изображения. Атрибуты src, width, и height также можно переопределить, если необходимо.

2. Генерирование изображения «как foo» для доступа к отдельным свойствам

Wagtail может назначить данные изображения другой переменной, используя синтаксис Django as:

{% image page.photo width-400 as tmp_photo %}

<img src="{{ tmp_photo.url }}" width="{{ tmp_photo.width }}"
    height="{{ tmp_photo.height }}" alt="{{ tmp_photo.alt }}" class="my-custom-class" />

Этот синтаксис предоставляет разработчику доступ к базовому отображению изображения (tmp_photo). «Отображение» содержит информацию, специфичную для способа форматирования изображения с использованием правила изменения размера, т. е. размеры и URL-адрес источника. Доступны следующие свойства:

Если на вашем сайте определена пользовательская модель изображения с помощью AbstractImage, любые дополнительные поля, которые вы добавите к изображению (например, правообладателя), не будут включены в отображение.

Следовательно, если вы добавили поле author в свой AbstractImage в приведенном выше примере, вы можете получить к нему доступ, используя {{ page.photo.author }}, а не {{ tmp_photo.author }}.

(Из-за связей в базе данных между отображениями и их родительским изображением вы можете получить к нему доступ как {{ tmp_photo.image.author }}, но это снижает читабельность.)

Сокращение attrs

Вы также можете использовать свойство attrs в качестве сокращения для вывода атрибутов src, width, height и alt в одном месте:

<img {{ tmp_photo.attrs }} class="my-custom-class" />

Альтернативные HTML-теги

Ключевое слово as позволяет использовать альтернативные HTML-теги изображений (такие как <picture> или <amp-img>). Например, чтобы использовать тег <picture>:

<picture>
    {% image page.photo width-800 as wide_photo %}
    <source srcset="{{ wide_photo.url }}" media="(min-width: 800px)">
    {% image page.photo width-400 %}
</picture>

И чтобы использовать тег <amp-img> (на основе примера с горами из документации AMP):

{% image image width-550 format-webp as webp_image %}
{% image image width-550 format-jpeg as jpeg_image %}

<amp-img alt="{{ image.alt }}"
    width="{{ webp_image.width }}"
    height="{{ webp_image.height }}"
    src="{{ webp_image.url }}">
    <amp-img alt="{{ image.alt }}"
        fallback
        width="{{ jpeg_image.width }}"
        height="{{ jpeg_image.height }}"
        src="{{ jpeg_image.url }}"></amp-img>
</amp-img>

Изображения, вставленные в rich text

Указанная выше информация относится к изображениям, определённым через поля, специфичные для изображений, в вашей модели. Однако изображения также могут быть произвольно вставлены в поля Rich Text редактором страницы (см. Rich Text (HTML)).

Изображения, вставленные в поля Rich Text, не могут быть легко контролированы разработчиком шаблона. Нет объектов изображений, с которыми можно было бы работать, поэтому тег шаблона {% image %} использовать нельзя. Вместо этого редакторы могут выбрать один из ряда «форматов» изображений в момент вставки изображений в текст.

Wagtail поставляется с тремя предопределёнными форматами изображений, но разработчик может определить больше форматов на Python. Эти форматы:

Дополнительную информацию о форматах изображений, включая создание собственных, см. в Форматы изображений в редакторе Rich Text

Формат вывода изображения

Wagtail может автоматически изменять формат некоторых изображений при изменении их размера:

• Изображения PNG и JPEG не меняют формат.
• GIF-изображения без анимации преобразуются в PNG.
• Изображения BMP преобразуются в PNG.
• Изображения WebP преобразуются в PNG.

Также можно переопределить формат вывода для каждого тега, используя фильтр format после правила изменения размера.

Например, чтобы всегда преобразовать изображение в JPEG, используйте format-jpeg:

{% image page.photo width-400 format-jpeg %}

Вы также можете использовать format-png или format-gif.

{% image page.photo width-400 format-webp-lossless %}

Цвет фона

Форматы изображений PNG и GIF поддерживают прозрачность, но если вы хотите преобразовать изображения в формат JPEG, прозрачность необходимо заменить твёрдым цветом фона.

По умолчанию Wagtail установит фон в белый цвет. Но если белый фон не подходит вашему дизайну, вы можете указать цвет с помощью фильтра bgcolor.

Этот фильтр принимает один аргумент, который представляет собой 3- или 6-значный шестнадцатеричный код CSS, представляющий цвет, который вы хотите использовать:

{# Sets the image background to black #}
{% image page.photo width-400 bgcolor-000 format-jpeg %}

Качество изображения

Настройки качества изображения JPEG и WebP Wagtail по умолчанию установлены на 85 (что довольно высоко). Это можно изменить глобально или на основе каждого тега.

# settings.py

# Make low-quality but small images
WAGTAILIMAGES_JPEG_QUALITY = 40
WAGTAILIMAGES_WEBP_QUALITY = 45

# Replace this with your custom rendition model if you use one
>>> from wagtail.images.models import Rendition
>>> Rendition.objects.all().delete()

$ ./manage.py wagtail_update_image_renditions --purge

{% image page.photo_jpeg width-400 jpegquality-40 %}
{% image page.photo_webp width-400 webpquality-50 %}

{% image page.photo width-400 format-jpeg jpegquality-40 %}
{% image page.photo width-400 format-webp webpquality-50 %}