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

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

구글 블로거에 있는 남다른(?) 기능중 하나는 이미지를 크기별로 사용할 수 있다는것입니다. 하나의 이미지를 업로드하면 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");

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

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