코알못도 가능한 썸네일 이미지 프레임 비율에 맞게 자동 조정하기 (티스토리 포스터 스킨)

네버엔딩 썸네일 사이즈 조정 스토리... 

 

이거 변경한 후에 안 사실인데 모바일의 경우 사이즈 변경이 또 있더라...?

차근차근 합시당 차근차근 ㅠㅠ

 

 

오늘의 포스팅은 썸네일 이미지를 프레임 비율에 맞게 자동 조정하는 방법을 공유한다.

 

생각보다 쉬우니 나와 같은 고민이 있는 사람이라면 따라오세용 :)

 

 

썸네일 이미지, 자동 비율 조정

이전 포스팅에서 알 수 있듯이 나는 썸네일 이미지를 621x471px 로 맞춰서 제작했는데 그 이유는 포스터 스킨 기본 설정이 그렇게 되있었고, 이렇게 사이즈 비율에 맞게 조절하는 걸 시도하다가 계속 실패해서 그냥 내가 맞춰버린 결과였다.

 

 

자세한 이야기는 아래 포스팅 참조

 

썸네일 사이즈 변경 실패로 주어진 사이즈로 썸네일 제작함 🔻

[티스토리] (왕초보 맞춤용) Poster 스킨 썸네일 제작 및 스킨 썸네일 사이즈 찾아 맞추기

 

그 이후 썸네일 사이즈 조정 실패 스토리 🔻

 

[티스토리] 포스터 스킨 html 수정 - 글 리스트형 썸네일 사이즈 조정

 

 

 

아무튼 그래서 포스터 스킨 홈 화면을 꾸미려고 하다보니 아래와 같은 불상사 발생 ㅠㅠ 

이래하면 저게 문제고 저래하면 이게 문제고.. 어렵다 어려워~

 

 

 

 

 

1. 썸네일이 들어가는 위치 찾기

첫번째로 해야할 일은 이 말썽을 부리는 썸네일들이 들어가 있는 부분이 어딘지를 찾아야한다. 

본인의 블로그 홈으로 들어가서 마우스 오른쪽 클릭 -> Inspect 를 누르면 아래와 같은 화면이 나온다. 거기서 마우스로 코드들을 클릭하면서 왔다갔다 하면 이렇게 초록색으로 어딘가가 선택이 되는 걸 볼 수 있는데, 내가 선택한 코드가 어느 부분인지 시각적으로 보여주는 기능이다. 

 

 

 

티스토리 기본 스킨 중 하나인 포스터 POSTER 스킨의 경우에는 갤러리형은 <div class="cover-gallery">, 리스트형은 <div class="cover-list"> 에서 찾을 수 있다. 

 

여기서 내 이미지 프레임 사이즈를 기억해둔다. 이 경우엔 600x600이다. 

 

 

 

 

 

---

 

 

 

 

2. html 편집

아래처럼 갤러리형 리스트형 모두 스킨편집 -> html 편집에서 변경할 수 있다. 

 

 

 

 

html 편집에서 HTML 탭을 누르고 Ctrl+F로 600x600을 검색해준다.

내 경우에는 리스트형을 편집했는데, "cover-list"라는 코드를 확인하면 알 수 있다. 갤러리의 경우에는 "cover-gallery"로 뜬다. 

 

 

 

여기서 잠깐, 아래 썸네일 치환자를 참고하자. 이 포스팅에서는 "비율에 맞춤"을 원하기 때문에 R을 사용할거다. 지금 현재 포스터 스킨은 기본으로 C를 사용하고 있어 썸네일이 짤려보이는 이유다. 

 

<썸네일 치환자>
C (Crop) - 원본 이미지 비율 유지, 지정된 사이즈 외의 부분은 잘라냄.
P (Portrait) - 지정된 사이즈 안에 원본 이미지가 들어오도록 비율 자동 조절. 여백은 흰색으로 채움.
R (Resize) - 원본 이미지 비율과 관계 없이 사이즈에 맞춤. 비율이 안 맞으면 이미지의 distortion 생김.
S (Snapshot) - C과 같은 기능. GIF 파일의 경우 이미지를 집어 썸네일로 사용하는 특수 기능. 

 

 

 

 

이렇게 갤러리형도 바꿔주면 된다.

 

결론적으로 나는 나중에 썸네일을 정사각형으로 변경해서 다시 만들었다. 생각해보니 결국 나중에는 정사각형이 더 활용도가 높을 것 같아서... 글을 더 쓰기전에 바꾸자는 마인드로 빠르게 변경함. 

 

 

홈 화면 편집하려다 정사각형 썸네일로 전부 변경한 썰 🔻

티스토리 포스터 Poster 스킨 편집 - 블로그 홈 꾸미기

 

 

이렇게 하고도 여전히 봉착하는 많은 문제들 ㅠㅠ 내 글은 언제 올리나...

 

블로거들 다들 화이팅입니다!