XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
조회 수 262 추천 수 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
    ㅊㅊ!
  • ?
    고양이 2017.01.25 09:19:29
    엄청난 자료입니다!!
    감사합니다.
  • profile
    socialskyo 2017.01.25 09:31:10

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

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

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

     

     

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

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

List of Articles
번호 분류 제목 글쓴이 날짜
화제의 글 XE 사용팁 코어 수정 없이, 시조 댓글의 리스트만 출력하고, 자손 댓글의 리스트는 로드하지 않았다가 클릭 이벤트로 ajax 호출하기 42 file 윤삼 2017.04.20
5304 질문/답변 최근게시물위젯에서 댓글작성자의 프로필이미지 가져오는 방법 6 이온디 2017.04.25
5303 질문/답변 누리고 배송사 추가 전우성 2017.04.25
5302 질문/답변 vultr 옮기고 파일 업로드가 안되네요 ㅠㅠ 2 흐미흐미 2017.04.25
5301 질문/답변 Vultr는 고정 IP인가요? 2 흐미흐미 2017.04.25
5300 질문/답변 스케치북5 모바일 이미지 첨부시 본문 에러 문의드려요. 5 xe왕초보 2017.04.25
5299 질문/답변 페이지, 게시판 접근권한 : 로그인 사용자로 했을때 문제 6 로보 2017.04.25
5298 질문/답변 모듈 + 게시판 2 떡보의하루 2017.04.25
5297 질문/답변 애드온 'resize'에 대해서 질문드립니다. 1 콜라 2017.04.25
5296 질문/답변 라이믹스에서 롤링 배너 위젯이 코드 생성이 안되네요 8 file 쭈박이 2017.04.25
5295 질문/답변 왜 홈페이지로 설정하기 버튼이 눌리지 않을까요?? 3 file 로보 2017.04.24
5294 질문/답변 아이폰 카톡브라우저에서 첨부가 안됩니다. 2 고양이 2017.04.24
5293 질문/답변 phpmyadmin 가져오기 오류.. 2 file 아스타 2017.04.24
5292 질문/답변 vultr.com 2.5달러 짜리 괜찮을까요? 8 흐미흐미 2017.04.24
5291 질문/답변 exam 시험 모듈 스킨 문의요 모든것에감사 2017.04.24
5290 질문/답변 즈베즈다님의 사이트맵 모듈 최신코어에서 동작이 안되네요. 2 대한천자 2017.04.24
5289 XE 사용팁 일부환경에서 새글표시모듈+게시물이동시 문제 1 디이깅 2017.04.24
5288 질문/답변 소셜로그인 때문에 미치겠네요ㅠㅠ file 낙타 2017.04.24
5287 질문/답변 스크립터 수정이 어렵네요 3 sampo 2017.04.24
5286 질문/답변 세션처리 관련해서 xe하고 라이믹스하고 차이가 있는지요? 4 단희아빠 2017.04.24
5285 질문/답변 모바일에서 위젯 두개를 수평형으로 이동되게 구현할수있나요? 2 이브이 2017.04.24
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 270 Next
/ 270
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...