나는 블로그에 주로 알고리즘 문제 푼 것을 기록하기 때문에 거의 대부분의 포스팅에 썸네일이 없다.
나는 티스토리 블로그 스킨으로 "Square"를 사용하는데 이 스킨만 그런건진 잘 모르겠지만 썸네일이 없을 시 아래 캡쳐본과 같이 푸짐하게 생긴 곰돌이가 나온다.
그래서 썸네일이 없다면 내가 설정한 기본 이미지들로 표시되도록 자바스크립트를 사용하여 스킨을 편집했다.
아래는 편집 후의 모습이다.
방법은 아래와 같다.
1. 원하는 무료 이미지 구하기
저작권 없는 무료 이미지 배포 사이트인 픽사베이에서 원하는 이미지를 다운로드 받도록 하자.
2. 블로그 스킨 편집으로 들어오기
블로그 관리 페이지 좌측 메뉴에서 "꾸미기 > 스킨 편집" 을 눌러 스킨 편집 페이지로 들어온 후 우측의 스킨 미리보기 사진 밑의 html 편집 버튼을 누른다.
3. 파일 업로드 하기
html편집 페이지로 들어오면 우측에 HTML / CSS / 파일업로드 이렇게 세 개로 메뉴가 나뉘어 있다.
여기서 파일 업로드 탭으로 들어가 1번에서 다운받은 파일들을 업로드한다. 이 때, 이후에 HTML 편집하면서 이 파일 이름들을 입력해야 하므로 파일 이름은 간결하게 하는 것이 좋다. 나의 경우는 custom1, custom2 ... 등등으로 파일 이름을 설정하고 업로드했다. 파일의 수는 Recent posts에 표시되는 포스트 수보다 크거나 같도록 한다.
파일을 업로드 하면 파일 목록에 "images/custom1.jpg" 와 같은 이름으로 추가된 것을 볼 수 있다.
4. HTML 편집
우리가 업로드한 파일은 티스토리 CDN 서버에 저장된다. 우리가 업로드한 이미지에 접근하기 위해선 이 CDN 주소가 필요한데, CDN 주소는 파일 업로드 탭에서 우리가 업로드한 이미지를 우클릭해서 "링크 주소 복사"를 눌러서 주소를 확인 할 수 있다.
주소는 "https://tistory2.daumcdn.net/tistory/0000000/skin/images/custom5.jpg" 이러한 구조로 이루어져 있는데, 여기서 문제는 주소에서 빨간색으로 표시한 부분이다. 티스토리 측에서 CDN 서버로 4개의 서버를 운영하고 있는지 링크 주소를 확인할 때마다 tistory1 ~ tistory4 로 CDN주소 값이 계속 바뀌는걸 확인했다.
우리는 자바스크립트를 이용해서 현재 썸네일이 있는지 없는지 확인 후 HTML을 편집해줘야 하고 자바스크립트는 클라이언트 단에서 수행되므로 클라이언트가 내가 썸네일로 쓰고자 하는 이미지의 CDN주소를 알고 있던지 아니면 클라이언트에게 이미지를 미리 보내줘야 한다.
CDN 주소는 가변주소이므로 사용이 힘들어보이고 그럼 상대 주소로 이미지에 접근할 수 있는 지금 미리 클라이언트에게 이미지를 전송해주자. HTML 탭에서 HTML문서의 body안에 이미지 태그를 추가했다. 이미지 태그의 소스 속성값을 src="./images/{내가 업로드한 파일 이름}"로 설정하여 클라이언트에게 이미지를 전송하고 부모 태그의 스타일에 display: none을 주어서 화면에 표시되지 않도록 했다.
코드는 아래와 같다. body안에 어디에 들어가던지 상관없다. 잘 모르겠다면 그냥 body 태그 바로 밑에 넣어주자.
<body>
<!-- 아랫줄부터 복사 -->
<div style="display: none">
<img id="trick" src="./images/custom1.jpg" alt="post image" />
<img id="trick" src="./images/custom2.jpg" alt="post image" />
<img id="trick" src="./images/custom3.jpg" alt="post image" />
<img id="trick" src="./images/custom4.jpg" alt="post image" />
<img id="trick" src="./images/custom5.jpg" alt="post image" />
<img id="trick" src="./images/custom6.jpg" alt="post image" />
<img id="trick" src="./images/custom7.jpg" alt="post image" />
<img id="trick" src="./images/custom8.jpg" alt="post image" />
</div>
<!-- 윗줄까지 복사 -->
...
</body>
5. Javascript 추가
HTML의 body 태그 안에 이미지 태그로 보이지 않는 이미지를 클라이언트에게 전송했고 이제 클라이언트는 이 이미지를 잘 이용하면 된다.
HTML 제일 아랫 부분에 body 태그가 닫히기 직전(</body> 위쪽)에 아래와 같은 자바스크립트 코드를 추가했다. body 태그가 끝나기 직전에 위치해야 우리가 수정하고자 하는 Recent posts 부분이 로드가 된 후에 자바스크립트를 수행할 수 있다.
<body>
...
<!-- 아랫줄부터 복사 -->
<script>
const imgs = $("#recent-post img");
const trick_obj = document.querySelectorAll("#trick");
let used = [] ;
let frame = 0;
const max_frame = 100;
for (let i = 0; i < trick_obj.length; i++){
used.push(false);
}
used.push(true);
for (let i = 0 ; i < imgs.length; i++) {
const img = imgs[i];
if (img.src.slice(8, 11) != 'img'){
let random_idx = trick_obj.length;
while (used[random_idx] && frame < max_frame) {
random_idx = Math.floor(Math.random() * trick_obj.length);
frame++;
}
if (frame < max_frame) {
img.src = trick_obj[random_idx].src;
used[random_idx] = true;
}
frame = 0;
}
}
</script>
<!-- 윗줄까지 복사 -->
</body>만약 다른 스킨을 사용하고 있다면 imgs의 셀랙터를 직접 찾아서 수정해줘야 한다.
6. 적용 및 확인
이제 우측 상단의 적용 버튼을 누르고 블로그로 가서 확인해보자. Recent posts 부분에서 썸네일이 없는 포스트에 한해서 겹치는 그림 없이 내가 설정한 그림들로 랜덤하게 나온다면 성공이다.
마치며
아직 웹 프로그래밍 초보입니다. 이상한 부분이나 더 나은 방법이 있다면 알려주시면 감사하겠습니다.
'프로젝트 > 웹' 카테고리의 다른 글
| [포트폴리오 스프링 프로젝트] 0. 시작 (0) | 2022.05.16 |
|---|---|
| JSP로 만든 간단한 게시판 (3) | 2020.10.20 |