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

앞의 그림은 이번 장에서 구성할 최종 화면입니다. 싱글 이미지 포스트의 이미지 사이즈 명칭별 사이즈, 확장자, 용량을 출력하는데, 원본 이미지 사이즈 데이터를 추가하고 이미지 사이즈 중 ‘thumbnail’은 제외합니다. 다운로드는 다음 장에서 처리합니다.

다음 코드는 이번 장에서 구성할 목표의 기본 마크업으로 테마 루트 template-parts/pic/pic-single-side.php 파일에 이어서 추가하고 저장합니다.

<div class="size_list">
    <form action="" method="POST">
        <table id="download_list" class="table">
            <tr>
                <td class="choice_down"><input type="radio" name="img_name" value="" required></td>
                <td class="choice_size">가로 x 세로</td>
                <td class="choice_ext">jpg</td>
                <td class="choice_filesize">123KB</td>
            </tr>
        </table>
        <input type="hidden" name="attach_id" value="<?php echo $attach_id; ?>">
        <?php wp_nonce_field(); ?>
        <button type="submit" class="btn_download">이미지 무료 다운로드</button>
    </form>
</div>
<?php //이미지 사이즈별 다운로드 ?>

사이트에서 싱글 이미지 포스트 페이지를 확인하면 다음 그림처럼 현재까지의 결과를 포함한 화면이 출력됩니다. 그림은 ‘달나라 여행’ 이미지 포스트인데, 그림과 다른 포스트를 확인해도 문제가 없지만 되도록 같은 포스트로 과정을 따라 하는 것이 편리합니다.

포스트의 이미지 메타 데이터

지금 출력하려는 데이터는 지난 과정에서 반복해서 알아본 이미지 메타 데이터에 모두 있습니다. 따라서 PHP 및 워드프레스 함수를 적절히 응용하면 쉽게 구성할 수 있습니다.

제일 먼저, 특정 포스트의 이미지 메타 데이터를 얻기 위해 다음의 함수를 포함한 코드를 사용합니다.

// _wp_attachment_metadata 필드 데이터
$meta = wp_get_attachment_metadata( $attach_id );

이 코드의 결과는 지난 과정에서 연습장 파일에 추가하여 이미 확인하였고, 예제 과정에서 종이에 출력하여 필요할 때 바로 확인할 것을 권장하였는데, 마지막으로 한번 더 확인합니다.

연습장 파일을 열어 다음 코드를 추가하고 저장합니다.

$arg = array(
    'post_type' => 'attachment',
    'posts_per_page' => 1,
);
$img_query = get_posts( $arg );
foreach( $img_query as $img ) {
    $attach_id = $img->ID;
    $meta = wp_get_attachment_metadata( $attach_id );
    echo '<pre>' . print_r( $meta, true ) . '</pre>';
}

사이트에서 연습장 페이지를 확인하면 다음의 결과를 볼 수 있는데, 값은 상관이 없습니다.

Array
(
    [width] => 2160
    [height] => 3840
    [file] => yellow-2632660.jpg
    [sizes] => Array
        (
            [thumbnail] => Array
                (
                    [file] => yellow-2632660-150x150.jpg
                    [width] => 150
                    [height] => 150
                    [mime-type] => image/jpeg
                )

            [medium] => Array
                (
                    [file] => yellow-2632660-225x400.jpg
                    [width] => 225
                    [height] => 400
                    [mime-type] => image/jpeg
                )

            [medium_large] => Array
                (
                    [file] => yellow-2632660-543x965.jpg
                    [width] => 543
                    [height] => 965
                    [mime-type] => image/jpeg
                )

            [large] => Array
                (
                    [file] => yellow-2632660-1280x2276.jpg
                    [width] => 1280
                    [height] => 2276
                    [mime-type] => image/jpeg
                )

            [large_second] => Array
                (
                    [file] => yellow-2632660-1920x3413.jpg
                    [width] => 1920
                    [height] => 3413
                    [mime-type] => image/jpeg
                )

        )

    [image_meta] => Array
        (
            [aperture] => 0
            [credit] => 
            [camera] => SM-N920I
            [caption] => 사진,식물
            [created_timestamp] => 1482683063
            [copyright] => 
            [focal_length] => 4.3
            [iso] => 800
            [shutter_speed] => 0
            [title] => 초록에 노랑
            [orientation] => 1
            [keywords] => Array
                (
                    [0] => 꽃
                    [1] => 눈에 띠는
                    [2] => 생기
                    [3] => 잎
                    [4] => 초록
                )

            [latitude] => 40.12009038
            [latitude_ref] => N
            [longitude] => 140.88592528001
            [longitude_ref] => E
        )

)

