워드프레스 중간 및 최대 크기 기본 이미지 사이즈 크롭 설정

워드프레스에서 이미지를 올리면 기본 지정 이미지 사이즈 설정에 따라 여러 이미지가 생성되며, 생성하는 이미지를 자르는(크롭, crop) 방식은 이미지 가운데 위치를 기본으로 ‘가로와 세로 같은 값의 정사각형(하드 크롭)‘이나 긴 축 우선의 지정한 최대값 기준 ‘비율 자르기(소프트 크롭)‘입니다.

기본 이미지 사이즈 명칭

기본 이미지 사이즈를 함수를 사용하여 확인하면 다음과 같고, medium_large 사이즈는 관리페이지에 나오지 않는 사이즈이며, post-thumbnail 사이즈는 테마 개발자가 포스트 섬네일(Featured Image)을 사용(편집 화면의 메타박스)하도록 정의하였기에 나오는 기본 이미지 사이즈 명칭입니다. 보통의 테마는 포스트 섬네일을 사용하도록 정의합니다.

// echo '<pre>' . print_r( get_intermediate_image_sizes(), true ) . '</pre>';

Array
(
    [0] => thumbnail
    [1] => medium
    [2] => medium_large
    [3] => large
    [4] => post-thumbnail
)

기본 이미지 사이즈 값과 자르기 설정

앞의 그림처럼 이미지 자르기 크기와 방법을 지정했고, 2016(twentysixteen) 테마를 사용한다고 가정할 때 각 이미지 사이즈별 정보를 조금 더 세부적으로 확인하면 다음과 같습니다. (아래 결과는 워드프레스 기본 이미지 사이즈 부분을 참고하여 얻을 수 있습니다.)

Array
(
    [thumbnail] => Array
        (
            [width] => 150
            [height] => 150
            [crop] => 1
        )

    [medium] => Array
        (
            [width] => 500
            [height] => 500
            [crop] => 
        )

    [medium_large] => Array
        (
            [width] => 768
            [height] => 0
            [crop] => 
        )

    [large] => Array
        (
            [width] => 1024
            [height] => 1024
            [crop] => 
        )

    [post-thumbnail] => Array
        (
            [width] => 1200
            [height] => 9999
            [crop] => 
        )

)

앞의 결과를 보면 thumbnail 사이즈에만 자르기(crop) 1로 설정되어 있는데, 가로와 세로를 지정한 크기(150px)로 정확하게 자른다는 뜻입니다. 나머지 이미지 사이즈는 가로와 크기 값만 지정되어 있으며, 자르기 설정에는 값이 없습니다.

또, thumbnail 이미지 사이즈를 잘라 생성할 때는 이미지의 가운데를 중심으로 지정한 크기로 자른다는 것으로 다음 코드와 같습니다.

// 이미지 가운데 위치 기준으로 지정한 크기로 자르기
add_image_size( 'thumbnail', 150, 150, true );
add_image_size( 'thumbnail', 150, 150, array( 'center', 'center') );

나머지 이미지 사이즈에서 가로와 세로에 0, 9999 값이 없다면 원본 이미지의 긴 축을 기준으로 같은 비율로 자른다는 뜻입니다. 0, 9999 값이 있다면 그 축은 제한을 두지 않는다는 것이며, 모두 0이면 그 이미지 사이즈의 이미지는 생성되지 않습니다.

정확하게 자르기 설정이 없는 이미지 사이즈의 자르기 설정 변경

thumbnail 이미지 사이즈처럼 원본 이미지 가운데를 중심으로 이미지를 잘라내기 위해서는 crop 값에 ‘1’을 추가하면 되지만, thumbnail 이미지 사이즈 설정과 다르게 나머지 이미지 사이즈 자르기 설정은 데이터베이스에 저장되지 않습니다.

따라서 같은 이미지 사이즈 명칭을 코드에 추가하여 정확하게 자르기 설정을 적용할 수 있으며 원하는 이미지 사이즈만 정의하면 됩니다.

add_image_size( 'medium', 500, 500, true );
add_image_size( 'large', 1024, 1024, true );

자르기 설정 값은 thumbnail 이미지 사이즈 외에 데이터베이스에 저장되지 않지만, 가로와 세로의 이미지 사이즈 값은 저장됩니다. 따라서 위의 코드에서 가로와 세로 값을 옵션 함수로 변경하면 동적으로 구성할 수 있습니다.

add_image_size('medium', get_option( 'medium_size_w' ), get_option( 'medium_size_h' ), true );
add_image_size('medium', get_option( 'large_size_w' ), get_option( 'large_size_h' ), true );

많은 요소가 그렇지만, 워드프레스에서 이미지 사이즈 생성에 관한 내용의 이해는 여러 이미지 사이즈를 준비하고, 이미지 자르기 및 크기 설정을 변경하여 직접 경험해야 합니다.