[Github Blog] 썸네일 (Teaser) - 11

시작하면서…

추가적으로, 포스트에 썸네일을 추가하는 방법에 대해 알아봅시다 !

이전에 포스팅한 포스팅 글 생성과 연결되는 내용입니다.

썸네일(teaser) 폴더 추가

• 파일위치 : github.io 폴더 > assets 폴더 > teaser 폴더 (신규생성)

우선 썸네일을 저장하는 폴더의 추가가 필요합니다.
위 이미지와 같이 teaser 폴더를 생성하고, 썸네일로 지정할 이미지 파일을 추가합니다.

teaser 속성 지정

• 파일위치 : github.io 폴더 > _posts 폴더 > 포스트파일.md

header:
    teaser: "/assets/teaser/썸네일파일명"

이전 과정에서 생성한 포스트.md 파일의 속성에 위 코드를 추가하였습니다.
지정한 경로 및 파일명을 확인해주세요.

archive-single.html 수정

• 파일위치 : github.io 폴더 > _includes 폴더 > archive-single.html 파일

기본적으로 글 목록은 List 형식으로 출력됩니다.
하지만 archive-single.html에는 Grid 형식일때만, teaser를 출력하도록 설정되어있습니다.
이 부분을 수정하여 List 형식일때도 teaser를 출력하도록 설정하여, 썸네일이 글 목록에 출력되도록 설정합니다.

코드 수정 사항

코드를 변경하여, List 형식일때도 teaser를 목록에 출력하도록 설정하였습니다.

썸네일(teaser) 출력 확인

_archive.scss 수정

• 파일위치 : github.io 폴더 > _sass 폴더 > minimal-mistakes 폴더 > _archive.scss 파일

썸네일이 정상적으로 출력됩니다.
하지만 썸네일이 원본 크기에 따라 제각각의 크기로 출력됩니다.
개발자도구(F12)를 사용하여, 썸네일(teaser)을 살펴봅시다.

_archive.scss 파일의 94번째 줄에 너비를 조절하는 코드가 삽입되어있습니다.

.archive__item-teaser 
    img
        width: 100%;

여기서, img안의 width: 100%; 코드를 width: 500px; 와 같이 원하는 수치를 기입해 너비를 지정해줍니다.

• max-width: 최대 너비
• min-width: 최소 너비
• width: 너비 지정
• scale: % 로 이미지 스케일 조정

출력 확인

원하는 크기에 맞게 조절된 썸네일이 출력된다면 수정한 코드가 정상적으로 작동한다는 것입니다.
이제 수정한 코드를 Github에 배포하고 마무리하겠습니다.