로그인

검색

Extra Form
추천지수 6

XE, 라이믹스에서 사용 가능한 스티커콘 모듈인 스티커모듈이 있습니다. 댓글에서 스티커를 사용해서 댓글을 달아줄 수 있게 해주는 모듈입니다.

 

그런데 이 모듈을 사용하다 보면 스티커 사이즈가 140px 사이즈로 고정되서 출력이 되는데 이게 작은 사이즈의 스티커를 사용하는 경우는 약간 확대되어 보이는 문제가 있을 수 있고 작은 사이즈 그대로 출력하고 싶을 수 있습니다.

 

화면 캡처 2021-05-04 141059.png

 

현재 위 스티커가 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; 로 변경하는 방법도 있습니다. 모두 깨지지 않는 이미지 사이즈인 작은 이미지로 통일되는 것 입니다.

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
3 추천
Atachment
첨부 '0'

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기 2

    Date2021.05.11 Category기능 Views292 Votes3
    Read More
  22. RXP FLEX 레이아웃의 다크모드 기능 게시판에 적용하기 4

    Date2021.05.09 Category기능 Views395 Votes3
    Read More
  23. 카카오지도 마커 위치로 카카오내비 길안내 연동하기

    Date2021.05.08 Category기능 Views796 Votes3
    Read More
  24. Read More
  25. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views230 Votes3
    Read More
  26. Read More
  27. Read More
  28. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views212 Votes3
    Read More
  29. 여태 몰랐던 라이믹스의 $document, $oDocument 게시글 정보

    Date2021.04.29 Category기타 Views386 Votes3
    Read More
  30. Read More
  31. 댓글 주소 클립보드에 복사하는 기능 추가하기 11

    Date2021.04.25 Category기능 Views249 Votes3
    Read More
  32. Read More
Prev 1 2 3 4 Next
/ 4