구글 블로그 기본 템플릿에서 우선 수정할 사항 : 인기글 위젯 요약문 글자수, 사진크기, 빈 사진 띄우기 등

여는 글

구글 블로그를 운영하는 동안, 초기에는 상용 템플릿의 무료버전을 사용하다가, 잠겨있는 기능으로 인해 한계를 느끼고 구글블로그에서 제공하는 무료 템플릿으로 변경했습니다.

 

무료 템플릿으로 바꾸니, 개별 스타일링 가능한 점, 사진 누르면 확대된 사진창이 뜨는 점 등 개선된 점도 많았지만 당연히 지원되어야 생각했으나 없는 부분들도 꽤나 있었습니다.

 

그 중 하나가 최근글/인기글 등 위젯에서의 빈칸 표기 기능, 그리고 요약문의 길이 조정 기능이었는데요.

 

인기글 위젯이 맘에 안든다

 

 

이해를 돕기위해 사진을 첨부해보았습니다. 이러한 인기글 위젯에 있는 각각의 소개글을 스니펫(Snippet)이라고 부르는데요. 위 사진에는 상단 스니펫, 하단 스니펫의 2개가 있는 상태입니다.

 

사진 속 2개의 스니펫 중, 상단 스니펫은 그림에 비해 글이 너무 많다보니 그림 밑으로 길이 내려와서 보기가 안 좋습니다. 이런 경우, 다른 스니펫과 차지하는 높이가 달라서 위젯의 모양을 어그러뜨리게 됩니다.

 

하단 스니펫의 경우에는 그림이 없다보니 문제가 발생했습니다. 보시다시피 그림이 없는 경우에는 자동으로 빈 그림을 넣어주지 않고 좌측으로 글이 정렬되어 전체적인 통일감을 해칩니다. 그림을 매번 넣기는 어려우니, 빈 그림 혹은 대표 이미지를 설정해주는것이 좋을 것 같네요.

 

참고로 구글블로그에서의 스니펫은 본문 스니펫(body snippet)과 위젯 스니펫(snippet snippet)의 2종류로 나뉘는 듯 합니다. 본인이 수정할 부분에 해당하는 snippet을 정확하게 확인하 후 접근하도록 주의하시기 바랍니다. 저는 위젯용 스니펫이 아닌 본문 스니펫을 수정하는 바람에, 스타일이 반영이 안되는 상황으로 인해서 원인을 찾느라 시간을 엄청 잡아먹었습니다.

 

어디를 어떻게 수정할 것인가?

우선 최종적으로 수정 완료한 코드는 아래와 같습니다.

 

수정 완료 코드

<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 100, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>                    
                  </b:with>
                </a>
              </div>
            <b:else/>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                	<img alt='' border='0' height='100' src='이미지경로' width='100'/>                    
                </a>            
              </div>  
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'> &#9632; <b:eval expr='data:post.snippet snippet {length: 85, linebreaks: true}'/>
              </div>
            </b:if>

 

 

수정할 위치 찾기

제 경우 위젯의 클래스명은 'widget-content popular-posts'였는데, 인기글에 있다는 점과 snippet이 사용되었다는 점에 착안하여 검색해보니 생각보다 금방 찾을 수 있었습니다.

 

문제는 snippet 위젯에 대한 옵션이 존재하는 경우, 아래와 같이 코드가 if문으로 3줄로 나뉘어 헷갈리게 됩니다.

• No snippet/thumbnail (요약 및 썸네일 사용안함)
• Show only snippets (요약만 보여줌)
• Show only thumbnails or Snippets and thumbnails (썸네일 사용 + 요약 보여주든지 말든지)

그러다보니 위 내용 중 어디를 수정해야 하는지 직관적으로 알기 어렵더군요.

본인이 테마 수정시 어떤 옵션을 주었는지 다시 한 번 확인해보고 오거나, 아니면 고민할 필요없이 모든 data:post.snippet 부분을 바꿔주시면 되겠습니다.

 

바꿀 내용

snippet의 길이조정

제 경우에는 본래 snippet 자리에 <data:post.snippet/> 가 기재되어 있었는데, 해당 부분을 아래 코드를 대체하였습니다. 여기서 length를 수정하면 요약문의 길이를 줄일 수 있습니다.

<b:eval expr='data:post.snippet snippet {length: 85, linebreaks: true}'/>

 

 

사진 크기 조정하기

<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
    <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
        <div class='item-thumbnail'>
            <a expr:href='data:post.href' target='_blank'>
                <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 100, &quot;1:1&quot;)

발췌해 온 위 코드 중, 최하단 코드의 '100'이 이미지의 크기입니다. 적절히 가감하면서 본인 사이트에 맞는 크기를 찾아가 보시는게 좋을 것 같네요. 너무 큰 숫자는 스니펫이 자기 영역 밖으로 넘치는 원인이되므로 주의가 필요합니다.

 

 

사진 존재여부와 관계없이 이미지 박스 넣기

참고로 위 코드에는 "(3) Show only thumbnails or (4) Snippets and thumbnails." 부분 아래에 b:if와 b:else, /b:if 가 존재하는 것을 볼 수 있는데요. 원래는 b:else는 이 내용에 없었습니다.

 

글의 대표이미지가 없는 경우는 이미지 파트는 무시하고 넘어가는 구조라서 else 구조가 없었던 것인데, 제가 그러한 맥락을 이해하지 못해서 한참을 헤맸습니다.

 

else를 추가하고 상단에 있던 태그를 긁어와서, 제 프로필 이미지 주소를 입력해주자 비로소 정상적으로 작동하였습니다. 이렇게 이미지 삽입을 위해 수정한 부분만 발췌하면 아래와 같습니다.

(구글블로그 프로필 이미지의 원천 주소를 긁어오는 방법이 있을 것 같은데 data:photo.url 같은 내부 개체를 아무리 넣어봐도 안되어 그냥 이미지 주소를 긁어다 썼습니다. 프로필 사진을 링크로 첨부하실 분께서는 참고하시기 바랍니다.)

            <b:else/>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                	<img alt='' border='0' height='100' src='이미지경로' width='100'/>                    
                </a>            
              </div>