6/01/2018

구글 블로거 다루기 #원본 이미지만 나오게 하기

구글 블로거 다루기
- 깃허브 링크

구글 블로거에 있는 남다른(?) 기능중 하나는 이미지를 크기별로 사용할 수 있다는것입니다. 하나의 이미지를 업로드하면 URL에 따라 자동으로 조절됩니다.

이처럼 작게-중간-크게-X라지-원본 크기로 구분됩니다.

이미지가 에디터의 크기보다 클 경우, 이렇게 크게 표시되기 때문에 게시물을 작성하는데 불편한 경우도 있습니다. 그래서 이미지를 작게 해놓고 게시물을 작성한 뒤, 깜빡하고 크기를 조절하지 않아서 한번 더 수정해야하는 경우도 있지요.

크기별로 출력된 이미지입니다.

이미지 최대 크기 조절하기가 적용되어있어서 본문 영역 밖으로 넘어가진 않았습니다.

이미지 URL을 보면 이미지의 크기에 대한 정보가 있습니다.

이미지 주소가 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm8W0h7nBW3vgdL2KnNHk4W77wN2yNG76MKR45pDNAWKGX1FFN1SDmUtasDZ3vkqBd54ZJQ6sGPLhuwRg8eN9Vu9fOlNADiRyk9qP37htOkyVST0Bm-j7ACbxJp7fE5zMQ11N70u89ypk/s200/img1.jpg 인데, 여기서 마지막의 파일명 앞에있는 s200이 크기입니다.

작게 : s200
중간 : s320
X라지 : s640
원본 크기 : s1600
실제 원본 : s0

'원본 크기'는 실제로 원본이 아니라, 원본에 가까운 고화질의 리사이징된 이미지입니다. s0으로 설정하면 말그대로 실제 원본이 출력됩니다.

이미지 주소에서 크기를 설정하는 부분을 모두 s0으로 변경하면, 모든 이미지가 원본으로 출력시킬 수 있습니다.

</body> 의 바로 위에 스크립트를 추가합니다.

<script>
//<![CDATA[
var postImg = document.querySelectorAll(".post-body img");

var newImg = new Array();
var imgSize = new Array();
var imgUrl = "";

for (var i = 0; i < postImg.length; i++) {
imgUrl = postImg[i].getAttribute("src");
imgSize = imgUrl.split("/");
newImg[i] = imgUrl.replace(imgSize[7], 's0');
postImg[i].setAttribute("src",  newImg[i]);
}
//]]>
</script>

이미지의 주소에서 크기를 설정하는 부분이 s0으로 변경된걸 확인할 수 있습니다.

이미지의 설정중 가로(width)와 세로(height)는 사실상 필요없는 설정이며, 원본 이미지 크기를 저장한 설정(data-original-width, data-original-height)도 지우고 싶어졌습니다.

속성을 제거하는 코드를 추가합니다.

postImg[i].removeAttribute("width");
postImg[i].removeAttribute("height");
postImg[i].removeAttribute("data-original-width");
postImg[i].removeAttribute("data-original-height");

이미지가 원본으로 출력되며 불필요한 설정도 없어졌습니다. 위에서 언급한 이미지 최대 크기 조절하기가 적용되어있어서 이미지가 본문크기 이상으로 커지지도 않습니다.

에디터에서 이미지 크기를 설정하지 않아도 항상 원본으로 출력되기 때문에 게시물 작성이 보다 용이해졌습니다.

