워드프레스 이미지 사이즈

시리즈고품격 고품질 워드프레스 무료 사진 저장소연재중2

앞 장에서 올린 이미지는 4개였는데, 사이트 루트 wp-content/uploads 디렉터리를 보면 다음 그림처럼 16개의 이미지가 존재하는 것을 확인할 수 있습니다. 올린 이미지마다 원본 이미지를 제외하고, 3개가 추가로 생성된 것입니다. 다만, 원본 이미지 사이즈가 ‘768×576’이므로 ‘1024×1024’로 설정된 이미지 사이즈의 이미지는 생성되지 않았습니다. 모두 워드프레스 설정에 따른 것으로 워드프레스 사용자라면 누구나 아는 내용입니다. 이어서 워드프레스 이미지 사이즈에 관하여 일반적인 내용을 살펴봅니다.

설정에 의한 워드프레스 이미지 사이즈별 생성

이미지 사이즈 기본

워드프레스에서 이미지를 올릴 때 추가 생성하는 이미지의 특징은 이미지 파일명에 실제 이미지의 사이즈Size1가 추가된다는 것인데, 추가되는 이미지 사이즈는 관리페이지 미디어 설정에서 지정한 값 기준입니다.

다음으로 확인할 내용은 이미지 크롭Crop(자르기)인데, 앞의 그림 또는 uploads 디렉터리를 보면 ‘150×150’의 글자가 들어간 파일명을 볼 수 있습니다. 관리페이지 미디어 설정에서 다음의 옵션을 선택한 결과입니다.2

섬네일을 정확한 크기로 잘라냅니다. ( 일반적으로 섬네일은 원본에 비례해서 만들어집니다.)

주의할 내용은 가로(width)와 세로(height) 필드 모두에 값을 입력했다고, 그 사이즈의 이미지가 생성되는 것이 아니며, 크롭 옵션에 의해 지정한 사이즈의 이미지가 생성된다는 것 기억하세요. 우연으로 설정한 값과 같은 비율의 사이즈를 가진 이미지를 올리게 된다면, 그때는 말 그대로 우연입니다.

관리페이지 미디어 설정에서 확인할 또 하나의 내용은 ‘최대’라는 번역 단어입니다. 올리는 이미지의 특정 사이즈 이미지 생성 시 지정한 값을 초과하지 않는 가로와 세로 ‘비율’로 크롭한다는 것인데, 원본 이미지의 가로와 세로 비율에 따라 크롭하지만, 가로와 세로 어떤 축이든 지정한 값을 초과하지 않는다는 정도로 이해하면 됩니다.

이미지 사이즈 설정 값에서, 가로와 세로 모두 ‘0’이면 해당 이미지 사이즈는 생성되지 않으며, 가로 또는 세로 어느 한 축만 ‘0’이면 그 축은 제한하지 않는다는 뜻이 됨을 기억하세요.

워드프레스 기본 이미지 사이즈

관리페이지 미디어 설정에는 ‘작은 사진(섬네일)’, ‘중간크기’, ‘최대 크기’로 번역한 이미지 사이즈 명칭이 있습니다. 워드프레스의 기본 이미지 사이즈 종류를 번역한 것입니다. 그러나, 지금의 예제처럼 직접 템플릿 파일을 편집하여 워드프레스 사이트를 구성할 때, 워드프레스 사용 경험이 상대적으로 부족할 때는 프로그램적 이미지 사이즈 명칭을 파악하는 것이 좋습니다. 지금 예제 과정에서는 기본 이미지 사이즈 외에 추가한 어떤 이미지 사이즈도 없으므로 기본 이미지 사이즈의 프로그램적 명칭은 어떤 것이 있는지 알아봅니다.

우선, 앞 장에서 등록한 포스트와 이미지 파일을 모두 지웁니다. 다음 순서로 처리합니다.

  • 관리페이지 글 메뉴 클릭한 후 나오는 포스트 목록의 글을 모두 선택한 후 ‘영구적으로 삭제하기’ 선택 옵션을 선택하여 모두 지웁니다.
  • 관리페이지 미디어 메뉴를 클릭한 후 이미지 모두 선택 후 모두 삭제합니다.
  • 관리페이지에서 페이지 메뉴를 클릭 후 목록에서 제목이 ‘타입 page의 포스트’인 포스트만 선택한 후 삭제합니다. 반드시 이 제목의 포스트만 지워야 하므로 주의하세요.
  • 연습장 템플릿 파일에 앞 장에서 추가한 코드를 모두 지웁니다.

다시 연습장 파일에 다음 코드를 추가합니다.

// 연습장 템플릿 파일에 앞 장에서 추가한 코드를 모두 지우고 추가
echo '<pre>' . print_r( get_intermediate_image_sizes(), true ) . '</pre>';

사이트에서 연습장 페이지를 확인하면 다음의 데이터가 출력되는 것을 볼 수 있습니다.

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

2번(배열의 키)을 제외하고, 관리페이지 미디어 설정의 번역 이미지 사이즈 이름이 프로그램적으로 어떤 명칭인지 쉽게 파악할 수 있습니다.

