본문 바로가기
Blog/책

[스킨] CCZ-CROSS 스킨 이미지 썸네일 출력

by NAMP 2017. 3. 16.

CCZ-CROSS 스킨 이미지 썸네일 출력

http://cocosoft.kr/375 에서 알게된 CCZ-CROSS 스킨을 적용하였습니다.

기본적으로 티스토리에 업로드 한 사진은 썸네일 출력이 되지만 웹상에 올린 이미지는 썸네일이 보이지 않아, main.js 파일을 수정하였습니다.

먼저 설정을 변경합니다.


var setting = {
  // ...
  extendThumb: true,  //썸네일 확장
  // ...
}

썸네일 확장을 true로 변경합니다.

이미치 추출을 위한 내용들을 추가합니다.


// 219 줄
var thumbObj = {  //이미지 추출을 위한
  //...
  regExr: {
    //...
    // 내용 추가
    img: /<img src=\"(.+?)\"/
  }
}; 

이미지 태그를 찾기 위한 정규표현식을 추가합니다.

이후 checkSort함수를 변경합니다.


// 253 줄
function checkSort(target, data) {
  // ...
  if (conData != "none") {
    // ...
    // 내용 추가
    var imgExr = thumbObj.regExr.img;
    // ...
    // 내용 추가
    var imgData = conData.match(imgExr) ? conData.match(imgExr)[0] : "none";
    if (imgData != "none") {        	
	  var src = imgExr.exec(imgData);			
      classTarget.prepend(stringPre+'<img src="'+src[1]+'" class="landscape">'+stringEnd);
      totalDefarticle.resolve();
      return;			
    }
  }
}

daumData 처리 부분을 참고하여 작성하였습니다.

파일 업로드

티스토리 관리 화면에서 HTML/CSS 편집을 선택합니다.

우측 상단의 파일업로드를 선택합니다.

파일

images/main.js 를 선택한 후에 삭제 합니다.

이후 수정한 main.js 파일을 업로드 합니다.

댓글