티스토리는 스킨위자드를 이용해 본문 사이즈를 지정할 수 있습니다.
당연히 이미지 사이즈를 계산하는 부분을 수정해야겠죠?
일반 사용자가 이렇게까지 설명을 하는데 이걸 그대로 두지는 않겠죠?
본문 사이즈를 610으로 정하면 610보다 큰 사이즈의 이미지를 삽입할때 자동으로 이미지 사이즈가 610으로 입력이 됩니다.
하지만 이렇게 "본문 사이즈 = 이미지 사이즈" 가 되면 이미지 우측이 잘려서 보이지 않습니다.
이를 해결하기 위해선 본문 사이즈보다 5 픽셀 작게 입력하면 됩니다.
- 저의 경우 평소엔 10~20 픽셀 줄여서 입력하지만 정확히는 5 픽셀을 줄이면 됩니다.
즉, 본문 사이즈가 600이라면 이미지 사이즈는 595 정도로 입력하면 우측이 잘리지 않고 잘 보입니다.
이미지가 수십장이라면 수십장의 이미지를 모두 수작업으로 크기 지정을 해야하는 노가다 작업이 됩니다.
많이 불편하겠죠?
전 이게 너무 불편해서 이러한 문제점을 얘기하고 기본으로 입력되는 사이즈를 줄여달라고 고객센터에 문의를 했더니 아래와 같은 답변이 왔습니다.
문의하신 블로그 이용에 대한 답변이 늦어 대단히 죄송합니다.
먼저, 블로그 문의에 대한 답변을 받지 못해 많이 답답하셨을 것으로 생각됩니다.
고객님께서 말씀하신 현상을 확인하고 있으나, 파악이 원활히 되지 않고 있습니다.
번거로우시더라도 해당 현상이 나타나는 포스트 주소가 있다면, 저희 측으로 기재하여 보내주시기 바랍니다.
바로 도움을 드리지 못한 점 깊은 사과 말씀드리며, 다른 궁금하신 사항은 언제든지 문의해 주시면 성실히 답변해 드리겠습니다.
현상 파악이 안된다며 왠지 저 혼자만 겪는 불편함으로 생각을 하나 봅니다 ^^;
하지만 티스토리 포럼을 보면 같은 문제를 호소하는 분이 있습니다.
관련 글
이 문제는 사용하는 스킨의 차이점이 아니라 티스토리의 소스를 수정해야만 해결이 되는 문제 입니다.
스킨과 상관없이 프로그램상에서 계산을 하여 입력해주기 때문이죠
고객센터에 문의를 하니 (나름 자세히 설명을 했는데도) 이해를 못하는데 티스토리를 직접 사용하는게 아니라서 그런가요?
별 수 있나요 ㅡㅡ
아쉬운 일반 사용자가 콕 찝어서 얘기를 해줘야죠 ^^;;;
어떻게 보이길래 이러는거야?
5픽셀의 차이를 비교해보면 아래와 같습니다.
위는 디폴트 사이즈인 610, 아래는 605로 수정 하였습니다.
가로 사이즈 : 610
가로 사이즈 : 605
우측의 테두리 부분이 조금 달라 보이죠?
이미지 한장이라 "이 정도가 어때서??" 할 수 있습니다.
2장, 3장을 보여주는 경우엔 어떻게 될까요?
|
가로 사이즈 : 300 |
가로 사이즈 : 300 |
|
가로 사이즈 : 295 |
가로 사이즈 : 295 |
가로 사이즈 : 200 |
가로 사이즈 : 200 |
가로 사이즈 : 200 |
|
가로 사이즈 : 195 |
가로 사이즈 : 195 |
가로 사이즈 : 195 |
차이가 눈에 보이시나요?
기본으로 입력되는 사이즈를 그대로 사용하는 경우 1, 2장의 경우엔 우측 여백이 사라지는 정도이지만(전 이것도 눈에 많이 거슬림) 3장의 경우엔 우측 일부가 보이질 않습니다.
하지만 5픽셀씩 줄이면 위와 같이 적절한 여백과 함께 보기좋게 정렬이 됩니다.
왜 이렇게 우측이 잘려서 보일까?
HTML을 체크하여 HTML 소스를 보면 2, 3장을 보여주는 경우 "당연히" 테이블 태그를 이용 합니다.
- 테이블을 이용하여 정렬을 해야 깔끔하게 보이죠~!
나란히 보여주기 때문에 이미지마다 공백이 있어야겠죠?
3장을 보여주는 경우 아래와 같이 만들어 집니다.
<div class="imageblock triple" style="text-align: center">
<table cellspacing="5" cellpadding="0" border="0" style="margin: 0 auto;"><tr>
<td><a href="https://t1.daumcdn.net/cfile/tistory/124BC5234A7B786438" rel="lightbox" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/124BC5234A7B786438" alt="가로 사이즈 : 200" height="133" width="200" style="cursor: pointer"/></a><p class="cap1">가로 사이즈 : 200</p></td>
<td><a href="https://t1.daumcdn.net/cfile/tistory/13613E0E4A7B77FF80" rel="lightbox" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/13613E0E4A7B77FF80" alt="가로 사이즈 : 200" height="143" width="200" style="cursor: pointer"/></a><p class="cap1">가로 사이즈 : 200</p></td>
<td><a href="https://t1.daumcdn.net/cfile/tistory/1262680E4A7B77FF88" rel="lightbox" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/1262680E4A7B77FF88" alt="가로 사이즈 : 200" height="143" width="200" style="cursor: pointer"/></a><p class="cap1">가로 사이즈 : 200</p></td>
</tr></table>
위와 같이 셀마다 5 픽셀의 공백이 필요(빨간색 칠한 부분) 합니다.
이미지가 3장이니 <td>가 3개가 필요하고 여기에 필요한 공백을 계산하면 전체 사이즈가 어떻게 될까요?
(공백) 이미지 (공백) 이미지 (공백) 이미지 (공백)
5 + 200 + 5 + 200 + 5 + 200 + 5 = 620
위와 같이 620 필요 합니다.
하지만 본문의 가로폭은? 610 입니다.
본문의 사이즈보다 10 픽셀이 크죠?
당연히 10 픽셀이 잘려 보이지 않게 됩니다.
그럼 어딜 수정해야 하는데?
script/admin/editor.js 에서 사이즈 계산을 하는군요
현재 티스토리의 기본 사이즈 계산 방식 입니다.
제 블로그를 예로 들면 본문 사이즈는 610(사용자마다 다르겠죠) 이고 공백은 무조건 10으로 계산하고 있습니다.
이미지 1장 : 이미지 사이즈 = 본문 사이즈
예) 610 = 610
스킨에 따라 테두리가 만들어지는 경우 문제 발생 합니다.
이미지 2장 : 이미지 사이즈 = (본문 사이즈 - 공백) / 2
예) 300 = (610 - 10) / 2
이 경우 필요한 가로 사이즈는 300*2 + 5*3 = 615 으로 5 픽셀이 오버 합니다.
이미지 3장 : 이미지 사이즈 = (본문 사이즈 - 공백) / 3
예) 200 = (610 - 10) / 3
이 경우 필요한 가로 사이즈는 200*3 + 5*4 = 620 으로 10 픽셀이 오버 합니다.
제 사진 블로그는(http://photo.sangogi.com) 본문 사이즈가 824 입니다.
이미지 1장 : 이미지 사이즈 = 본문 사이즈
예) 824 = 824
이미지 2장 : 이미지 사이즈 = (본문 사이즈 - 공백) / 2
예) 407 = (824 - 10) / 2
이미지 3장 : 이미지 사이즈 = (본문 사이즈 - 공백) / 3
예) 271 = (824 - 10) / 3
즉, 정상적으로 보이려면 지금의 소스를 수정하여 필요한 공백을 따져서 계산을 해야 합니다.
지금처럼 무조건 10을 빼면 안되죠 ㅡㅡ
간단하게 하려면 테이블의 기본 사이즈가 "본문 사이즈 - 10" 인것처럼 이미지의 경우에도 - 10 을 해주면 되겠죠 ^^;
toolbar.table.tableWidth = skinContentWidth - 10;
이미지가 많아질수록 사이즈 수정하기 힘드니 수정 해주세요~!!
p.s 텍스트큐브닷컴의 경우 기본 이미지 사이즈를 별도로 설정할 수 있게 업데이트가 되었더군요
티스토리도 이런 기능이 필요 합니다 ^^
이 글은 '상오기 : 자전거 여행과 GPS~!' 의 "상오기™ (sangogi@gmai.com)" 이 작성 하였습니다.
"상업적 이용 금지, 원본 출처(링크 포함) 및 저작자 표시, 내용 변경 금지"의 조건으로 자유롭게 사용하실 수 있으며 저작권에 대한 자세한 내용은 "저작권 안내" 를 참고 하시기 바랍니다.