get_intermediate_image_sizes()
이 함수로 사용자의 워드프레스에 존재하는 이미지 사이즈 명칭을 확인할 수 있습니다.

이미지 사이즈 명칭 ‘medium_large’는 워드프레스 4.4. 버전에서 추가한 것인데, 관리페이지에는 나오지 않고, 기본으로 가로 ‘768’, 세로 ‘0’ 값이 데이터베이스 ‘_options’ 테이블의 각각 다음 필드에 저장되어 있습니다.

// 데이터베이스 '_options' 테이블에 저장
medium_large_size_w, medium_large_size_h;

이번에는 이미지 사이즈 명칭마다 가로와 세로 값이 어떤지 살펴봅니다. 연습장 파일에 앞에서 추가한 코드를 지우고 다음 코드를 추가한 후 연습장 페이지를 확인하세요.

// https://codex.wordpress.org/Function_Reference/get_intermediate_image_sizes#Examples
function get_image_sizes() {
    global $_wp_additional_image_sizes;
    $sizes = array();
    foreach ( get_intermediate_image_sizes() as $_size ) {
        if ( in_array( $_size, array('thumbnail', 'medium', 'medium_large', 'large') ) ) {
            $sizes[ $_size ]['width']  = get_option( "{$_size}_size_w" );
            $sizes[ $_size ]['height'] = get_option( "{$_size}_size_h" );
            $sizes[ $_size ]['crop']   = (bool) get_option( "{$_size}_crop" );
        } elseif ( isset( $_wp_additional_image_sizes[ $_size ] ) ) {
            $sizes[ $_size ] = array(
                'width'  => $_wp_additional_image_sizes[ $_size ]['width'],
                'height' => $_wp_additional_image_sizes[ $_size ]['height'],
                'crop'   => $_wp_additional_image_sizes[ $_size ]['crop'],
            );
        }
    }
    return $sizes;
}

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

연습장 페이지에는 다음의 결과가 나타날 것이며, 현재 설정 값과 같습니다.

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

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

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

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

)

이미지 사이즈 명칭에서 주의할 것은 명칭이 특정 기능을 내포하는 것이 아니며, 단지 명칭이라는 것입니다. ‘thumbnail’이라는 이미지 사이즈 명칭으로 이 이미지 사이즈만 포스트 섬네일에 사용되는 것이 아니라는 뜻입니다. 그래서 워드프레스에서는 사용자가 하나의 이미지가 가진 여러 생성 이미지 중의 하나를 포스트 섬네일로 사용할 수 있습니다. 보통 테마의 워드프레스 루프(The Loop)에서 다음처럼 사용합니다.

the_post_thumbnail(); // 특성 이미지에 등록한 이미지로 원본 이미지 출력
the_post_thumbnail( 'thumbnail' );
the_post_thumbnail( 'medium' );
the_post_thumbnail( 'medium_large' );
the_post_thumbnail( 'large' );
the_post_thumbnail( 'full' ); // 원본 이미지
the_post_thumbnail( array( 100, 100 ) ); // 이미지 사이즈를 지정하지 않고 직접 입력

특성 이미지(Post-thumbnails)의 사이즈

포스트 섬네일과 특성 이미지는 같은 뜻입니다. 따라서 위의 모든 코드를 사용하려면 특성 이미지를 등록해야 합니다. 위의 1번 줄처럼 함수에 파라미터Parameter가 없으면 포스트 작성 시 ‘특성 이미지’에 등록한 원본 사이즈(Full) 이미지가 출력됩니다. 특성 이미지를 올릴 때도 설정에 의해 여러 파일이 생성되지만, 이미지 사이즈 선택 옵션이 나오지 않으므로 기본적으로 원하는 사이즈의 이미지를 올려야 합니다. 그러나, 매번 특정 크기의 특성 이미지 사이즈를 만들어 특성 이미지를 등록하는 것이 번거롭다면 다음 코드 중 선택하여 사용하면 됩니다.

// 특성 이미지에 등록한 이미지를 포스트 섬네일로 사용하고, 이미지 사이즈를 지정할 때
set_post_thumbnail_size( 100, 100 ); // 비율에 따른 가로, 세로 최대 값 기준 리사이즈(Resize)
set_post_thumbnail_size( 100, 100, true ); // 지정한 가로, 세로 값으로 크롭

포스트 콘텐츠 내 이미지와 특성 이미지를 등록하고, 특정 이미지 사이즈를 포스트에 출력하는 것은 꼭 필요하며 기초적인 내용입니다. 글에서 실제 예를 안내하지 않지만, 혹시 익숙하지 않다면 인터넷에 방대한 정보가 있으므로 참고하세요.

예제에서는 핵심 콘텐츠인 이미지를 포스트 섬네일이 아니라 ‘이미지 사이즈’ 관점에서 다룹니다. 다음 장에서 데이터베이스에 저장된 기존 이미지 사이즈의 값을 변경하고, 예제에서 사용할 추가 이미지 사이즈를 정의하며, 이미지와 관련한 함수 등을 정의합니다.

목차

0. 개요

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

» 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

25. 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 옵션 페이지, 옵션 필드

38. 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.