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

연재고품격 고품질 워드프레스 무료 사진 저장소완결2

이번 장에서는 워드프레스 이미지 메타 데이터로 저장된 원본 사진(이미지)의 EXIF 데이터를 출력합니다. EXIF 데이터는 앞에서 여러 번 나온 내용으로 지난 과정을 계속 이어서 진행했다면 쉽게 처리할 수 있습니다. 다음 그림은 이번 장의 결과입니다.

싱글 이미지 포스트의 EXIF

마크업

다음 html 코드는 EXIF 데이터 출력을 위한 기본 마크업입니다. 미리 준비하여 제공하는 것으로 한글로 어떤 데이터를 출력할 것인지 금방 알 수 있도록 표기한 것입니다.

<div class="image_metadata">
    <div class="exif">
        <div class="exif_camera">카메라 term</div>
        <div class="exif_detail">조리개 · 초점거리 · ISO · 셔터스피드</div>
    </div>

    <div class="image_info">
        <ul class="list-group">
            <li class="list-group-item">
                <span class="item-value">2차분류</span>
                카테고리
            </li>
            <li class="list-group-item">
                <span class="item-value">해상도</span>
                해상도
            </li>
            <li class="list-group-item">
                <span class="item-value">업로드날짜</span>
                업로드 날짜
            </li>
            <li class="list-group-item">
                <span class="item-value">촬영일자</span>
                촬영한 날짜
            </li>
            <li class="list-group-item">
                <span class="item-value">다운로드수</span>
                다운로드
            </li>
        </ul>
    </div>
</div>

테마 파일 pic-single-side.php 파일을 열어 맨 아래 이어서 추가하고 저장합니다. 그리고 사이트에서 싱글 이미지 포스트 페이지에서 결과를 확인하면, 출력할 데이터가 어떤 것인지 확실하게 알 수 있습니다.

싱글 이미지 메타 데이터

편집기에 열린 pic-single-side.php 파일 9번 줄을 보면 다음 코드가 있습니다. 지난 과정에서 이미 추가한 것으로 해당 변수가 이미지의 메타 데이터를 가지고 있으므로 EXIF 출력에 필요한 데이터는 쉽게 얻을 수 있습니다.

// pic-single-side.php 파일 9번 줄
$meta = wp_get_attachment_metadata( $attach_id );

카메라, 조리개, 초점거리, ISO, 셔터스피드, 촬영일자

다음 코드로 카메라, 조리개, 초점거리 등의 필요한 데이터를 얻을 수 있습니다.

$camera = $meta['image_meta']['camera']; // 카메라
$aperture = 'f/' . $meta['image_meta']['aperture']; // 조리개
$focal_length = $meta['image_meta']['focal_length'] . 'mm'; // 초점거리
$iso = 'ISO ' . $meta['image_meta']['iso']; // ISO
$shutter_speed = $meta['image_meta']['shutter_speed'] . 's'; // 셔터 스피드

2번 줄에서 5번 줄은 EXIF 데이터에 단위나 텍스트를 추가하여 변수에 할당한 것입니다. 예제는 최대한 간단한 방법을 사용하므로 PHP 등의 코드 작성에 관한 방향은 각자의 취향에 따르면 됩니다.

위의 코드로 html 마크업에 대입하면 다음처럼 간단하게 처리할 수 있습니다.

<div class="exif">
    <div class="exif_camera"><?php the_terms( $attach_id, 'cameracat', '', '', '' ); ?></div>
    <div class="exif_detail"><?php echo $aperture . ' · ' . $focal_length . ' · ' . $iso . ' · ' . $shutter_speed; ?></div>
</div>

2번 줄에서 EXIF 카메라 데이터를 출력한 것이 아니라 싱글 이미지 포스트에 연결된 cameracat 분류 term을 출력하였습니다. 또, 카메라는 하나의 정보만 존재하므로 2번 줄의 코드에서 사용한 the_terms 함수를 사용하지 않아도 되지만, 간단한 방법을 사용하도록 합니다.

EXIF 데이터 중 조리개, 초점거리, ISO 등의 일부 데이터는 카메라 정보가 없다면 존재하지 않는다고 보는 것이 일반적이므로 앞에서 할당한 EXIF 카메라 데이터를 조건으로 사용하여 다음 코드처럼 정의합니다.

<?php if ( $camera ) { ?>
<div class="exif">
    <div class="exif_camera"><?php the_terms( $attach_id, 'cameracat', '', '', '' ); ?></div>
    <div class="exif_detail"><?php echo $aperture . ' · ' . $focal_length . ' · ' . $iso . ' · ' . $shutter_speed; ?></div>
</div>
<?php } ?>

촬영일자, 해상도(원본 이미지 사이즈), 다운로드 수

