사진 출처 일괄 적용 블로그팁

사진 출처 남기고 싶을 때


사진 출처를 일괄적으로 적용 시키고 싶을 때가 있을겁니다. 제 경우에는 가능한 원본에 가까운 이미지를 보여주기 위해서 포토샵에서 색체를 조절하거나 하진 않습니다. 그냥 리사이즈만 하고 명암을 조절하는 정도로만 끝내죠. 사진 출처를 나타내기 위해 포토샵에서 출처모양의 아이콘이나 글자를 브러쉬로 만들어서 한번 콕 찍어주면 사진 출처를 나타낼 수 있습니다. 다만 이 작업도 번거로울 때가 있죠. 그냥 사진을 올린 상태에서 사진에 출처 이미지가 나타나도록 하는걸 생각해봤습니다. 처음에는 이미지 위에다가 다시 특별한 형태의 투명이지가 합쳐져서 나타나게 하는걸 생각해봤다가 생각보다 구현이 어렵더군요. 그래서 그림 하단에 일괄적으로 출처가 나타나게 해봤습니다. 제 블로그에 모든 그림의 하단에 출처가 나타날겁니다. 게다가 제 글을 무단을 그냥 긁어서 다른곳에 올리면 해당 출처를 나타내는 부분도 함께 나타나게 됩니다.

	 ajax, blogtip, It, jquery, 블로그 팁, 블로그팁, 사진, 사진 출처, 자바스크립트, 제이쿼리, 출처, 팁


위에 올린 이미지는 제가 제컴퓨터를 눕혀놓고 찍어본 사진입니다. 그냥 사진을 제 본문폭에 맞게 730px로 리사이즈만 해서 블로그에 올린 이미지 입니다. 그런데 하단에 블랙바가 생기고 오른쪽 끝에는 "씨디맨의 컴퓨터 이야기 http://cdmanii.com" 이라는 이미지 글자가 보일겁니다. 그림 하단에 CSS 를 이용해서 일괄적으로 출처를 표기한것이죠.

처음에는 본문에 있는 이미지에 일괄적으로 CSS 를 적용했었습니다. 그런데 문제가 있더군요. 작은 이미지에도 모두 해당 CSS 가 적용되어서 다운로드 이미지나 작은 아이콘에도 검은바가 나타나서 지저분해지더군요. 그래서 조금 더 생각을 해서 일정 사이즈보다 클때만 CSS 를 적용하도록 JQuery 를 짜봤습니다. 그렇게 해서 폭은 730px 이상 높이는 300px 이상일 때 본문의 이미지에 CSS 가 적용되어서 출처가 보이도록 수정을 해봤습니다.


본문의 일정 크기 이미지에 출처 서식 적용하기


<head>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">
 //<![CDATA[
 $(document).ready(function()
 {
$(".article img").each(function() {

            var width_length = 700;
            var height_length = 300;

            var img = new Image();
            img.src = $(this).attr("src");

            if((img.width >= width_length) && (img.height >= height_length)) {

                $(this).css('background','url(./images/imgrightbg.gif) no-repeat scroll right bottom #111111');
                $(this).css('padding-bottom','17px');
            }
        });
    });
 //]]>
</script>

</head>


제가 적용한 코드입니다. 아시는 분은 바로 아시겠지만 조금 설명을 해보죠. jQuery 를 이용해서 본문의 img 를 각각 불러와서 계속 반복해서 적용을 합니다. 이미지의 사이즈가 폭 700 높이 300 이 넘을 겨우 조건에 맞기에 하단 부분이 적용이 되어서 각 이미지 엘리먼트에 CSS 를 반복 적용합니다. 백그라운드를 적용하고 하단 부분에 padding 를 둬서 블랙바가 보이도록 합니다.


그림 출처 일괄 적용의 단점


본문의 그림에 일정 크기 이상일때 일괄적으로 서식을 적용시켜서 출처를 나타내기에 예전에 올려뒀던 그림이던 최근에 올렸던 그림이던 모든 그림에 모두 일괄로 서식을 나타내는 부분이 적용 되므로 모든 그림의 서식표기를 일괄적으로 관리가 가능합니다. 나중에 서식모양이 맘에 안들경우 jQuery 의 CSS 적용 부분만 조금 손보면 다시 다른 모양으로 적용이 가능해서 관리가 편합니다.

단, 단점이라면 블로그에 자신이 올린글만 있을 경우에 유효합니다. 그림을 구분할 수 있는 코드는 없기에 다른 사람의 이미지도 자주 올리는 분들이라면, 적용하면 그림에는 다른분것이라고 설명해놓고는 하단에는 자신의 것이라고 서식이 붙을 수 있겠죠.

저는 제 블로그에 제가 직접 찍은 이미지만 올리고 있기에 큰 문제는 안되리라고 생각해서 일괄로 적용해봤습니다. 이렇게 하면 혹시라도 제 이미지를 제가 허락하는 라이센스 하에서 이미지를 가져가더라도 그림 자체에 출처 표기 등의 이미지 로고가 없으니 자유롭게 쓸 수 있겠죠. 저는 제 이미지 1개는 허락없이 제 블로그 출처를 남기는 조건으로 쓸 수 있게 해뒀습니다.

그동안 궁금해하셨을 분들 자신의 블로그에도 적용하기 적당하다면 적용을 시켜보시기 바랍니다. 어려워서 직접 하기 어렵다면 부탁하시면 제가 대신 해드릴 수 는 있습니다. 참고하시기 바랍니다.

