Translate

2018년 6월 22일 금요일

[Blogger / Blogspot / 구글 블로그] 사진, 동영상 크기 관련 팁

  오후 9:17    

1. 사진 여러 장 업로드 시 일괄 크기 지정법





기본적으로 글쓰기 탭에서 사진을 여러 장 삽입할 경우,
별 중간과정 없이 그대로, 그것도 Blogger 기준 '크게' 사이즈로 삽입되기 때문에
그 크기를 바라지 않을 경우 일일히 노가다를 하는 수밖에 없다.

그런데 사실 Blogger에는 이를 보완할 기능이 있다.

바로 글쓰기 옆의 HTML 탭으로 변경 후 사진을 여러 장 삽입해보면,
아까와는 달리 이런 창이 등장한다.




딱 보면 알겠지만, 사진들을 일괄처리할 수 있는 기능이다.

추측으로는 만들었다가 현재 글쓰기 메뉴에 적용을 실수로 안한 게 아닐까 생각한다.



2. 동영상 크기 변경법

Blogger에서 제공하는 기능으로 개인 동영상을 올리든, 유튜브 동영상을 올리든
공통적으로 크기가 너무 작다.

html 값을 보면 희한하게도 크기를 320 * 266 으로 딱 고정해놓았다.

CSS 추가로 강제로 이 기본값을 바꿀 수 있다.


Blogger에서 테마 - 맞춤설정을 선택,
고급 탭에서 맨 아래의 CSS추가를 선택한다.
(간혹 외부 템플릿을 적용한 경우는 너비 조정 탭에서 나온다.)


그리고 아래 소스를 입력한다.


.b-hbp-video, .YOUTUBE-iframe-video
{
  width: 90%;
  height: 56vh;
}

간단히 설명하자면 b-hbp-video 와 YOUTUBE-iframe-video라는 클래스(각각 업로드 동영상, 유튜브 동영상)의 크기를 조정하는 것인데,

가로는 포스트창 기준으로 %가 적용되지만,
세로는 기준이 뭔지 %는 이상한 결과가 나오고
그 대신 vh라는 브라우저 높이값에 비례하는 값을 썼다.
이게 모바일에서도 제일 무난하게 나오는 것 같다.

위 값대로 하면 이 정도 사이즈가 되고,




만약 변경하고 싶다면 F12를 누르면 나오는 개발자모드에서 미리보기를 할 수 있다.
왼쪽 상단에 커서 버튼을 클릭하고 동영상을 누르면 해당 태그를 쉽게 찾을 수 있다.
(선택한 채로 위, 아래 방향키로 값 조정이 가능하다.)


계속 느끼는 지만, Blogger는 html 지식이 없는 사용자에게는 상당히 불편한 플랫폼인 것 같다.

   / /

   댓글 4개:

2018년 6월 10일 일요일

[Blogspot / Blogger / 구글 블로그] 외부 템플릿 불러오기 시 Google+ 댓글이 나오지 않는 현상 해결

  오후 4:53    

대부분의 외부 템플릿이 기본적으로 Blogger 자체의 댓글이 보이도록 되어있는데,
댓글을 Google+로 변환 시 아예 다른 api를 사용하게 되는 모양인지 댓글이 전부 없어져 버리는 현상이 발생한다. 

다시 제공 템플릿으로 돌아오면 보이는 걸 보면 제공 템플릿에는 자동적으로 소스가 변경되도록 어떤 장치가 되어있는 것 같은데, 그게 뭔지는 잘 이해를 못했다.

어쨌든 변경해야 할 부분은 댓글 수 부분과 댓글이 보이는 부분이다.


테마 HTML 편집을 보면 다음과 같은 부분이 두 군데 있다. (showThreadedComments 를 검색)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:if cond='data:post.showThreadedComments'>
 <b:include data='post' name='threaded_comments'/>
  <b:else/>
 <b:include data='post' name='comments'/>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.showThreadedComments'>
 <b:include data='post' name='threaded_comments'/>
  <b:else/>
 <b:include data='post' name='comments'/>
  </b:if>
</b:if>


그 두 부분을 모두 이렇게 변경한다.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>


이러면 댓글을 보이게 하는데까진 성공이나,
아직 댓글 수는 Blogger 댓글 수로 나오기 때문에 바뀌지 않은 상태일 것이다.


이 부분도 역시 HTML 편집에서 comment_count_picker를 검색하고, 해당 태그를 아래와 같이 변경한다. (만약에 없다면, comment_picker 등 유사한 이름을 찾아보거나 새로 만들면 된다.)

<b:includable id='comment_count_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
    </span>
  <b:else/>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <data:post.commentLabelFull/>:
    </a>
  </b:if>
</b:includable>


그리고 댓글 수가 나오는 부분을 찾는다.
보통 다음과 같은 구성이다. (post-comment-link를 검색)

<span class='post-comment-link'>
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                    <b:if cond='data:post.allowComments'>
                      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
                    </b:if>
                  </b:if>
                </b:if>
</span>


이것을 아래와 같이 바꾼다. (아까 작성한 comment_count_picker를 사용하는 걸 볼 수 있다.)


<span class='post-comment-link'>
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                    <b:if cond='data:post.allowComments'>
                      <b:include data='post' name='comment_count_picker'/>
                    </b:if>
                  </b:if>
                </b:if>
</span>


다만 제공해주는 api를 이용하는 것이기 때문에 디자인은 기본 템플릿에서 벗어날 수 있다.
이 부분은 css등을 이용하여 조정해주면 되고,
그게 싫다면 Google+ 댓글을 안쓰거나 제공 템플릿을 쓰는 수밖에...

주의사항은, Blogger 댓글을 사용하다가 Google+ 댓글로 전환하고 이 방법을 썼을 경우
보이는 데는 문제가 없으나, 왜인지 댓글 수가 2배로 나오고 뭔가가 별개로 구분되어 버리는 건지 삭제 등의 작업을 할 수 없게 된다.

결국 둘 다 기능 문제 없이 사용하고 싶다면 제공 템플릿을 쓸 수밖에 없고,
혹은 처음부터 Google+ 댓글을 쓸건지 말건지를 확실히 하는 것 같다.



참고 사이트:

댓글 보이게 하기:

댓글 수:

   / /

   댓글 없음:

2018년 6월 7일 목요일

피드 구독하기: 글 (Atom)