원본 이미지의 가로 및 세로 사이즈 데이터부터 이미지 사이즈별 데이터와 원본 이미지의 EXIF 데이터 순서로 출력하고 있습니다.

원본 이미지 추가, thumbnail 사이즈 제외

연습장 페이지의 결과를 확인한 후 다음처럼 원본 이미지의 데이터를 정의합니다.

$meta = wp_get_attachment_metadata( $attach_id ); // _wp_attachment_metadata 필드 데이터
// 원본 이미지
$full_size_width = $meta['width']; // 원본 이미지 가로
$full_size_height = $meta['height']; // 원본 이미지 세로
$full_size_filename = $meta['file']; // 원본 이미지 파일 이름

연습장 페이지의 결과에서 볼 수 있듯이 원본 이미지의 데이터는 이미지 사이즈별 데이터와 거의 같은 데이터 속성을 가지지만, 분리되어 있습니다. 원본 이미지의 데이터를 ‘sizes’ 배열 끝에 포함하고, ‘thumbnail’ 사이즈를 배열에서 제외하기 위해 다음처럼 정의합니다. 지금 추가하거나 제외하는 것이 데이터베이스에 저장된 데이터를 변경하는 것은 아닙니다.

$meta = wp_get_attachment_metadata( $attach_id ); // _wp_attachment_metadata 필드 데이터
// 원본 이미지
$full_size_width = $meta['width']; // 원본 이미지 가로
$full_size_height = $meta['height']; // 원본 이미지 세로
$full_size_filename = $meta['file']; // 원본 이미지 파일 이름
$array_full = array(
    'file' => $full_size_filename,
    'width' => $full_size_width,
    'height' => $full_size_height,
);
 // 원본 이미지를 추가한 이미지 사이즈별 데이터
$sizes_names = $meta['sizes'];
$sizes_names['full'] = $array_full; // full (원본 이미지) 이미지 사이즈 추가
unset( $sizes_names['thumbnail'] ); // thumbnail 제외

지금까지 정리한 파일을 포함한 다음 코드를 연습장 파일에 추가하고 저장합니다. 먼저 추가한 코드를 지우고 추가하세요. 1, 26번 줄은 추가 위치 참고의 목적입니다.

// 여기서

$arg = array(
    'post_type' => 'attachment',
    'posts_per_page' => 1,
);
$img_query = get_posts( $arg );
foreach( $img_query as $img ) {
    $attach_id = $img->ID;
    $meta = wp_get_attachment_metadata( $attach_id );
    $full_size_width = $meta['width'];
    $full_size_height = $meta['height'];
    $full_size_filename = $meta['file'];
    $array_full = array(
        'file' => $full_size_filename,
        'width' => $full_size_width,
        'height' => $full_size_height,
    );
     // 원본 이미지를 추가한 이미지 사이즈별 데이터
    $sizes_names = $meta['sizes'];
    $sizes_names['full'] = $array_full; // full (원본 이미지) 이미지 사이즈 추가
    unset( $sizes_names['thumbnail'] ); // thumbnail 제외
    echo '<pre>' . print_r( $sizes_names, true ) . '</pre>';
}

// 여기 사이에

사이트에서 연습장 페이지를 새로 고쳐 결과를 확인하면 다음처럼 원본 이미지 사이즈 ‘full’이 추가되었고, ‘thumbnail’ 이미지 사이즈 데이터가 제외된 것을 볼 수 있습니다.

