태터데스크.. 잘하면 이쁜 초기화면을 만들수 있는데, 사용하기는 그리 녹녹치가 않습니다. 특히 썸네일 관련 부분을 보고 있노라면 좀 짜증이 납니다. 자동으로 생성되서 넘어오는 html에 테이블을 사용해놨기 때문에 순수한 디자인 만으론 모양을 맘데로 주무를 수가 없지요. (기본적으로 이미지가 잘리거나 불필요한 공백이 생기게 됩니다.)
결국 넘어오는 html을 받아서 재가공을 하기로 결정했습니다. 단순하게 생각해서, 1. 소스를 받는다. 2 필요한 부분만 잘라낸다. 3. 다시 쓴다. 뭐 이런 절차가 되겠네요.
원하는 디자인은 이미지는 주어진 영역의 오른쪽에 붙어주고, 내용은 나머지 부분에 여백없이 자연스럽게 배치되는 것입니다.
태터데스크에서 반복되는 아이템은 <s_list>~</s_list> 의 html에 영향을 받습니다. 따라서 수정하는 부분 역시 이부분에 삽입하면 되겠습니다.
소스
str = String('[ ##_item_thumbnail_## ]');
result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
imgSrc = result[1];
imgAlt = result[2];
if(imgSrc .lastIndexOf('imgempty.png') < 0) {
document.write('<div class="TD_thumbimg">');
document.write('<a href="[ ##_item_link_## ]"><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
document.write('</div>');
}
</script>
위 소스를 [## _item_thumbnail_ ## ]에 치환 시켜줍니다. 이렇게 해 주면 웹페이지가 브라우져에 보여지는 순간에 위 스크립트에 의해 다시 만들어진 html (위 소스에서 document.write 부분) 만 화면에 보여지게 됩니다.
추가로, 이미지가 없을때 보여지는 기본 이미지(imgempty.png)는 아예 보여지지 않도록 바꾸었습니다. (_item_thumbnail_ 앞뒤 여백은 실제로는 없습니다. )
스타일
그리고, 영향을 받는 아이템의 스타일은 다음과 같습니다.
float:right;
margin: 5px;
padding:0;
}
.TD_thumbimg img{
max-width: 160px;
max-height: 160px;
width: 160px;
border: 1px solid #ccc;
margin:0;
padding:3px;
}
이미지 부분이 오른쪽에 붙도록 하기 위해 TD_thumbimg 클래스를 이용하였고, 내부에 자리 잡는 img에 대해서 max-width와 max-height를 이용하여 크기를 제어하였습니다. 참고로 max-width와 max-height는 익스플로러6.0에서는 올바르게 동작하지 않습니다. 이 경우 단순히 width만 설정되게 됩니다.
결과
의도했던 데로 잘 나왔네요. 익스플로러7.0, 파이어폭스, 크롬에서는 정상동작합니다.
(추가내용)
사진이 없을 때 아예 표시하지 않는게 아니라, 기본 이미지를 다른 걸로 바꾸어서 적용하는 법에 관해 물어보시는 분이 계셔서 아래 내용을 추가 하였습니다.
소스 - 기본이미지를 바꿔서 적용하는 법
str = String('[ ##_item_thumbnail_## ]');
result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
imgSrc = result[1];
imgAlt = result[2];
if(imgSrc .lastIndexOf('imgempty.png') >= 0) {
imgSrc = "바꾸고 싶은 기본이미지 URL";
}
document.write('<div class="TD_thumbimg">');
document.write('<a href=""><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
document.write('</div>');
</script>
적당한 이미지를 스킨의 images 디렉토리에 업로드한 후에 해당 이미지의 절대주소를 이용하면 되겠습니다. 이미지의 절대주소는 사용하고 있는 스킨의 임의의 이미지의 속성을 참조해서 작성하면 됩니다.
'IT & Gadget > 블로그' 카테고리의 다른 글
| [티스토리] 태터데스크 사용하면서 "주소/?page=XX" 링크 사용하기 (2) | 2008/11/07 |
|---|---|
| RSS 부분공개에서 전체공개로... FeedBurner 사용중지... (4) | 2008/11/05 |
| [티스토리] 태터데스크 주무르기 : 썸네일 배치 ( 내용추가 ) (28) | 2008/10/29 |
| [티스토리] 태터데스크에 새글 아이콘 달기 (11) | 2008/10/29 |
| 블로그 가치평가 by 블로그얌(Blogyam) (6) | 2008/10/28 |
| [티스토리] Exif 정보출력 - 카테고리, 태그 단위로 표시여부 제어하기 (0) | 2008/10/22 |
max-height,
max-width,
Tistory,
블로그,
썸네일,
태터데스크,
티스토리
Prev