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

홈페이지를 만들다 보면 한글과 영어를 적당히 구분해서 스타일을 적용하고 싶을때가 있다. 뭐, 사실 현재 웹에서 기본 폰트인 굴림체나 돋움체의 영어 글씨가 별로 이뿌지 않기 때문일 것이다.

아이디어:
화면에 표시할 내용을 <<<content>>> , 한글과 영어에 해당되는 스타일의 클래스를 각각 "kor"과 "eng"라 하자.
기본적으로 <<<content>>>에 kor 스타일을 적용하고, <<<content>>>중에서 숫자와 영어 대소문자등을 찾아서 그 부분만 eng 스타일을 적용하게 된다.
이때, 정규식(Regular Expression)을 이용해서 숫자와 영어 대소문자를 구분한다.

JavaScript에서...

<!-- 정규식 정의 부분 -->
<script type="text/javascript" language="javascript">
    function applyEngStyle(str) {
        re   = /([0-9a-zA-Z]+)/g;
        repl = "<span class=\"eng\">$1</span>"
        return str.replace(re, repl);
    }
</script>

<!-- 사용 예 -->
<span class="kor">
    <script type="text/javascript" language="javascript">
        document.write(applyEngStyle("<<<content>>>"));
    </script>
</span>

PHP에서...

<!-- 정규식 정의 부분 -->
<?
    function applyEngStyle($str) {
        $re   = "([0-9a-zA-Z]+)";
        $repl = "<span class=\"eng\">\\1</span>";
        return mb_ereg_replace($re, $repl, $str);
    }
?>

<!-- 사용 예 -->
<span class="kor">
    <? echo applyEngStyle("<<< content >>>"); ?>
</span>

위 방법 중 JavaScript를 이용한 방법이 본 블로그에 적용되어 있다.

<h1>
    <script>
        document.write(applyEngStyle("crazybar.net에 오신걸 환영합니다."));
    </script>
</h1>

위문장을 수행한 결과가 다음과 같다. ( 참고로 h1에는 돋움체, h1 span.eng에는 Trebuchet MS가 설정되어 있음 )

우리 마눌님이 다니는 **전자. 내가 졸업을 하면 가게 될 곳이기도 한 이곳은 회사에서의 잡일(?)을 막기 위해 업무상 불필요하다고 느껴지는 사이트에 대한 접근을 차단하고 있다. 예를 들어, 싸이월드 같은 곳은 접속이 안된단다. MSN이나 네이트온도 쓰지 못한다. 아마도 방화벽을 통해서 도메인이나 포트를 걸러내는 듯 한데, 내가 운영자가 아니니 자세히 알 수는 없고...

암튼 내가 블로그를 티스토리로 옮긴 이후에 심각한 문제가 발생했다. 바로 마눌님 회사에서 블로그에 올린 사진이 보이지 않는 다는 거~~ 일명 엑박의 압박이랄까??

블로그 도메인은 내가 보유한 것을 쓰지만, 첨부파일들은 fs?.tistory.com이라는 도메인에서 받아오는것 같은데, 어떠한 방법인가릍 통해서 이 경로가 막힌것이다. 이것은 아주 심각한 문제이다. 왜냐하면, 마눌님 회사에 있는 수많은 호야의 팬들이 더이상 호야사진을 볼수 없다는 문제가 생긴 것이다.  며칠을 고민했다.

고민끝에 내린 방법은 티스토리로 입주하기전 서버로 이용하던 내 PC를 이미지 백업 서버로 사용하는 것이다. 이를 위해 약간의 php 및 JavaScript 코딩을 해야만 했지만, 나름 만족스러운 결과가 나온것 같아 기분이 좋다.

대략의 시나리오는 다음과 같다.

1. 사진이 있는 글이 읽혀지면 떠다니는 메뉴를 이용해 "사진이 안보이면 클릭하세요"라는 버튼이 생긴다.  ( 사진이 없는 글에서는 버튼이 보이지 않는다. 이는 본문내에 들어간 img 태그의 개수를 이용해서 해결하였다. )  
2. 사용자가 이 버튼을 누르면 현재 보고있는 글의 url이 이미지 백업 서버로 전송이 된다.
3. 이미지 백업 서버에서는 주어진 url의 내용을 긁어와서 그 안에 들어있는 img태그를 분석하고 각 이미지의 src 속성을 파악한다.
4. 각 이미지에 대한 src속성을 이용해서 해당 이미지를 티스토리에서 백업서버로 다운로드 한다.
5. 이미지 다운로드가 끝아면 별도의 팝업 창을 이용해서 사용자의 화면에 이미지들을 보여주게 된다.

그런데, 이렇게 하고 보니 별도의 화면이라는 생각이 들어 썩 달갑지가 않았다. 이것은 아마도 팝업창에 대한 부정적인 시각 때문이라고 생각된다. 이때 문득 떠오른 것이 LightBox 플러그인 이었다. 이와 같은 방법으로 팝업을 띄운다면 팝업에 대한 거부감은 상대적으로 줄거라는 생각이 들었고, 인터넷을 좀 뒤져서 JavaScript로 된 소스들 중에서 적당한 놈을 골라서 나의 티스토리 스킨에 적용 시켰다.

후후... 결과물은 직접확인하시라... 테스트를 위해 캡춰화면을 올려본다.

 

이렇게 해 놓고 보니 기존에 새창으로 연결하던 "앨범보기" 기능도 LightBox 기능을 이용하기로 했다. (이 기능은 앨범보기가 있는 글에서 확인하세요. 샘폴보기)

이일을 다 마무리 해놓고 보니 나름 이쁜것이 만족스럽다.

나 스스로 이정도면 호야의 팬들에 대한 최상의 서비스라고 외치면서 이 글을 마친다. ^^