Array
(
    [medium] => Array
        (
            [file] => yellow-2632660-225x400.jpg
            [width] => 225
            [height] => 400
            [mime-type] => image/jpeg
        )

    [medium_large] => Array
        (
            [file] => yellow-2632660-543x965.jpg
            [width] => 543
            [height] => 965
            [mime-type] => image/jpeg
        )

    [large] => Array
        (
            [file] => yellow-2632660-1280x2276.jpg
            [width] => 1280
            [height] => 2276
            [mime-type] => image/jpeg
        )

    [large_second] => Array
        (
            [file] => yellow-2632660-1920x3413.jpg
            [width] => 1920
            [height] => 3413
            [mime-type] => image/jpeg
        )

    [full] => Array
        (
            [file] => yellow-2632660.jpg
            [width] => 2160
            [height] => 3840
        )

)

이미지 사이즈별 데이터 출력

사이즈 추가 및 제외로 정리한 코드를 편집기에 열린 pic-single-side.php 파일에 적용하면 다음과 같습니다.

<div class="size_list">
    <form action="" method="POST">
        <table id="download_list" class="table">
        <?php
        $meta = wp_get_attachment_metadata( $attach_id ); // _wp_attachment_metadata 필드 데이터
        // 원본 이미지
        $full_size_width = $meta['width']; // 원본 이미지 가로
        $full_size_height = $meta['height']; // 원본 이미지 세로
        $full_size_filename = $meta['file']; // 원본 이미지 파일 이름
        $array_full = array(
            'file' => $full_size_filename,
            'width' => $full_size_width,
            'height' => $full_size_height,
        );
        // 원본 이미지를 추가한 이미지 사이즈별 데이터
        $sizes_names = $meta['sizes'];
        $sizes_names['full'] = $array_full; // full (원본 이미지) 이미지 사이즈 추가
        unset( $sizes_names['thumbnail'] ); // thumbnail 제외

        // 이미지 사이즈 루프
        foreach( $sizes_names as $size_name ) {
        
    ?>
            <tr>
                <td class="choice_down"><input type="radio" name="img_name" value="" required></td>
                <td class="choice_size">가로 x 세로</td>
                <td class="choice_ext">jpg</td>
                <td class="choice_filesize">123KB</td>
            </tr>
        <?php } ?>
        </table>
        <input type="hidden" name="attach_id" value="<?php echo $attach_id; ?>">
        <?php wp_nonce_field(); ?>
        <button type="submit" class="btn_download">이미지 무료 다운로드</button>
    </form>
</div>
<?php //이미지 사이즈별 다운로드 ?>

21, 30번 줄은 이미지 사이즈별 데이터를 출력하기 위한 루프 블록이며, 편의를 위해 미리 추가하였습니다. 22번 줄부터 이어서 안내하는 코드를 추가합니다.

이미지 사이즈

먼저, 다음 코드처럼 이미지 사이즈별 가로와 세로를 얻어 PHP 함수로 하나의 값으로 만듭니다.

// 이미지 가로, 세로 사이즈
$_width = $size_name['width']; // 가로
$_height = $size_name['height']; // 세로
$wnh = join( ' x ', array( $_width, $_height ) ); // 가로 x 세로

따라서 코드 26번 줄을 다음처럼 변경하고 저장합니다.

// 26번 줄을 다음 코드로 변경
<td class="choice_size"><?php echo $wnh; ?></td>

사이트에서 싱글 이미지 포스트 페이지를 확인하면 이미지 사이즈가 모두 출력될 것입니다.

이미지 경로

주어진 데이터, 즉 이미지 메타 데이터만으로 이미지 사이즈별 확장자와 용량을 바로 얻을 수 없습니다. 이미지의 위치(경로)를 포함한 데이터가 필요합니다. 절대적이다는 뜻은 아니며, 워드프레스 업로드 또는 콘텐츠 경로 설정에 따라 자동으로 대응하기 번거로우므로 고정된 위치를 사용하지 않는 것이 좋다는 뜻입니다.

이미지의 경로에 URL 방식을 사용하여 이미지 파일의 정보를 구할 수 있지만, 현재 구성하는 예제는 다음의 기준으로 구성한다는 것을 예제 과정의 처음에 안내했으므로 다른 방법을 사용해야 합니다.

// 실제 설정과 상관이 없음
allow_url_fopen: OFF

따라서 이미지가 있는 서버의 절대 경로를 구하여 이미지 파일의 확장자와 용량을 구해야 합니다. 다음 코드를 이어서 추가합니다.