게시물 수정
  1. 이미지 최대 크기 조절하기 코드는 잘 적용되는데 이건 같은 깔끔테마에 코드 그대로 복사해서 붙여넣어도 왜 안될까요. s1600 data-original-width, data-original-height 그대로 나오네요

    답글삭제
  2. 안녕하세요?
    방금 깔끔 테마로 테스트해보니 잘 되네요.

    크롬 기준으로 F12를 누른뒤 Console에 어느 메시지가 나오는지, 혹은 스크립트의 위치가 </body>의 바로 위가 아닌지 확인해보시기 바랍니다.

    답글삭제
  3. 익명2/01/2020

    음 테마 바꿔가면서 코드 적용해봐도 똑같이 s1600으로만 나오네요...

    답글삭제
    답글
    1. 안녕하세요? 방문해주셔서 감사합니다.

      본문에 있는 스크립트는 document.querySelectorAll(".post-body img") 를 기준으로 동작되므로, 사용하시는 테마에 따라 적용되지 않을 수 있습니다.

      적용되도록 변경하기 위해서는 본문 전체를 감싸고있는 HTML의 선택자를 알아야할 필요가 있습니다.

      삭제
  4. 익명2/10/2020

    안녕하세요! 덕분에 이미지 사이즈 변동 없이 편하게 이용하고 있습니다. 정말 감사합니다!
    그런데 만화같이 기다란 이미지는 업로딩 때 또다시 크기가 줄어들더라구요.. 이 부분은 어떻게 해봐야 할지 몰라서 질문 드립니다.ㅠㅠ 세로로 긴 이미지들이 줄어드는 크기는 연관성을 찾기도 어렵더라구요

    답글삭제
    답글
    1. 안녕하세요? 방문해주셔서 감사합니다.

      세로로된 페이지의 경우, 부모 요소의 세로 크기를 100%로 변경해주시면 될것 같습니다.


      <div class="container">
      <div class='imgSection'>
      <img src="[이미지 주소]">
      </div>
      </div>


      이렇게 구성된 경우, imeSection과 container 모두 height:100%; 로 주시면 됩니다.

      삭제
  5. 익명2/27/2020

    궁금한게 있는데요. 애드센스요. 블로그 개설하자마자 꼭 6개월이 지나고 나야 애드센스 가입이 되는건지요??

    아니면, 수익란에 애드센스 신청할 수 있습니다라는 말이 나와야 되는건지요?

    구글 블로그는 너무 정보가 없어서 질문을 해봅니다.

    답글삭제
    답글
    1. 가입은 언제든지 할 수 있습니다만, 애드센스를 심사를 받아서 허가를 받아야만 블로그에 광고를 부착할 수 있습니다.

      블로그 관리자 화면에서 수입 선택시 나오는 메뉴를 이용하여 가입 또는 애드센스 관리자 화면으로 이동할 수 있는데, 블로그는 구글 내부 서비스라서, 외부 서비스(대표적으로 티스토리)와 다르게 1차 심사를 패스할 수 있습니다.

      2차 심사는 블로그의 게시물과 내용에 대한 심사인데, 이 과정이 상당히 느리기 때문에 꽤 오래-_- 기다리셔야합니다. (최소 2주라고 하네요)

      계속해서 블로그를 관리하다보면 어느새 되어있을겁니다^^;

      삭제
  6. 익명2/28/2020

    https://www.clien.net/service/board/kin/14643111

    여기에다가도 질문을 올렸는데요.

    저는 가입할려고 하면, 계속 저 화면이 나옵니다.ㅠㅠ



    답글삭제
    답글
    1. 구글 블로거와 애드센스는 같은 채널(같은 구글 서비스)이기 때문에, 블로거 관리자 화면에서 수익-구글 애드센스 가입(또는 연동)을 선택하시면 됩니다.

      업로드하신 이미지에서 continune in blogspot 링크를 클릭하면 어떻게 되던가요?

      삭제
  7. 익명2/28/2020

    https://www.clien.net/service/board/kin/14642735

    혹시 이거 해결방법도 아시는지요???

    1번 페이지 다음에 2번으로 넘어가면 중복 게시글이 몇개 보이는 현상...

    너무 많이 물어봐서 정말 죄송합니다.

    컴퓨터 초보자에다, 네이버, 티스토리만 사용하다가 블로그스팟으로 넘어왔는데 많이 어렵습니다.

    답글삭제
    답글
    1. 사용하시는 페이지 네비게이션 스크립트의 문제로 보입니다.

      일단 페이지 네비게이션에서 화면에 표시할 게시물 갯수(perPage)와
      블로그 관리자에서 [ 설정 → 글, 댓글 및 공유 ]에서 표시할 게시물의 갯수(단위를 잘 보셔야합니다)가 일치한지 확인해보셔야할 것 같습니다.


      구글 블로거는 우리나라 블로그들과 다르게 기본적인것만 제공하고, 나머진 사용자가 전부 만들어 써야하다보니 다른 서비스형 블로그들에 비해서 좀 불친절하지요ㅠㅠ

      반대로 알면 알면알수록 별 해괴한것(?)까지 다 할 수 있다보니, 요즘엔 기업이나 단체 사이트로 사용하는 경우도 많더군요;

      삭제
  8. 혹시 이미지를 올리면 역순으로 올라가는데 그건 방법이 있을까요?

    답글삭제
    답글
    1. 안녕하세요? 방문해주셔서 감사합니다.

      이미지를 업로드할때, 컴퓨터에있는 파일을 선택하게되는데
      이걸 처음 파일을 클릭한 뒤, 쉬프트를 누른채 마지막 파일을 클릭해서 업로드해보시기 바랍니다.

      이런식의 파일을 업로드할때, 컴퓨터의 정렬 또는 선택된 순서를 따라가더라구요.

      삭제
  9. 댓글이 확인되지 않아 혹시나 싶어 다시 올립니다ㅠ
    현재 구글 블로그 s10(원본) 코드가 적용이 안되서 포스팅 페이지에서 이미지를 일일이 키워줘야 하는데
    기존 포스팅엔 적용이 잘 되는데 2주 전쯤부터 새롭게 업로드 하는 포스팅엔 적용이 안되더라구요ㅠ
    혹시 해결방법이 있나 댓글을 남겨 봅니다!

    답글삭제
    답글
    1. 최근에 Blogger에 올라가는 사진 주소가 blogger.googleusercontent.com로 변경되었습니다. 이제 이 글에 게재된 코드는 작동되지 않을 것입니다.
      간단히 새로운 코드를 작성해 드릴 수도 있지만 시간이 늦어 답변은 이 정도로만 끝내겠습니다.

      삭제
    2. 새 코드를 만들어 보았습니다. 다만 새 URL과 이전 URL이 혼재되어 있는 상황에서는 사용이 어려울 것 같습니다.
      <script>
      //<![CDATA[
      var postImg = document.querySelectorAll(".post-body img");

      var newImgSrc = new Array();
      var imgUrl = "";

      for (var i = 0; i < postImg.length; i++) {
      imgUrl = postImg[i].getAttribute("src");
      newImgSrc[i] = imgUrl.replace(/=s?\d+/g, '');
      postImg[i].setAttribute("src",  newImgSrc[i]);
      postImg[i].removeAttribute("width");
      postImg[i].removeAttribute("height");
      postImg[i].removeAttribute("data-original-width");
      postImg[i].removeAttribute("data-original-height");
      }
      //]]>
      </script>

      삭제
    3. 정말 감사합니다!! 제대로 잘 구동합니다!! 항상 도움 받고 갑니다❤❤❤

      삭제
  10. 안녕하세요 문제가 생겨 달려왔습니다ㅠㅠ 바로 위에 친절하게 댓글로 새로 만들어주신 s0 코드는 구글드라이브에서 가져온 ulr을 표시하지 못하는데 혹시 방법이 없을까요?ㅠㅠ구글드라이브 이미지는 make google drive path linkable 란 코드를 거쳐 사용하고 있습니다

    답글삭제
    답글
    1. 안녕하세요? 방문해주셔서 감사합니다.

      구글 블로거의 변경된 이미지 URL에 맞는 방식과 기존방식을 모두 사용하는 코드는 주말중으로 올릴 예정입니다.

      구글 드라이브에서 가져온 이미지는 css방식으로 제어하는게 맞을것 같습니다.
      css방식으로 제어하는건 본문 도중에 있는 이미지 최대 크기 조절하기입니다

      삭제
    2. 구글 블로거의 변경된 이미지 형식은 다음과 같습니다.
      https://blogger.googleusercontent.com/img/a/[긴 문자열]=[파라미터]
      파라미터 부분에는 이전과 그대로 s0, s1600 등을 넣을 수 있습니다.

      위의 코드는 정규식으로 이미지 링크의 =s1600 등을 감지해서 모두 삭제합니다. 이전처럼 원본 크기로 나오게 하려면, =s0을 적을 필요는 없습니다.

      삭제