(image_focal_points)=

# 초점

초점은 Wagtail에 이미지의 주제가 포함된 영역을 나타내는 데 사용됩니다.
이는 `fill` 필터가 주제에 대한 자르기에 초점을 맞추고, 주제 안으로 자르지 않도록 하는 데 사용됩니다.

초점은 Wagtail 사용자가 수동으로 정의하거나, 얼굴 또는 특징 감지를 사용하여 자동으로 정의할 수 있습니다.

(rendition_background_position_style)=

## 초점을 기반으로 `background-position` 인라인 스타일 설정

Wagtail 이미지를 요소의 배경으로 사용할 때, 렌디션의 `.background_position_style` 속성을 사용하여 이미지의 초점을 기반으로 렌디션을 배치할 수 있습니다.

```html+django
{% image page.image width-1024 as image %}

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

## 템플릿에서 초점 액세스

렌디션의 `.focal_point` 속성에 액세스하여 템플릿에서 초점에 액세스할 수 있습니다.

```html+django
{% load wagtailimages_tags %}

{% image page.image 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 %}
/>
```