XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
조회 수 232 추천 수 8 댓글 12
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

첨부 파일 중 애니메이션 gif가 있다면 섬네일만 보여주고 클릭 후 실제 파일을 로드하자는 의도로 작성한 애드온 입니다.

아이디어만 가지고 막히는 부분은 구글링을 통해서 코드를 작성했습니다.

이모티콘등에 적용되지 않도록 외부 링크 이미지나 내 사이트 files/attach/폴더 아래의 첨부 파일에 대해서만 작동합니다.

 

pr_pause_gif.zip

 

pr_pause_gif.png

보기처럼 애니메이션 gif파일은 바로 로드되지않고 기본 섬네일이나 gif파일(첫번째 프레임?)을 섬네일로 만들어서 표시 되고 사용자가 마우스 클릭 후 실제 파일이 로드 됩니다.

 

pr_pause_gif2.png

애드온이 제공하는 옵션은 위의 3가지 입니다.

 

- 대체 이미지

섬네일을 선택 할 수 있습니다. 애드온에 포함된 기본 이미지를 사용하거나 첨부된 파일을 섬네일로 만들어서 표시합니다.

둘다 이미지는 data uri로 처리합니다.

 

- 애니메이션 GIF 체크

gif파일의 경우 무조건 적용할 것인지 애니메이션 gif인것을 확인 후 적용할 것인지 선택 합니다.

 

- 이미지 용량 표시

대기 화면에 이미지 용량을 표기 할것인지 선택 합니다.

 

테스트 해보니 의도한대로 작동하기는 합니다만 다량의 gif가 첨부된 문서나 외부 링크로 첨부된 gif가 있는경우 응답속도 하락이 눈에 띕니다. 특히 imgur같은...

 

테스트 기간이 짧고 테스트 방법이 다양하지 못해서 제가 의도한대로 완벽하게 작동하지 않을 수 있습니다. 버그나 퍼포먼스 향상을 위한 의견 주시면 감사하겠습니다.

 

주의

이 애드온은 적용할 img태그에서 editor_component="image_link" 속성을 제거 합니다. 이 속성이 있는 img태그의 경우 에디터 컴포넌트 처리단에서 대부분의 속성 태그들을 제거하더군요. 이것 때문에 한참 헤맸습니다. ㅋ

그래서 after_module_proc단계에서 해당 속성을 제거 후 content를 넘겨 주는 방식을 사용했으며 대신  image_link컴포넌트에서 진행하는 태그정리(?)작업을 이 애드온에서 동일하게 진행 합니다.

  • ?
    후하니 2017.01.25 02:24:18
    굳굳
  • profile
    Chronos 2017.01.25 07:58:28
    ㅊㅊ!
  • profile
    고양이 2017.01.25 09:19:29
    엄청난 자료입니다!!
    감사합니다.
  • profile
    socialskyo 2017.01.25 09:31:10

    역시 이미지 파일 처리 전문가 !!!

    사용해보니 말씀하신대로 imgur 과 같은 외부 링크 gif인 경우 느려지네요.

    그냥 외부든 내부든 gif든 아니든 특정 용량 기준으로 어떤 이미지든 차단 되는 기능도 있으면 완벽할듯 합니다. ^^

     

     

  • profile
    고양이 2017.01.25 10:32:24
    내부일때 외부일때만 작동하는 설정이라던지 용량 기준 설정도 있으면 더더욱 좋긴하겠네요. ㅎㅎ
  • profile
    prologos 2017.01.25 11:08:52

    콘텐츠 불러올때마다 애드온 내에서 imagecreate사용해서 섬네일 추출 작업을 했는데... 지금 생각해보니 그럴 필요가 없는거같네요.
    xe에서 제공하는 getThumbnail사용하면 편하고 속도도 빠를것을... 맞지요??

    대충 작동은하니 애드온의 직접적인 이미지 액세스 횟수 를 줄이는 방법을 생각 해 보겠습니다.

    =====

    getThumbnail은 안되겠네요,,,

  • profile
    구름이 2017.01.25 13:07:48
    감사합니다^^
  • ?
    칼럼 2017.01.25 15:11:16
    감사합니다.
  • profile
    prologos 2017.01.25 15:13:48
    타운에서 검색해보니 좋은 코드가있네요
    https://www.xetown.com/lakepark/266963
    이 코드도 적용해보고 용량체크 부분도 적용하도록 하겠습니다.

    그리고 속도 개선을 위해 섬네일 생성 방법을 변경할 예정입니다.
  • profile
    고양이 2017.01.26 16:46:29
    감사합니다!! 굿굿
  • profile
    보고하비 2017.01.25 21:36:47
    와 좋네요 전 버전업되면 적용해볼게요
  • profile
    RADIX 2017.02.08 17:54:44
    우와, 이 대박 애드온을 이제서야 봤네요. 당장 다운받았습니다. 감사합니다!!!!!

List of Articles
번호 분류 제목 글쓴이 날짜
공지 질문/답변 답변을 확실히 받기위한 질문자 지침서 21 람보 2015.12.31
화제의 글 자료공유 광고제거 멤버십 애드온 v0.1 7 file ExtendKR 2017.02.13
4564 질문/답변 index페이지 수정 질문 2 file teamcafeit 2017.02.22
4563 질문/답변 layout.html 에 삽입하는 스크립트 질문드려요 1 고라자 2017.02.22
4562 질문/답변 커뮤니티 사이트를 만드려고 하는데 어떤 서버를 써야하나요 4 인디고 2017.02.22
4561 질문/답변 Query XML에 대해서 문의 좀 드립니다. 2 주피터3837 2017.02.22
4560 질문/답변 마지막 문장 이후 오는 <p> </p> 를 모두 제거해서 보여 줄 수 있을까요 ? 58 웹지기 2017.02.22
4559 질문/답변 문서 '조회수정렬' 기능이 추가되었으면 좋겠습니다. ^^ 일단놓고말해 2017.02.22
4558 질문/답변 본문/댓글 폰트 질문 7 update Katze 2017.02.22
4557 질문/답변 에디터에 컨텍스트 메뉴는 어떻게 수정하나요? 2 file xetown998 2017.02.22
4556 질문/답변 타임라인 모듈 (원래게시물로 돌아가기) 작동안합니다 3 피피포 2017.02.22
4555 질문/답변 댓글 가지고 오는 한번 쿼리 한번 봐주세요..ㅜㅜ 주피터3837 2017.02.22
4554 질문/답변 imgur 에디터 https 3 VJT 2017.02.22
4553 질문/답변 닉네임 이미지, 아이콘 동시적용시 아이콘에 마우스를 갖다 댈경우 file 라그릿 2017.02.21
4552 질문/답변 게시판 정렬 조건 어떤 방식으로 만드는건거요? 2 웹지기 2017.02.21
4551 질문/답변 게시글 일괄 삭제 방법 3 우리종도 2017.02.21
4550 질문/답변 (라이믹스) 회원가입시 메일인증, 가입후 페이지 이동이 되시나요? 1 고수군 2017.02.21
4549 질문/답변 지금 쓰고있는 웹호스팅 업체가.. 4 트리플라워 2017.02.21
4548 질문/답변 라이믹스 궁금해서 질의 드립니다. 3 December 2017.02.21
4547 질문/답변 라이믹스 갈아타기 2 가이더 2017.02.21
4546 질문/답변 Godaddy 사용해보신분 계신가요? 5 SoyaMilk 2017.02.21
4545 질문/답변 제로보드 1.4.0.11에서 업그레이드하기좋은 버전은 무엇인가요? 1 xeplayer 2017.02.21
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 230 Next
/ 230
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...