XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
조회 수 278 추천 수 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든 아니든 특정 용량 기준으로 어떤 이미지든 차단 되는 기능도 있으면 완벽할듯 합니다. ^^

     

     

    1 0
  • 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
    이 코드도 적용해보고 용량체크 부분도 적용하도록 하겠습니다.

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

위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...