구글 블로그 다루기 #썸네일이 있는 글 목록

구글 블로그 다루기

구글 블로거에서는 별도로 글목록이 존재하지 않습니다만, 블로거의 템플릿(스킨)을 수정하면 제목만 있는 글 목록을 만들 수 있으며 썸네일이 있는 목록 또한 만들 수 있습니다.

먼저, 테스트용 블로그에 미리 작성된 게시물들입니다. 모든 게시물에는 이미지가 첨부되어있는 상태이며, 첫번째 게시물은 본문이 그대로 보여지는 게시물이고 나머지 게시물은 본문이 숨김처리되어진 게시물입니다.

첫번째 게시물만 본문이 보이는 이유는, 목록 상태에서 제목만 표시된 상태가 아니어도 잘 적용되는것을 확인하기 위함이니 신경쓰지 않으셔도 됩니다.

크롬을 기준으로, 키보드의 F12를 누르면 관리자 도구가 실행됩니다. 관리자 도구를 이용하여 현재 페이지의 HTML구조를 파악할 수 있습니다.

<div class="post-outer">
  <div class="post hentry uncustomized-post-template">
    <h3 class="post-title entry-title"> ... </h3>
    <div class="post-header"> ... </div>
    <div class="post-body"> ... </div>
    <div class="jump-link"> ... </div>
    <div class="post-footer"> ... </div>
  </div>
</div>

블로거의 본문은 위와 같은 구조로 되어있습니다.

본문(body-post)과 점프링크(jump-link)를 없애고, 그 대신 썸네일을 추가하는게 목적입니다.

템플릿 에디터에서 post-body를 검색합니다. 이때 상위에 있는 <b:includable> 태그의 아이디가 post인것에 주의합니다.

<div class='post-header'>와 <div class='post-body entry-content'> 사이에 코드를 추가합니다.

<div>
이미지 삽입
</div>

조금 성의없어 보이는 코드지만, 확인하는 역할로는 아무 문제 없습니다.

템플릿을 저장한 뒤 블로그를 보면, '이미지 삽입' 글자가 보이는걸 확인할 수 있습니다. 이 글자는 헤더보다 아래에, 본문보다 위에 위치해있습니다.

이제 저 성의없는 글자 대신 썸네일 이미지를 넣으면 되겠네요.

'이미지 삽입' 글자를 지우고, 코드를 추가합니다.

<img class='thumbnail' expr:src='data:post.firstImageUrl'/>

data:post.firstImageUrl는 본문의 첫번째 있는 이미지의 주소를 의미합니다.

템플릿을 저장한 뒤 블로그를 보면, '이미지 삽입' 글자가 있던 자리에 이미지가 있는걸 확인할 수 있습니다. 이 이미지는 항상 본문의 첫번째에 있는 이미지를 표시합니다.

그런데 첫번째 게시물처럼 본문이 그대로 드러나는 경우, 썸네일 이미지와 본문에 있는 이미지 2개가 출력되는 문제가 있습니다.

그뿐만 아니라, 하나의 게시물을 볼 때에도 썸네일이 표시되기 때문에 결과적으로 첫번째 이미지는 항상 2개씩 출력됩니다.

조건문을 활용하여, 목록 상태일 때는 썸네일을 출력하고 게시물 조회 상태일 때는 썸네일을 숨겨야겠습니다.

썸네일을 감싸고있는 <div>를 조건문으로 감쌉니다.

<b:if cond='data:blog.pageType != "item" and  data:blog.pageType != "static_page"'>
<div>
    <img class='thumbnail' expr:src='data:post.firstImageUrl'/>
</div>
</b:if>

조건문의 조건은 data:blog.pageType != "item" and data:blog.pageType != "static_page"입니다. 여기서 "는 쌍따옴표(")이므로, data:blog.pageType != "item" and data:blog.pageType != "static_page"가 되겠네요. 'data:blog.pageType가 item이 아니면서, static_page가 아니라면'이라는 의미입니다.

여기서 data:blog.pageType는 현재 화면 상태, item은 게시물 조회 상태, static_page는 페이지를 의미합니다. 즉, '현재 페이지 상태가 게시물 조회상태가 아니면서 페이지가 아니라면'이라는 의미가 되겠네요. 게시물 조회 상태가 아니면서 페이지가 아니라면, 게시물 목록 상태밖에 없습니다.

이제 게시물 조회 상태(오른쪽)에서는 썸네일이 안보이게 되었습니다.

다음은 썸네일에 링크를 걸어서, 이미지를 클릭하면 게시물 페이지로 이동하도록 코드를 추가합니다.

<b:if cond='data:blog.pageType != "item" and  data:blog.pageType != "static_page"'>
<div>
  <a expr:href='data:post.url'>
    <img class='thumbnail' expr:src='data:post.firstImageUrl'/>
  </a>
</div>
</b:if>

여기서 data:post.url는 게시물의 주소를 의미합니다.

마지막으로 썸네일만 감싸고있던 조건문을 살짝 수정합니다.<div class='post-body entry-content'>와 <div class='jump-link'>를 <b:else />로 감싸줍니다.

<b:else />는 조건문의 조건이 해당되지 않을 경우 적용되는 부분입니다. 현재 조건은 '현재 화면 상태가 게시물 조회 상태가 아니면서 페이지가 아니라면' 표시하는건데, '현재 페이지 상태가 게시물 조회 상태이거나 페이지라면' <b:else /> 내부의 코드가 실행됩니다.

좀 더 이해하기 쉽게 쓰자면
게시물 목록 상태일 때는 썸네일이 표시되지만 게시물 본문(body-post)과 점프링크(jump-link)는 표시되지 않습니다.
게시물 조회 상태이거나 페이지 상태인 경우 썸네일을 표시하지 않습니다.

템플릿을 저장한 뒤 블로그를 보면, 썸네일만 출력되고 게시물 본문과 점프링크는 표시되지 않는걸 확인할 수 있습니다. 이때 게시물 제목이나 썸네일을 클릭하면 게시물 조회 화면으로 이동할 수 있습니다.

게시물 조회 화면에서는 썸네일이 출력되지 않습니다.