// 이미지 확장자와 용량 구하기, allow_url_fopen 제한 기준
$filename = $size_name['file']; // 이미지 파일 이름
$_upload_dir = wp_upload_dir(); // 워드프레스 사이트의 업로드 경로 관련 정보
$_image_path = $_upload_dir['path'] . '/' . $filename; // 이미지의 절대 경로

함수 wp_upload_dir로 워드프레스 사이트의 url, path, baseurl, basedir 등의 경로 정보를 얻을 수 있고, 파일 이름을 포함한 전체 절대 경로를 정의합니다.

이미지 확장자

이미지의 경로와 파일 이름을 포함한 정보를 PHP 함수로 다음처럼 간단하게 이미지의 확장자를 얻을 수 있습니다. 계속 이어서 추가하면 됩니다.

$_ext = pathinfo( $_image_path ); // 절대 경로로 얻은 파일 정보
$extension = strtoupper( $_ext['extension'] ); // 파일 정보 중 확장자 정보를 대문자로

이미지 용량

마찬가지로, 이미지 경로와 파일 이름을 포함한 정보로 PHP 함수와 워드프레스 함수를 이용하여 다음처럼 용량을 구할 수 있습니다. 역시 계속 이어서 추가하면 됩니다.

$_filesize = filesize( $_image_path ); // 절대 경로로 얻은 파일의 용량
$img_filesize = size_format( $_filesize, 2 ); // 용량을 쉽게 알 수 있도록 출력하는 워드프레스 함수, 소수 2자리까지 제한

이미지 확장자나 파일 용량을 얻는 방법은 기준과 설정에 따라 다양할 수 있다는 것을 기억하고, 다음처럼 코드 25, 27, 28번 줄을 변경하고 저장합니다. 25번 줄은 다음 장에서 구성할 다운로드에 관련된 폼 데이터로 사용합니다.

<td class="choice_down"><input type="radio" name="img_name" value="<?php echo $filename; ?>" required></td>
<td class="choice_ext"><?php echo $extension; ?></td>
<td class="choice_filesize"><?php echo $img_filesize; ?></td>

사이트에서 싱글 이미지 포스트 페이지를 새로 고치면, 모든 데이터가 출력된 것을 볼 수 있을 것입니다. 다음은 지금까지 추가한 전체 코드입니다.

<div class="size_list">
    <form action="" method="POST">
        <table id="download_list" class="table">
    <?php
        $meta = wp_get_attachment_metadata( $attach_id ); // _wp_attachment_metadata 필드 데이터
        // 원본 이미지
        $full_size_width = $meta['width']; // 원본 이미지 가로
        $full_size_height = $meta['height']; // 원본 이미지 세로
        $full_size_filename = $meta['file']; // 원본 이미지 파일 이름
        $array_full = array(
            'file' => $full_size_filename,
            'width' => $full_size_width,
            'height' => $full_size_height,
        );
         // 원본 이미지를 추가한 이미지 사이즈별 데이터
        $sizes_names = $meta['sizes'];
        $sizes_names['full'] = $array_full; // full (원본 이미지) 이미지 사이즈 추가
        unset( $sizes_names['thumbnail'] ); // thumbnail 제외

        // 이미지 사이즈 루프
        foreach( $sizes_names as $size_name ) {
            // 이미지 가로, 세로 사이즈
            $_width = $size_name['width']; // 가로
            $_height = $size_name['height']; // 세로
            $wnh = join( ' x ', array( $_width, $_height ) ); // 가로 x 세로
            // 이미지 확장자와 용량 구하기, allow_url_fopen 제한 기준
            $filename = $size_name['file']; // 이미지 파일 이름
            $_upload_dir = wp_upload_dir(); // 워드프레스 사이트의 업로드 경로 관련 정보
            $_image_path = $_upload_dir['path'] . '/' . $filename; // 이미지의 절대 경로
            $_ext = pathinfo( $_image_path ); // 절대 경로로 얻은 파일 정보
            $extension = strtoupper( $_ext['extension'] ); // 파일 정보 중 확장자 정보를 대문자로
            $_filesize = filesize( $_image_path ); // 절대 경로로 얻은 파일의 용량
            $img_filesize = size_format( $_filesize, 2 ); // 용량을 쉽게 알 수 있도록 출력하는 워드프레스 함수, 소수 2자리까지 제한
    ?>

            <tr>
                <td class="choice_down"><input type="radio" name="img_name" value="<?php echo $filename; ?>" required></td>
                <td class="choice_size"><?php echo $wnh; ?></td>
                <td class="choice_ext"><?php echo $extension; ?></td>
                <td class="choice_filesize"><?php echo $img_filesize; ?></td>
            </tr>
        <?php } ?>
        </table>
        <input type="hidden" name="attach_id" value="<?php echo $attach_id; ?>">
        <?php wp_nonce_field(); ?>
        <button type="submit" class="btn_download">이미지 무료 다운로드</button>
    </form>
