템플릿에서 이미지 사용하는 방법¶

max¶

(두 차원 사용)

{% image page.photo max-1000x500 %}

주어진 치수 내에 맞춥니다.

가장 긴 가장자리는 지정된 일치하는 치수로 줄어듭니다. 예를 들어, 너비 1000, 높이 2000의 세로 이미지를 max-1000x500 규칙(가로 레이아웃)으로 처리하면 이미지가 _높이_가 500픽셀이고 너비가 250픽셀이 되도록 축소됩니다.

예시: 이미지는 비율을 유지하지만 제공된 최대(녹색 선) 치수 내에 맞춥니다.

min¶

(두 차원 사용)

{% image page.photo min-500x200 %}

주어진 치수를 덮습니다.

이로 인해 지정한 치수보다 약간 큰 이미지가 생성될 수 있습니다. 너비 2000, 높이 2000의 정사각형 이미지를 min-500x200 규칙으로 처리하면 높이와 너비가 500으로 변경됩니다. 즉, 크기 조정 규칙의 _너비_와 일치하지만 높이보다 큽니다.

예시: 이미지는 비율을 유지하면서 제공된 최소(녹색 선) 치수 이상을 채웁니다.

width¶

(한 차원 사용)

{% image page.photo width-640 %}

이미지의 너비를 지정된 치수로 줄입니다.

height¶

(한 차원 사용)

{% image page.photo height-480 %}

이미지의 높이를 지정된 치수로 줄입니다.

scale¶

(백분율 사용)

{% image page.photo scale-50 %}

이미지 크기를 지정된 백분율로 조정합니다.

fill¶

(두 차원 및 선택적 -c 매개변수 사용)

{% image page.photo fill-200x200 %}

지정된 정확한 치수를 채우도록 크기를 조정하고 자릅니다.

이는 임의의 이미지의 정사각형 썸네일이 필요한 웹사이트에 특히 유용할 수 있습니다. 예를 들어, 너비 2000, 높이 1000의 가로 이미지를 fill-200x200 규칙으로 처리하면 높이가 200으로 줄어들고, 너비(일반적으로 400)는 200으로 잘립니다.

이 크기 조정 규칙은 이미지의 초점(설정된 경우)으로 자릅니다. 설정되지 않은 경우 이미지 중앙으로 자릅니다.

예시: 이미지는 크기가 조정되고 제공된 치수 내에서 가능한 한 많은 이미지를 맞추기 위해 잘립니다(빨간색 선).

확대되지 않는 이미지의 경우

이미지가 확대 없이 지원할 수 없는 fill 치수로 이미지를 요청할 수 있습니다. 예를 들어 너비 400, 높이 200의 이미지를 fill-400x400 으로 요청하는 경우입니다. 이 상황에서는 _요청된 채우기의 비율_이 일치하지만 치수는 일치하지 않습니다. 따라서 예시 400x200 이미지(2:1 비율)는 200x200(1:1 비율, 크기 조정 규칙과 일치)이 될 수 있습니다.

초점에 더 가깝게 자르기

기본적으로 Wagtail은 이미지의 가로 세로 비율을 크기 조정 규칙의 비율과 일치시키기 위해 충분히 자릅니다.

일부 경우(예: 썸네일)에는 이미지의 주제가 더 두드러지도록 초점에 더 가깝게 자르는 것이 바람직할 수 있습니다.

크기 조정 규칙 끝에 -c<percentage> 를 추가하여 이를 수행할 수 있습니다. 예를 들어, 이미지가 초점에 가능한 한 가깝게 잘리도록 하려면 -c100 을 추가합니다.

{% image page.photo fill-200x200-c100 %}

이렇게 하면 이미지가 초점을 자르지 않고 최대한 많이 잘립니다.

-c100 이 너무 가깝다고 생각되면 -c75 또는 -c50 을 시도할 수 있습니다. 0에서 100까지의 모든 정수가 허용됩니다.

예시: 초점이 중앙에서 벗어나 설정되어 이미지가 채우기처럼 크기가 조정되고 잘리지만, 자르기 중앙 지점은 초점에 더 가깝게 배치됩니다.

예시: -c75 가 설정되면 최종 자르기는 초점에 더 가깝게 됩니다.

original¶

