Ключевые точки
Ключевые точки используются для указания Wagtail области изображения, содержащей объект. Это используется фильтром fill для фокусировки обрезки на объекте и предотвращения обрезки объекта.
Ключевые точки могут быть определены вручную пользователем Wagtail или автоматически с помощью распознавания лиц или объектов.
Настройка background-position встроенного стиля на основе ключевой точки
При использовании изображения 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 %}
/>
© 2014-present Torchbox Ltd and individual contributors.
All rights are reserved.
Licensed under the BSD License.
https://docs.wagtail.org/en/stable/advanced_topics/images/focal_points.html
