XE, 라이믹스에서 사용 가능한 스티커콘 모듈인 스티커모듈이 있습니다. 댓글에서 스티커를 사용해서 댓글을 달아줄 수 있게 해주는 모듈입니다.
그런데 이 모듈을 사용하다 보면 스티커 사이즈가 140px 사이즈로 고정되서 출력이 되는데 이게 작은 사이즈의 스티커를 사용하는 경우는 약간 확대되어 보이는 문제가 있을 수 있고 작은 사이즈 그대로 출력하고 싶을 수 있습니다.
현재 위 스티커가 100px 짜리 입니다.
모듈에서 100px 까지 업로드가 가능합니다. 100px 보다는 큰 것을 그리고 140px를 권장하고 있죠.
스티커를 구하다 보면 100px 짜리도 맘에 드는게 있고 한데 이게 출력될때는 140px로 채워져서 출력되니 약간 흐릿한 느낌이 좋지 않을 수 있을 것 같습니다.
이미지를 보여주는 방식이 background 이미지로 보여주는 방식이고 사이즈가 지정되어 있어서 그런데요.
<img src~> 방식으로 바꾸면 될 것 같아 바꿔 보았습니다.
sticker.controller.php 파일의 220번라인 부근을 보면
function stickerCommentCallback($matches){
$output = $this->_getStickerComment($matches[4]);
$part = "";
if(!empty($output->data)){
$data = $output->data;
$file_name = substr($data->file_name, 0, strrpos($data->file_name, "."));
//!!!S
if(!$_COOKIE['txtmode']){
$part = '<!--BeforeComment('.$matches[1].','.$matches[2].')--><div class="comment_'.$matches[1].'_'.$matches[2].' xe_content"><a href="/?mid=sticker&sticker_srl='.$data->sticker_srl.'" title="'.$data->title.'" style="display:block;background-image:url('.$data->url.');background-size:cover;background-position:50% 50%;width:140px !important;height:140px !important;border-radius:3px;" alt="'.$file_name.'"></a></div><!--AfterComment('.$matches[1].','.$matches[2].')-->';
} else {
$part = '<!--BeforeComment('.$matches[1].','.$matches[2].')--><div class="txtmode comment_'.$matches[1].'_'.$matches[2].' xe_content"><p style="margin:1em;">데이터 절약 모드 작동중<BR><a href="/?mid=sticker&sticker_srl='.$data->sticker_srl.'" target="_blank" style="color:#777;">('.$data->title.')</a></p></div><!--AfterComment('.$matches[1].','.$matches[2].')-->';
}
//!!!E
} else {
$delete_msg = $this->_getStickerDeleteMsg();
$part = '<!--BeforeComment('.$matches[1].','.$matches[2].')--><div class="comment_'.$matches[1].'_'.$matches[2].' xe_content">'.$delete_msg.'</div><!--AfterComment('.$matches[1].','.$matches[2].')-->';
}
return $part;
}
이런 함수가 있습니다.
함수 안에서 스티커를 출력해주는 코드
<a href="/?mid=sticker&sticker_srl='.$data->sticker_srl.'" title="'.$data->title.'" style="display:block;background-image:url('.$data->url.');background-size:cover;background-position:50% 50%;width:140px !important;height:140px !important;border-radius:3px;" alt="'.$file_name.'"></a>
위의 내용을
<a href="/?mid=sticker&sticker_srl='.$data->sticker_srl.'" title="'.$data->title.'"><img src="'.$data->url.'" style="border-radius:3px;max-witdh:140px;" alt="'.$file_name.'"></a>
이렇게 바꾸면 이미지를 직접 불러오면사 사이즈 그대로 보여줄 수 있습니다. 다만 최대 사이즈 max-with:140px; 를 지정해 주어서 제한을 해주면 좋을 것 같습니다.
단, 이렇게 사이즈를 고정하지 않으면 하나의 글에 여러 사이즈의 스티커가 작성될때 각 스티커 사이즈의 크기별로 다르게 출력되니 이점이 싫으신 분은 이 팁이 유용하지 않으며 이팁을 사용하면서도 사이즈를 고정하고자 할때는 width 속성을 지정하시면 됩니다.
또 다른 대안으로는 소스를 원본 그대로 유지하면서 140px !important; 를 작은 스티커 기준으로 100px !important; 로 변경하는 방법도 있습니다. 모두 깨지지 않는 이미지 사이즈인 작은 이미지로 통일되는 것 입니다.