(치수 없음)

{% image page.photo original %}

이미지를 원본 크기로 렌더링합니다.

1. {% image %} 태그에 속성 추가¶

추가 속성은 attribute="value" 구문으로 지정할 수 있습니다.

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

이미지 제목에서 자동으로 생성된 alt 속성을 재정의하여 더 관련성 있는 alt 속성을 설정할 수 있습니다. 필요한 경우 src, width, height 속성도 재정의할 수 있습니다.

모든 이미지에 기본 속성(예: 기본 클래스 또는 데이터 속성)을 추가할 수도 있습니다. 모든 이미지에 기본 속성 추가를 참조하십시오.

2. 개별 속성에 액세스하기 위해 이미지를 “as foo”로 생성¶

Wagtail은 Django의 as 구문을 사용하여 이미지 데이터를 다른 변수에 할당하여 기본 이미지 렌디션(tmp_photo)에 액세스할 수 있습니다.

{% 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" />

srcset_image 태그를 사용하여 여러 크기 렌디션을 검색할 수도 있습니다.

{% srcset_image page.photo width-{200,400} as tmp_photo %}

<img
    src="{{ tmp_photo.renditions.0.url }}"
    width="{{ tmp_photo.renditions.0.width }}"
    height="{{ tmp_photo.renditions.0.height }}"
    alt="{{ tmp_photo.renditions.0.alt }}"
    srcset="{{ tmp_photo.renditions.0.url }} 200w, {{ tmp_photo.renditions.1.url }} 400w"
    sizes="100vw"
    class="my-custom-class"
/>

그리고 그림 태그로 여러 형식을 검색할 수 있습니다.

{% picture page.photo format-{avif,jpeg} as tmp_photo %}

{{ tmp_photo.formats.avif.0.url }}
{{ tmp_photo.formats.jpeg.0.url }}

렌디션에는 크기 조정 규칙, 치수 및 소스 URL을 사용하여 이미지를 형식화하도록 요청한 방식에 특정한 정보가 포함됩니다. 다음 속성을 사용할 수 있습니다.

url¶

이미지의 크기 조정된 버전 URL입니다. 정적 파일이 구성된 방식에 따라 로컬 URL(예: /static/images/example.jpg) 또는 전체 URL(예: https://assets.example.com/images/example.jpg)일 수 있습니다.

width¶

크기 조정 후 이미지 너비.

height¶

크기 조정 후 이미지 높이.

alt¶

이미지에 대한 대체 텍스트, 상황별 대체 텍스트 또는 default_alt_text (없는 경우).

attrs¶

src, width, height, alt 속성을 한 번에 출력하기 위한 약어:

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

full_url¶

url 과 동일하지만 항상 전체 절대 URL을 반환합니다. 이를 위해서는 프로젝트 설정에 WAGTAILADMIN_BASE_URL 이 설정되어 있어야 합니다.

이는 소셜 공유 이미지와 같이 현재 사이트 외부에서 재사용될 이미지에 유용합니다.

<meta name="og:image" content="{{ tmp_photo.full_url }}">

사이트가 AbstractImage 를 사용하여 사용자 지정 이미지 모델을 정의하는 경우 이미지에 추가하는 모든 필드(예: 저작권자)는 렌디션에 포함되지 않습니다.

따라서 위 예시에서 AbstractImage에 author 필드를 추가했다면 {{ tmp_photo.author }} 대신 {{ page.photo.author }} 를 사용하여 액세스할 수 있습니다.

(렌디션과 부모 이미지 간의 데이터베이스 링크 때문에 {{ tmp_photo.image.author }} 로 액세스할 수 있지만 가독성이 떨어집니다.)

Full width¶

width-800 을 사용하여 이미지 렌디션을 생성하고 <img> 태그에 full-width CSS 클래스를 부여합니다.

Left-aligned¶

width-500 을 사용하여 이미지 렌디션을 생성하고 <img> 태그에 left CSS 클래스를 부여합니다.

Right-aligned¶

width-500 을 사용하여 이미지 렌디션을 생성하고 <img> 태그에 right CSS 클래스를 부여합니다.

자신만의 이미지 형식을 포함하여 이미지 형식에 대한 자세한 내용은 서식 있는 텍스트 편집기의 이미지 형식를 참조하십시오.

무손실 AVIF 및 WebP¶

format-avif-lossless 또는 format-webp-lossless 필터를 사용하여 이미지를 무손실 AVIF 또는 WebP 형식으로 인코딩할 수 있습니다.

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

파비콘 생성¶

format-ico 를 사용하여 이미지를 .ico 파일로 저장할 수 있습니다. 이는 관리자를 통해 사이트의 파비콘을 관리할 때 특히 유용합니다.

{% image favicon_image format-ico as favicon_image_formatted %}
<link rel="icon" type="image/x-icon" href="{{ favicon_image_formatted.url }}"/>

전역적으로 변경¶

WAGTAILIMAGES_AVIF_QUALITY, WAGTAILIMAGES_JPEG_QUALITY 및 WAGTAILIMAGES_WEBP_QUALITY 설정을 사용하여 AVIF, JPEG 및 WebP 품질의 전역 기본값을 변경합니다.

# settings.py

# 저품질이지만 작은 이미지 만들기
WAGTAILIMAGES_AVIF_QUALITY = 50
WAGTAILIMAGES_JPEG_QUALITY = 40
WAGTAILIMAGES_WEBP_QUALITY = 45

이는 이전에 생성된 이미지에는 영향을 미치지 않으므로 새 설정으로 다시 생성할 수 있도록 모든 렌디션을 삭제해야 할 수 있습니다. 이는 Django 셸에서 수행할 수 있습니다.

# 사용자 지정 렌디션 모델을 사용하는 경우 이것을 사용자 지정 렌디션 모델로 바꿉니다.
>>> from wagtail.images.models import Rendition
>>> Rendition.objects.all().delete()

렌디션을 다시 생성하기 위해 콘솔에서 이미지 관리 명령을 직접 사용할 수도 있습니다.

./manage.py wagtail_update_image_renditions --purge

이 명령에 대한 자세한 내용은 wagtail_update_image_renditions에서 읽을 수 있습니다.

태그별로 변경¶

avifquality, jpegquality 및 webpquality 필터를 사용하여 개별 태그에 다른 AVIF, JPEG 및 WebP 품질을 가질 수도 있습니다. 이는 항상 기본 설정을 재정의합니다.

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

이는 PNG 또는 GIF 파일에는 영향을 미치지 않습니다. 모든 이미지를 저품질로 만들려면 format-avif, format-jpeg 또는 format-webp 와 함께 이 필터를 사용할 수 있습니다(모든 이미지를 AVIF, JPEG 또는 WebP 형식으로 출력하도록 강제함).

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

보안 고려 사항¶

Wagtail의 기본 이미지 라이브러리인 Willow는 의심스러운 파일을 거부하여 알려진 XML 파서 익스플로잇(예: billion laughs, quadratic blowup)을 완화하도록 구성되어 있습니다.

image 태그를 통해 템플릿에 SVG 이미지를 포함할 때 HTML img 요소로 렌더링됩니다. 이 경우 SVG의 script 요소는 실행되지 않아 XSS 공격을 완화합니다.

사용자가 SVG 파일의 URL로 직접 이동하면 서버/저장소 구성에 따라 포함된 스크립트가 실행될 수 있습니다. 이는 SVG 응답에 적절한 Content-Security-Policy 또는 Content-Disposition 헤더를 설정하여 완화할 수 있습니다.

• Content-Security-Policy: default-src 'none' 을 설정하면 스크립트가 로드되거나 실행되는 것을 방지합니다(다른 리소스도 마찬가지입니다. script-src 'none' 과 같은 더 완화된 정책도 적합할 수 있습니다). 그리고

• Content-Disposition: attachment 를 설정하면 파일이 브라우저에서 즉시 렌더링되는 대신 다운로드되므로 스크립트가 실행되지 않습니다(참고: 사용자가 SVG 파일을 다운로드한 후 브라우저에서 열면 스크립트가 실행되는 것을 막지는 않습니다).

특정 응답에 대한 헤더를 설정하는 데 필요한 단계는 Wagtail 애플리케이션이 배포되는 방식에 따라 다릅니다. 내장 동적 이미지 제공 뷰의 경우 Content-Security-Policy 헤더가 자동으로 설정됩니다.