신고

이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

:)   :(   --;   :D   :O   :x   r:r   g;g   i;t   s;s

     이미지 업로드  [무료이미지 업로드 방법 설명]

  1. 하얀공 2011.03.12 01:30 신고

    유후~

    perm. |  mod/del. |  reply.
  2. 라이너스 2011.03.12 07:58 신고

    오오~ 정말 편리한 기능인걸요^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2011.03.12 10:01 신고

      이걸 조금만 더 응용하면 신기한걸 할 수 있어요 ㅋ 댓글창이 날라다니게 할수도 있을테고, 오른쪽 클릭 눌렀을때 댓글부터 입력하라고 띄우고 이동시킬 수 도 있을테고.. 다양해요 ㅋ

      perm. |  mod/del. |  reply.
  3. ThinkingPig 2011.03.12 08:00 신고

    이런 방법도 있었군요...
    제 블로그에는 제 사진이 별로 없어서요 ㅜㅜ

    perm. |  mod/del. |  reply.
  4. kkolzzi 2011.03.12 09:29 신고

    씨디맨님! 올만이죠^^

    저같은 경우는 블로그에 사진을 자주 올려서 꼭 필요하고 도움이 되는 포스팅임에도 불구하고 외계어라 어쩔? ㅠ.ㅠ)

    즐거운 주말 되세요!!

    perm. |  mod/del. |  reply.
  5. 빌더종규 2011.03.12 16:53 신고

    좋은 글 감사합니다..

    씨디맨님 주말 잘 보내세요..

    님 유투브 팁 정말 좋았음..

    perm. |  mod/del. |  reply.
  6. dorulog 2011.03.12 19:55 신고

    좋은글 잘 보고 갑니다.

    적용해보려다가 질문이 생겨서 이렇게 글을 남깁니다.

    저걸 티스토리에 적용하려면 html의 head 사이에 넣으면 되는지요?

    그리고 출처 이미지는 mgrightbg.gif로 만드면 되는건가요?

    제 블로그에 적용해보려 했는데.. 생각보다 어렵네요 ㅠㅠ

    perm. |  mod/del. |  reply.
    • 씨디맨 2011.03.12 20:35 신고

      head 사이에 넣으시면 되구요.

      url(./images/imgrightbg.gif)

      이부분이 출처 이미지 부분입니다. 당연 마음껏 만들어서 경로만 잘 걸어주시면 나타나게 됩니다.

      이미지는 스킨에 그냥 올리시면 되구요. ^^

      perm. |  mod/del. |  reply.
  7. 소춘풍 2011.03.13 09:35 신고

    요즘 무단으로 복사해서 가지고는 사람이 넘 많아서,
    아주 골치가 아프답니다. 또 네이버 신고했잖아요.
    아오~~ 사진은 그래도, 뭐 백번 생각해볼 수 있겠지만,
    글을 다 복사하는 건 아오..
    막을수 있는 방법 없어요? 네이버 처럼 ~ ㅠㅠ

    perm. |  mod/del. |  reply.
  8. 노펫 2011.03.13 13:29 신고

    좋은 기능인데요, 저는 저 밑에 라이너스님에게 말하신 응용버젼으로 말씀하신 내용들이 마음에 드는데 이해는 안가네요...-.-

    포스팅 하단부에 살짝 힌트를 넣어주시면......^^*

    노펫:D

    perm. |  mod/del. |  reply.
  9. 파크야 2011.03.14 00:38 신고

    헉... 전설의 TIP을 공개하셨군요 ㅠㅠ

    많은분들에게 정말 엄청난 정보가 될것같습니다 ㅎㅎ

    시디맨님 말씀을 참고해서 블로그를 나눠서 키우려고합니다.

    정보 따로 수익형 따로 ㅎㅎ

    다시 시작되는 한주 화이팅하세요^^ 요새 넘 바뻐서 자주 못들려서 죄송합니다 ㅋ

    perm. |  mod/del. |  reply.
  10. 윈컴이 2011.03.19 13:01 신고

    예전에 사진에 모두 적용을 해놓아서 아직은 귀찮고, 나중에 한번 해보아야 겠네요 :)

    perm. |  mod/del. |  reply.
  11. 이름이동기 2011.12.05 02:46 신고

    무단으로 퍼가도 출처가 남는것은 정말 좋은 방법이네요 ^^

    perm. |  mod/del. |  reply.
  12. 기삼 2011.12.09 09:58 신고

    크롬에서는 검은 바가 보이지 않아요. 좋은 아이디어이기는 합니다.:x

    perm. |  mod/del. |  reply.
  13. the nexus 2013.02.23 12:50 신고

    씨디맨님 이번에 블로그에 올릴사진이 100장이넘습니다 이거 적용좀시켜주시면안될까요? ㅠㅠ

    perm. |  mod/del. |  reply.
  14. Ariy 2013.09.17 19:10 신고

    우와... 노가다로 설정하던 저에게는 엄청난 정보군요 감사합니다.

    perm. |  mod/del. |  reply.
  15. Ariy 2013.09.20 00:00 신고

    모바일에서 pc버전으로 위방법대로 적용한것을 봤더니 제블로그에서는 이미지아래 자동출처가 되지않았지만 씨디맨님블로그에서는 적용이되네요 어떻게하신건지 여쭤보고싶습니다

    perm. |  mod/del. |  reply.