[Tistory Odyssey Skin] 베이직 타입 커버 썸네일 수정

 

#1 베이직 타입 커버 썸네일

 

  이제 블로그에 글이 조금씩 쌓여가면서 새로운 타입의 커버를 하나씩 추가하게 되었습니다. 

  이미지 비율 유지 타입, 단순 텍스트 타입에 이어 3번째로 사용하게 되는 커버인 '베이직 타입'입니다. 

 

이렇게 올리니 티가 잘 안나는데 실제론 매우 크게 자글거립니다. 

  베이직 타입 커버를 사용해 보면, 

  썸네일의 이미지가 깔끔하지 못하고 억지로 이미지를 과하게 줄여서 굉장히 자글자글하게 깨진 상태로 보입니다. 

  특히나 이미지보다 글자가 메인일 때  크게 눈에 띄는데... 이 부분을 어떻게든 수정해 보기로 했습니다.

 

 

#2 수정하기

찾았다 요놈!

  해당 부분은 스킨 편집의 HTML과 CSS가 아닌, 자바스크립 파일 중 common.js 안에 포함되어 있습니다. 

  

  자바스크립트를 수정하기 위해선 메모장이나 vscode 등의 코드 편집기를 사용하시면 됩니다

  해당 파일을 열어 다음 항목을 찾습니다. 

// 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';
        }
    }

중간에 있는 'article-type-thumbnail'를 찾아 현제 지정되어있는 해상도 S160x108을 원하는 해상도로 변경시켜줍니다. 

이 사이트는 2배수인 320x216으로 변경하였습니다.

 

다시 수정한 파일을 저장한 후,

기존에 삽입되어 있는 images/common.js를 삭제.

다시 추가하기 버튼을 눌러 수정한 common.js를 업로드하면 모든 작업은 완료입니다. 

 

자바스크립트를 어떻게 하는지 모르겠다면?

다음 파일을 다운받아 그대로 넣어주면 됩니다.

 

common.js

0.01MB

 

 

#3 수정 후

  썸네일 이미지의 자글거림이 삭제되었습니다.

이것도 수정 전과는 크게 차이가 나 보이진 않지만 꽤 차이납니다.