Фокусные точки

Фокусные точки используются для указания области изображения, содержащей объект. Это используется фильтром fill для фокусировки обрезки на объекте и предотвращения обрезки объекта.

Фокусные точки могут быть определены вручную пользователем Wagtail или автоматически с помощью распознавания лиц или объектов.

Установление background-position inline-стиля на основе фокусной точки

При использовании изображения Wagtail в качестве фона элемента, вы можете использовать атрибут .background_position_style на представлении для позиционирования представления на основе фокусной точки на изображении:

{% image page.image width-1024 as image %}

<div style="background-image: url('{{ image.url }}'); {{ image.background_position_style }}">
</div>

Доступ к фокусной точке в шаблонах

Вы можете получить доступ к фокусной точке в шаблоне, обратившись к атрибуту .focal_point представления:

{% load wagtailimages %}

{% image myimage width-800 as myrendition %}

<img
    src="{{ myrendition.url }}"
    alt="{{ myimage.title }}"
    {% if myrendition.focal_point %}
        data-focus-x="{{ myrendition.focal_point.centroid.x }}"
        data-focus-y="{{ myrendition.focal_point.centroid.y }}"
        data-focus-width="{{ myrendition.focal_point.width }}"
        data-focus-height="{{ myrendition.focal_point.height }}"
    {% endif %}
/>