320x100
|
|
사진 출처 남기고 싶을 때
사진 출처를 일괄적으로 적용 시키고 싶을 때가 있을겁니다. 제 경우에는 가능한 원본에 가까운 이미지를 보여주기 위해서 포토샵에서 색체를 조절하거나 하진 않습니다. 그냥 리사이즈만 하고 명암을 조절하는 정도로만 끝내죠. 사진 출처를 나타내기 위해 포토샵에서 출처모양의 아이콘이나 글자를 브러쉬로 만들어서 한번 콕 찍어주면 사진 출처를 나타낼 수 있습니다. 다만 이 작업도 번거로울 때가 있죠. 그냥 사진을 올린 상태에서 사진에 출처 이미지가 나타나도록 하는걸 생각해봤습니다. 처음에는 이미지 위에다가 다시 특별한 형태의 투명이지가 합쳐져서 나타나게 하는걸 생각해봤다가 생각보다 구현이 어렵더군요. 그래서 그림 하단에 일괄적으로 출처가 나타나게 해봤습니다. 제 블로그에 모든 그림의 하단에 출처가 나타날겁니다. 게다가 제 글을 무단을 그냥 긁어서 다른곳에 올리면 해당 출처를 나타내는 부분도 함께 나타나게 됩니다.
위에 올린 이미지는 제가 제컴퓨터를 눕혀놓고 찍어본 사진입니다. 그냥 사진을 제 본문폭에 맞게 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>
<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개는 허락없이 제 블로그 출처를 남기는 조건으로 쓸 수 있게 해뒀습니다.
그동안 궁금해하셨을 분들 자신의 블로그에도 적용하기 적당하다면 적용을 시켜보시기 바랍니다. 어려워서 직접 하기 어렵다면 부탁하시면 제가 대신 해드릴 수 는 있습니다. 참고하시기 바랍니다.
|
|
반응형
'유용한_팁 > 블로그_팁' 카테고리의 다른 글
| 티스토리 스팸관리 이제는 근본적인 대처가 필요하다 (19) | 2011.07.01 |
|---|---|
| 티스토리 모바일 페이지 리뷰 완벽판 좋은점 아쉬운점 (33) | 2011.03.29 |
| 웹표준검사 W3C 웹문서 Markup검사 (12) | 2011.02.03 |
| 이웃커넥트 블로그 이웃 관리 네이버 이웃 커넥트 위젯 (30) | 2011.01.16 |
| 이미지 다운로드 사이트 추천 (16) | 2010.12.25 |
댓글