바로 어제 티스토리 Exif 정보출력 플러그인 - CSS로 제어하기 라는 글을 올렸는데요. 아무래도 매번 Exif 정보를 보일지 말지 결정하는 건 넘 귀찮은 일인것 같습니다.

고민한 끝에, 카테고리나 태그 단위로 Exif 정보출력 여부를 설정할 수 있으면 좋겠다 라는 결론에 이르렀습니다. 그래서, 잠깐 짬을 내어 열심히 코딩을 했지요. ( 직업병은 어쩔수가 없나봅니다. 일할때는 일하느라 코딩하고, 쉴때는 블로깅 하느라 코딩하고.. 에휴~)

그래서 성공했습니다. 지금부터 그 방법을 공개합니다.

1. 스타일시트에 아래와 같은 내용을 추가합니다.

/* Style by crazybar.net */
/* 기본적으로 Exif정보가 보여지지 않게 할때 */
.ExifInfo { display: none !important; }

.show_exif .ExifInfo { display:block !important; }
.hide_exif .ExifInfo { display:none !important; }
/* end of Style by crazybar.net */

이 부분에 관한 설명은 생략합니다. 이전글을 참고하세요.

2. </head>를 찾아서 그 앞에 아래 내용을 추가합니다.

<!-- Script by crazybar.net -->
<script type="text/javascript" language="javascript">
<!--
var catWords = new Array("카테고리1", "카테고리2", ... );
var tagWords = new Array("태그1", "태그2", ... );

var targetClass = "show_exif";

var postNum = 0;
var changeFlag = false;

function checkName(words, str){
    for(var i = 0; i < words.length; i++) {
        if(str == words[i]) {
            changeFlag = true;
        }
    }
}

function checkByCategory(catStr) {
    var catNames = catStr.match(/[^\/]+/gi);

    for(var i = 0; i < catNames.length; i++) {
        checkName(catWords, catNames[i]);
    }
}

function checkByTag(tagId) {
    var tag = document.getElementById(tagId);

    if(tag){
        var tagObjs = tag.children;

        for(var i = 0; i < tagObjs.length; i++) {
            if(tagObjs[i].nodeName == "A"){
                checkName(tagWords, tagObjs[i].innerHTML);
            }
        }
    }
}

function changeClass(postId){
    if(changeFlag){
        var postObj = document.getElementById(postId);
        postObj.className = postObj.className + ' ' + targetClass;
        changeFlag  = false;
    }
}
-->
</script>
<!-- End of Script by crazybar.net -->

catWords: Exif 정보를 출력할 카테고리 이름을 담음 배열입니다. 이부분을 자유롭게 수정하시면 됩니다. 
tagWords: Exif 정보를 출력할 태그 이름을 담음 배열입니다. 이부분을 자유롭게 수정하시면 됩니다. 
checkName: 추출한 카테고리나 태그가 catWords나 tagWords에 속하는지를 결정합니다.
checkByCategory: 카테고리 이름을 추출합니다.
checkByTag: 태그이름을 추출합니다.
changeClass: 지정한 조건에 맞는 경우, 포스팅 본문이 속한 DIV의 스타일을 조정하여 Exif 정보가 출력되도록합니다.

3. 다음을 찾아서 아래 내용으로 변경합니다. (포스트-클래스-이름은 스킨에 따라 다름)

