티스토리 스킨 제작 (4) - 이미지 썸네일 치환자

분위기를 바꿔주는 이쁜 사진 - pixabay

티스토리에 스킨들에서 이미지 비율 등을 조절할 수 있는 방법이 있는 것을 아시나요? 이번에는 간단한 치환자들을 함께하여 한번 알아보려고 합니다.

※ 저는 Odyssey스킨을 이용하여 스킨을 제작하였습니다

 

 

알아야 할 것

<img src="//i1.daumcdn.net/thumb/C120x120/?fname=" alt="">

우선 해당 부분은 티스토리에 이미지 썸네일 역할을 담당합니다. 이 소스코드를 자세히 보면 두 가지를 알 수 있습니다

해당 부분을 통하여 썸네일 이미지를 부른다는 것을 알 수 있습니다.

 

그리고 아래 부분으로 우리가 썸네일 사이즈를 통제하는 것을 알 수 있습니다

C120x120

해당 부분을 다루는 썸네일 치환자는 아래와 같습니다

 

썸네일 옵션	비율 및 크기	설명
C	가로x세로로 이미지의 픽셀크기를 지정한다 (ex : C120x120)	Crop 원본비율을 무시하고 일정한 부분으로 잘라 가져오는 방식
P	가로x세로로 이미지의 사이즈를 지정후 비율을 유지한채로 들어간다	Portrait 원본비율을 살리고 그대로 가져오는 방식 남은 영역은 흰색 배경으로 채운다
R	가로x0, 세로x0으로 지정하면 지정크기에 맞춰 이미지를 맞춘다	Resize 이미지 비율을 살리고 가져오는 방식 하지만 가로x세로로 적는경우 이미지 비율이 깨진다
S	C옵션과 마찬가지다	Snapshot 원본비율을 무시하고 자르는 방식 (추가로 GIF 파일의 경우에는 멈춘다)

※ 썸내일 옵션은 대문자, 가로x세로의 x는 소문자로 써야 인식합니다

 

Odyssey스킨에 조절하는 방법

저는 해당스킨의 비율도 마음에 들지만 정방형으로 대표 이미지를 구상하였습니다.

<article class="article-type-common article-type-thumbnail">
	<a href="" class="link-article">
		<p class="thumbnail" <s_cover_item_thumbnail> has-thumbnail="1" style="background-image:url('')" </s_cover_item_thumbnail>>
			<img src="" class="img-thumbnail" role="presentation">
		</p>
	</a>
</article>

이미지 썸네일을 바꾸는 HTML 코드를 보면 여기서는 수정할 수 있는 것이 없는 것을 알 수 있습니다. 이것을 통제하는 부분은 common.js 파일의 메소드에 있는 것을 알 수 있습니다.

function setThumbnail(){

    $('.article-type-common:not(.checked-item)').each(function () {

        $(this).addClass('checked-item');
        var thumb = $(this).find('.thumbnail');
				var bgImg = thumb.css('background-image');
        var thumbUrl = bgImg ? bgImg.replace(/(url\(|\)|")/g, '') : bgImg;
        var img = $(this).find('.thumbnail .img-thumbnail')
        var hasThumb = true;
        var isResizeType = $(this).hasClass('article-type-resize');


        // resize no-img
        if(isResizeType && ( !img.attr('src') || img.attr('src') == 'none'))
            img.attr('src', '//t1.daumcdn.net/tistory_admin/assets/skin/no-image.png');


        // smart crop thumbnail
        if(!isResizeType){
            var thumbType = '';
            if(thumbUrl){
                if($(this).hasClass('article-type-crop')){
                    thumbType = 'S640x460'
                }
                else if($(this).hasClass('article-type-thumbnail')){
                    thumbType = 'S160x108';
                }
                else if($(this).hasClass('article-type-poster')){
                    thumbType = 'S200x265';
                }
            }

            if(thumbType != ''){
                var newThumbUrl = 'url(https://i1.daumcdn.net/thumb/' + thumbType + '/?scode=mtistory2&fname=' + thumbUrl + ')';
                thumb.css("background-image", newThumbUrl);
            }
        }
    });

해당 메소드를 통하여 링크를 공급하고 있다는 사실을 알 수 있습니다. 만약 링크를 직접적으로 추가한다면 많은 것을 바꾸어야 하지만 우리가 쉽게 바꿀 수 있는 부분은 thumbType라는 부분입니다. 해당 값을 보면 치환자 부분이 있습니다. 해당 부분을 바꾸면 프로필 사진 사이즈를 바꿀 수 있습니다.

저 같은 경우는 1:1 사이즈로 png파일을 썸네일로 사용하여 C120x120으로 설정하였습니다

(article-type-thumbnail)

 

그리고 자바스크립트로 부르는 이미지는 사진이고 틀까지 만들기 위하여 CSS도 편집이 필요합니다 CSS는 아래 클래스와 .thumbnail 클래스와 아래에 있는 정리한 클래스가 같이 있는 부분을 수정하면 됩니다.

 

목록스타일	클래스	자바스크립트	CSS
베이직	article-type-thumbnail	O	O
이미지 크기 고정	article-type-crop	O	O
이미지 비율 조정	article-type-resize	X	O
포스터타입	article-type-poster	O	O

 

클래스를 찾아 자신이 원하는 사이즈로 조절하시면 됩니다!!

 

우선 간단하게 추가하였는데 나중을 위하여 자바스크립트를 손볼 필요가 있습니다. 어느정도 선까지 할지 정하고 다시 스킨을 제작하도록 하겠습니다