</div>
<?php //이미지 사이즈별 다운로드 ?>

이미지 사이즈 및 경로 관련 워드프레스 함수

워드프레스 사이즈에 존재하는, 사용자가 설정한 이미지 사이즈 명칭을 출력하는 함수로 다음 함수가 있습니다.

// 이미지 사이즈 명칭을 출력하는 함수
get_intermediate_image_sizes();

이 함수는 특정 이미지가 특정 이미지 사이즈를 가지고 있느냐의 여부를 구분하지 않아 지금 예제에서는 조금 어울리지 않습니다. 하지만, 예제는 원본 이미지의 사이즈를 특정 기준 이상의 사이즈만 업로드가 가능하도록 설정하였으므로 예제의 이미지는 예제에서 지정한 이미지 사이즈를 모두 가집니다.

이런 사이트 구성 기준에 따라 이 함수도 다음의 함수와 함께 사용한다면 이번 장의 목표를 구성할 수 있습니다.

// 기본 예시
wp_get_attachment_image_src( $attach_id, $size_name );

그러나, 이 함수로 특정 이미지의 사이즈 명칭별 가로, 세로, url 정보를 얻을 수 있어 확장자는 구할 수 있지만, 예제의 PHP 설정 기준에 따라 이미지의 용량을 얻을 수 없어 경로를 구하는 함수를 다시 사용해야 합니다.

어쨌든 2가지 함수를 사용하여 다음의 코드를 사용해도 이번 장의 결과를 얻을 수 있으며, 사용한 함수는 기억해 두는 것이 좋습니다.

$sizes_names = get_intermediate_image_sizes();
unset( $sizes_names[0] ); // thumbnail 제외
array_push( $sizes_names, 'full' ); // 맨 끝에 full(original) 추가
foreach( $sizes_names as $size_name ) {
    $imgurl = wp_get_attachment_image_src( $attach_id, $size_name );
    $_url = $imgurl[0]; // 이미지 Url
    $_width = $imgurl[1]; // 이미지 가로 크기
    $_height = $imgurl[2]; // 이미지 세로 크기
    $wnh = join( ' x ', array( $_width, $_height ) );

    $only_name = wp_basename( $_url ); // 지역화 친화 함수, basename($_url) 가능;

    $_ext = pathinfo( $only_name );
    $pic_extension = strtoupper( $_ext['extension'] );

    $upload_dir = wp_upload_dir();

    $path_name = $upload_dir[ 'path' ] . '/' . $only_name;
    $_filesize = filesize( $path_name );
    $img_filesize = size_format( $_filesize, 2 );
}

이번 장에서 변경한 파일을 다음 링크를 통해 받고 압축을 풀어 테마 루트에 덮어쓰세요.

제공한 변경 파일을 열어 보면 파일 9번 줄에서 13번 줄에 이번 장에서 추가한 코드 일부가 있습니다. 다음 코드입니다. 싱글 이미지 포스트 페이지 오른쪽 영역 구성 과정에서 다시 사용할 데이터를 포함하고 있으므로 위치를 이동하여 제공했습니다.

$meta = wp_get_attachment_metadata( $attach_id ); // _wp_attachment_metadata 필드 데이터
// 원본 이미지
$full_size_width = $meta['width']; // 원본 이미지 가로
$full_size_height = $meta['height']; // 원본 이미지 세로
$full_size_filename = $meta['file']; // 원본 이미지 파일 이름

다음 장에서는 이번 장에서 구성한 이미지 사이즈별 이미지를 로그인 회원이 다운로드할 수 있도록 구현해봅니다.