<div class="포스트-클래스-이름"> [ ##_article_rep_desc_## ]

<!-- by crazybar.net -->
<script type="text/javascript" language="javascript">
var postId = 'post' + (++postNum);
var tagId = 'tag' + postNum;
document.write('<div class="클래스-이름" id="'+ postId +'">');
</script>
<!-- div class="article_post" -->
    

원래 본문을 감싸주는 DIV에는 ID가 없는데, 그것을 붙여주기 위한 부분입니다. ID는 고유해야 하므로, 전역변수를 이용해서 번호를 붙였습니다. 2에서 스타일을 적용시키는데 사용됩니다.

4. 다음을 찾아서 아래 내용으로 변경합니다. (태그-클래스-이름은 스킨에 따라 다름)

<s_tag_label> <div class="태그-클래스-이름">

<s_tag_label>
<!-- by crazybar.net -->
<script type="text/javascript" language="javascript">
document.write('<div class="태그-클래스-이름" id="'+ tagId +'">');
</script>
    <!-- div class="article_tag" -->

티스토리에서 넘어오는 태그정보는 링크까지 붙어있는 형태입니다. 그것으로 부터 태그를 뽑아내기 위해 DIV 객체를 제어해야 하기때문에 3과 비슷한 방법으로 해당 부분에 ID를 달아줍니다. 

5. </s_tag_label>을 찾아서 그 아래에 아래 내용을 추가합니다.

<!-- by crazybar -->
<script type="text/javascript" language="javascript">
checkByCategory('');
checkByTag(tagId);
changeClass(postId);
</script>

최종적으로 2에서 작성된 함수들을 호출하여 조건이 맞는 포스팅에 대해서는 Exif정보출력을 보이도록 설정해 주는 부분입니다.

이제 다 되었습니다. 휴~

본 블로그의 경우 오늘 현재, 카테고리는 갤러리와 사진, 카메라 만 Exif가 보이도록 설정되어 있고, 태그는 여행, 나들이, LX3, D300등을 설정해 두었고. 그외에는 보이지 않도록 되어 있습니다. 

다만 개별 포스팅별로 스타일을 직접 제어하는 경우는 예외가 됩니다. 

딱 이렇게 해 놓고 나니 이제 좀 마음이 편하네요.
사실, Exif 정보가 항상 보인다고 해서 문제될건 없습니다만, 불필요한 정보가 내용을 가리는 일이 발생할 수도 있기때문에, 선택적으로 보여주길 바랬던 것입니다.

어쨌던, 필요하다고 느끼셨던 분들에게 도움이 되셨길 기대합니다.

(추가내용)

현재 IE7과 크롬에서는 잘 되는 것을 확인했습니다. 

얼마전에 티스토리에서 Exif 정보출력 플러그인을 공개했습니다. 본 블로그에서도 그 내용을 소개했었죠.

그런데, 몇가지 미흡한 부분이 있는데, 그 중 하나가 블로그상의 모든 사진에 일괄적용된다는 겁니다. 경우에 따라서는 선택적으로 보여주고 싶을 수도 있는데 말이죠. 

그래서, 스타일 시트를 이용해서 Exif정보가 보여지는 상태를 제어해볼까 합니다. 

준비

먼저 정해야 할 것은, 보여지는 상태와 감춰지는 상태중 어떤것을 기본으로 하느냐 입니다.  이를 결정하면 그 여부에 따라서 블로그 스킨의 스타일시트의 맨 아래에 아래 내용을 추가합니다. 
( 스타일 편집은 관리자 > 스킨 > HTML/CSS 편집 을 클릭한 후에, 아랫쪽 텍스트박스입니다. 자세한 사항은 티스토리 메뉴얼 참조 )

[1]
/* 기본적으로 Exif정보가 보여지지 않게 할때만 아랫줄 추가 */
.ExifInfo { display: none !important; }

[2]
/* Exif 정보출력 플러그인 제어 */
.show_exif .ExifInfo { display:block !important; }
.hide_exif .ExifInfo { display:none !important; }

이때, 기본으로 감춰지게 할때만 [1], [2] 모두 추가하고, 그렇지 않을 경우는 [2]만 추가합니다.

적용

일단 정상적으로 글을 작성하시면 됩니다. 그러면, 기본설정데로 Exif정보가 보여지거나 감춰집니다. 그리고, 기본설정과 반대로 하고 싶은 부분에 대해서만 위 스타일을 적용시켜주면 됩니다. 

가령 기본적으로 감춰놓았지만, Exif 정보를 보여주고 싶은 부분이 있다면, 그 부분 앞뒤에 아래와 같이 스타일을 적용시켜주면 됩니다. 

<!-- (1) 이부분에 있는 사진은 Exif 정보가 감춰짐 -->

<div class="show_exif">

<!-- (2) 이부분에 있는 사진은 Exif 정보가 출력됨 -->

</div>

<!-- (3) 이부분에 있는 사진은 Exif 정보가 감춰짐 -->

만약 포스팅 단위로 적용하려면, (1)과 (3)부분은 무시하면 되고, (2)부분이 작성한 본문이 되겠죠. 글을 다 쓴 후에 앞뒤에다가 위처럼 태그를 추가해 주면 되겠죠.

태그를 추가하려면, 편집모드를 HTML로 바꿔야 하는데, 편집창 우측상단에 HTML이라는 체크박스를 이용하면 됩니다.

확인

본 블로그는 기본적으로 보여지도록 설정해 두었습니다만, 아래 두 사진을 확인해 보시면 정보가 감춰지기도 하고, 보이기도 하는 두 경우를 다 확인하실 수 있습니다.

Panasonic | DMC-LX3 | Multi-Segment | 8sec | F/8 | -1EV | 5.1mm | ISO-80 | Off Compulsory

Panasonic | DMC-LX3 | Multi-Segment | 8sec | F/8 | -1EV | 5.1mm | ISO-80 | Off Compulsory

좀 귀찮을 수도 있긴 합니다만, 습관을 들이면 그리 어렵지 않으리라 생각됩니다. 사실 제일 좋은건 티스토리에서 플러그인의 기능을 개선해 주는 것이겠지만, 궁극적으로 사진단위로 조절을 하는 것은 이미지블럭에 정보표시선택여부를 추가해야 하는 거라서 금방 될것 같지는 않네요.

암튼, 필요하신 분 계시면 도움이 되셨길... 

참고로, 본 내용은 IE7과 크롬에서 확인하였습니다. 

티스토리에 정말 반가운 플러그인이 추가되었네요. 바로 Exif 정보출력 플러그인입니다. 

어쨌든 진작에 구현되었어야 할 기능인데, 사실 좀 늦은감이 없잖아 있긴 합니다만, 이제라도 되었으니 좋습니다.

플러그인을 사용하려면, 관리자 > 플러그인 > 플러그인 설정에서 전체보기 또는 멀티미디어 항목을 선택하고 Exif 정보출력이라는 부분을 클릭하면 됩니다.

설정 화면은 다음과 같습니다.

지원되는 정보는 

• 제조사
• 카메라기종
• 촬영모드
• 측광모드
• 셔터속도(개방시간)
• 조리개값
• 노출보정
• 초점거리
• ISO값
• 플래쉬사용
• 촬영시각

입니다.

이중 보이고 싶은 항목을 선택하고, 원하는 스타일을 설정한 후에 저장을 클릭하면 됩니다.

이렇게 해서 설정을 마쳤더니 아래와 같이 출력이 되는 군요.

그동안 힘들게 액자를 만들어 Exif 정보를 표시하곤 했었는데, 이 플러그인을 이용해서 좀더 편안하게 사진을 감상할 수 있을것 같습니다.

SLR클럽에서 표현되는 것과 같이 사진을 클릭했을때만 보여주는 방식이 좀더 깔끔할 것 같기는 한데, 이런저런 문제가 겹칠 가능성이 높은 일이라, 이정도도 대 만족입니다. ^^