촬영일자, 해상도, 다운로드 수 데이터는 다음 코드로 간단하게 얻을 수 있으며, 2번 줄의 해상도는 사이트 출력할 내용 그대로 변수에 할당한 것입니다.

$created_timestamp = $meta['image_meta']['created_timestamp']; // 촬영일자
$img_res = join( 'x', array( $meta['width'], $meta['height'] ) ); // 해상도(원본 이미지 사이즈)
$download_count = get_post_meta( $attach_id, 'download_count', true ); // 다운로드 수

3번 줄은 이미지를 다운로드할 때 추가되는 커스텀 필드와 데이터로 관련 코드는 지난 과정에서 처리하였습니다. 또, 이 필드와 데이터는 모든 이미지에서 한 번의 다운로드가 있을 때 생성된다는 것도 지금까지의 과정을 모두 진행했다면 바로 이해할 수 있을 것입니다.

워드프레스 5 - 매물의 추억

위의 코드를 기준으로 다음처럼 html 마크업에 대입할 수 있는데, 15번과 21번 줄에서 각각의 데이터가 존재할 때 출력하는 조건을 두었습니다.

<div class="image_info">
    <ul class="list-group">
        <li class="list-group-item">
            <span class="item-value"><?php the_terms( $attach_id, 'photocat', '', ', ', '' ); ?></span>
            카테고리
        </li>
        <li class="list-group-item">
            <span class="item-value"><?php echo $img_res; ?></span>
            해상도
        </li>
        <li class="list-group-item">
            <span class="item-value"><?php the_date(); ?></span>
            업로드 날짜
        </li>
        <?php if ( $created_timestamp ) { ?>
        <li class="list-group-item">
            <span class="item-value"><?php echo date_i18n( get_option( 'date_format' ), $created_timestamp ); ?></span>
            촬영한 날짜
        </li>
        <?php }
        if ( $download_count ) { ?>
        <li class="list-group-item">
            <span class="item-value"><?php echo number_format_i18n( $download_count ); ?></span>
            다운로드
        </li>
        <?php } ?>
    </ul>
</div>

*_i18n (Internationalization)

위의 코드 17번 줄 코드에 있는 다음 코드는 UNIX TIMESTAMP 형식의 EXIF 사진 촬영 일자를 워드프레스 관리페이지에서 설정한 날짜 표기 형식으로 워드프레스 date_i18n 함수로 지역화하여 출력하는 것입니다.

// 위의 코드 17번 줄 코드
echo date_i18n( get_option( 'date_format' ), $created_timestamp );

위의 코드를 다음처럼 변경한 후 출력 결과를 확인한 후, 다시 위의 코드로 변경하여 결과를 확인하면 쉽게 이해할 수 있습니다.

// 바로 위의 코드를 아래 코드로 변경 후 임시 결과 확인
echo $created_timestamp;

한편, UNIX TIMESTAMP 형식의 원본 이미지 EXIF 사진 촬영 일자를 워드프레스에서 업로드할 때 원하는 날짜 표기 형식으로 미리 변경하여 저장할 수 있습니다. 이때는 wp_exif_date2ts 워드프레스 함수를 사용할 수 있으며, wp_read_image_metadata 훅의 과정에서 사용하면 됩니다. 지난 과정에서 작업한 테마 루트 inc/image-functions.php 파일을 보면 대략 가늠할 수 있으며, 해당 함수에 관하여 다음 링크를 참고하세요.

wp_exif_date2ts()

23번 줄의 number_format_i18n 함수도 숫자 출력을 위한 지역화 관련 함수인데, 천 단위 기준으로 쉼표를 출력합니다.

이번 장에서 변경한 다음의 파일을 다운로드하고 테마 루트에 덮어쓰세요.

현재 예제에는 391장의 이미지가 있습니다. 이미지에 따라 출력되는 데이터가 다르므로 여러 이미지의 싱글 페이지에 접근하여 이번 장의 결과를 확인하세요.

다음 장에서는 구글 지도 API를 사용하여 싱글 이미지 포스트에 사진 촬영 위치를 표시해봅니다.

예제 목차

0. 고품격 고품질 워드프레스 무료 사진 저장소

1. 예제 구성 환경과 파일

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

3. 테마 Pics Press

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

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

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

7. 워드프레스 이미지 사이즈

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

» 워드프레스 사진의 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. 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

47. 워드프레스 REST API 커스텀 라우트 및 엔드포인트

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어

이메일로 소식 받기

이메일로 새로운 포스트를 받으려면 아래에 이메일 주소를 입력하고, 구독합니다! 버튼을 클릭하세요. 그리고 입력한 이메일 계정에 접속하여 구독 확인 메일 내용을 확인하세요.