바로 어제 티스토리 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과 크롬에서는 잘 되는 것을 확인했습니다. 

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.