XETOWN

호수 공원

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

pr_pause_gif_v0.2.zip

 

pr_pause_gif.jpg

 

달라진점

버튼 디자인이  변경 되었습니다.

섬네일을 생성 후 이용합니다.

속도 개선을 위해 이미지 파일 리스트를 만들어서 사용합니다.

 

pr_pause_gif2.jpg

애드온 옵션

작동방식: 모든 이미지, GIF이미지, 애니메이션 GIF

파일 사이즈: 애드온이 작동할 최소 이미지 용량을 지정가능 합니다. 입력 단위는 KB 입니다.

예로 1메가 이상의 이미지에만 적용되길 원한다면 1024를 입력합니다.

섬네일 최대 버니: 특별히 제한하지 않으면 원본과 동일한 사이즈의 섬네일이 생성 됩니다.

 

 

셀룰러 체크 스크립트는 테스트 해보니 기기를 가리는지 브라우저를 가리는지 체크 못하는 경우가 있어서 적용하지 않습니다.

 

속도 개선을 위해서 이번 버전에서는 섬네일을 생성후 디스크에 저장하고 이용합니다.

기본적으로 상당히 저품질(25)의 jpg 이미지로 섬네일을 생성합니다.

 

옵션에서 섬네일 너비를 제한하지 않으면 원본과 동일한 사이즈의 섬네일을 생성합니다. 섬네일 너비를 원본 이하로 조절할경우 이미지 태그에 width, height가 지정되어있지 않은경우는 원본과는 다르게 작은 사이즈로 표시 됩니다.

물론 플레이 버튼을 누르면 원본 이미지가 보여지면서 레이아웃이 복원 되긴 합니다.

 

섬네일은 ./files/thumbnails/문서번호/ 아래 폴더에 생성되며 옵션 변경등의 이유로 더이상 사용하지 않는 섬네일은 자동 삭제됩니다.

또한 속도 향상을 위해서 문서에 사용된 이미지의 정보를 따로 리스트로 만들어서 섬네일이 저장되는 동일한 폴더에 pr_addon_img_info.txt라는 파일을 생성 합니다.

 

애드온 적용 후 처음 글을 읽을때는 약간의 로딩 시간이 필요할지 모르나 이후 섬네일과 파일리스트가 생성된 후에는 이전과 별차이없는 로딩 속도를 기대 할 수 있을겁니다.

 

주의

이 애드온은 독자 섬네일 이미지와 관리용 파일을 생성해서 사용합니다. 이것이 싫다면 이  애드온 사용에 주의 하세요.

./files/thumbnails/문서번호/ 폴더는 XE에서 해당 문서를 수정하면 삭제되었다 다시 생성될수도 있는 폴더 입니다.

이렇게 되면 해당 문서를 처음 읽을때와 마찬가지로 섬네일과 이미지 리스트 파일 생성시간이 약간 소요 될 수 있습니다.

 

  • ?
    jylee7152 2017.02.01 02:29:38
    외부링크된 이미지에는 사용이 안되는것 같은데 확인부탁드립니다.
    외부링크된 이미지는 그냥 이미지가 안보이는 증상인듯 보여집니다.
    확실한것은 아니에요
  • profile
    prologos 2017.02.01 02:42:06
    imgur이나 티스토리 등 확인했을때는 잘 되었는데요? 어디 링크인가요?
  • ?
    jylee7152 2017.02.01 15:16:09

    김짤.com
    보시면 gif이미지들이 용량이크거든요 요쪽 자료 그냥 외부링크하면 잘안되는듯합니다.
    한번해보세요.

    그리고 클라우드 플레어 환경에서 테스트 부탁드려요^^

    그리고 이미지 프로세스 모듈과 충돌이 있는것 같습니다.

  • profile
    웹지기 2017.02.01 17:34:48
    The owner of this website (image.xn--4k0b573c.com) does not allow hotlinking to that resource (/files/attach/images/23752/641/035/6dc52bf79cc2bb1049bc75a9e32782fa.gif).

    핫링크 금지 되어 있는거 같네요. 그거 클라우드 플레어에서 풀어주셔야 할듯 한데요...
  • ?
    낙타 2017.02.07 02:13:27
    김짤닷컴을 아시다니~~~
  • profile
    socialskyo 2017.02.01 02:33:48
    최고네요!! 저는 잘되는것 같습니다.
    그나저나 애니메이션 gif 로 설정하면 일반 이미지들은 썸네일이 생성 안되는게 맞죠?
  • profile
    prologos 2017.02.01 02:40:30
    네 적용되는 이미지에대한 섬네일만 생성합니다. 그리고 옵션 변경되서 사용 안하는 섬네일이 있다면 자동 삭제 됩니다.
  • profile
    socialskyo 2017.02.01 02:42:44
    멋진 자료 공유 해주셔서 너무 감사합니다. 많은 XE 사이트들이 더욱 사용자 배려 할수 있어 지겠네요.
  • profile
    고라자 2017.02.01 02:48:47
    좋은 자료 공유해주셔서 감사드립니다 ~

    그런데 이미지 프로세스 모듈 (https://www.xpressengine.com/index.php?mid=download&package_id=22753726) 과 동시에 이용시 작동이 안되는 것 같은데, 혹시 단독으로만 사용해야 하나요?
  • profile
    웹지기 2017.02.01 17:21:39

    저희는 이미지프로세서 모듈 사용합니다. 잘 되네요. 혹시 애니메이션 gif  이미지를 리사이즈해서 움직임이 없어진 걸 말씀하신거라면 그건 원래 그런거라서....

  • profile
    socialskyo 2017.02.01 03:11:22
    아..모바일에서 잘 안되는것 같습니다. 재생 버튼이 클릭이 잘 안됩니다.
  • profile
    Chronos 2017.02.01 08:19:41
    일단 ㅊㅊ!
  • profile
    고양이 2017.02.01 09:14:13
    와 이번엔 설정까지 아주 멋진 자료 입니다! ㅎㅎ 저도 테스트 해보고 오겠습니다.
  • profile
    구름이 2017.02.01 09:15:03
    멋집니다.
    수고 하셨습니다^^
  • profile
    socialskyo 2017.02.01 09:20:20
    Uncaught TypeError: Cannot set property 'href' of null 모바일에서는 이런 에러가...
  • profile
    prologos 2017.02.01 12:47:04

    모바일에서 네이버앱, 크롬, 삼성브라우저(?)에서 테스트 했을때는 별다른 이상 없었는데요... ㅠㅠ

    http://a3ghost.dyndns.org/free
    위 홈페이지에서도 동일한 오류 발생하는지 확인좀 해주세요.
    내부망에서 테스트용으로 사용하던 개인 홈서버 입니다. 잠시 외부ip로 변경 했습니다.

    =====

    위 홈페이지에서는 버튼 아래쪽에 숫자가 표시될겁니다. 처리시간 알아보기위해 디버깅용으로 표시하는거니까 개의치 마세요.

  • profile
    웹지기 2017.02.01 13:06:05
    근데 저희 사이트에는 PC에서도 안되는거 보니까.. 뭔가 다른 자료에 영향이 있는거 같은데요.
    라이믹스에서 포함된 photoswipe 애드온을 XE에 설치해서 사용중인데 영향이 있을까요 ?
  • profile
    socialskyo 2017.02.01 13:10:57
    헉..주신 사이트에서는 됩니다. 뭔가 저희 사이트 문제 인가 봅니다.
  • profile
    socialskyo 2017.02.01 13:12:43
    저도 pc에서 photoswipe 애드온 사용중인데 문제 없이 됩니다.
  • profile
    prologos 2017.02.01 13:13:18
    제 홈서버에 라이믹스 1.8.27을 설치하고 개인적인 자료 몇개 만들고 있어서 범용성이 부족한가 보네요.
    XE를 설치하고 테스트 해보도록 하겠습니다 @.@
  • profile
    웹지기 2017.02.01 13:23:03
    일단 저희는 PC 모바일 모두 동작이 안되네요.
  • profile
    socialskyo 2017.02.01 13:33:23
    저도 라이믹스 입니다. ^^
  • profile
    socialskyo 2017.02.01 13:17:21

    제 사이트 스킨이 문제 였던것 같습니다. pjaxboard를 사용중인데 flatboard로 변경하니 되네요. :-)

  • profile
    prologos 2017.02.02 12:58:58
    pjaxboard는 제가 테스트 못해보겠네요.
    img태그가 애드온 적용후에는 <inline class="animated-gif"> 태그로 감싸져 있을겁니다. pjaxboard사용시 이 형태가 변형되는거 같은데 출력이 어찌 되는지 알려주시면 수정에 도움이 되겠습니다.
  • profile
    일단놓고말해 2017.02.01 12:45:38
    우와~!
    모바일에서 가능하다면... 데이터폭탄을 방지할 수 있겠네요...
    제가 찾던 기능입니다.
  • profile
    웹지기 2017.02.01 12:55:03
    이 자료 유용하게 사용할 수 있을 거 같습니다. 제가 예전에 공동으로 제작의뢰도 시도해보다가 포기한 자료인데요.

    그런데 혹시 PC 모바일 모두 동작시키고 옵션에서 실제 사용자확인 후 재생은 모바일에서만 하게끔 하면 좋지 않을까요 ?
    왜냐면 데이터폭탄 방지로 대부분 모바일에서만 작동시키길 원할 수 있는데 이렇게 되면 섬네일 생성등의 작업이 모바일 방문자에의해서만 동작이 되니 부하가 걸리는 작업이 모바일에 편중될 듯 싶어서요.
  • profile
    prologos 2017.02.01 13:09:26
    제가 정확하게 이해한것인지 모르겠는데...
    1. 모바일 사용자에게만 보이기 옵션을 추가한다.
    2. 1의 옵션이 활성화 상태이면 XE 애드온 옵션에서 PC, Mobile모두 체크한 상태여도 모바일 사용자 에게만 적용된다.
    3. 단, 속도 향상을 위해서 PC사용자가 문서에 접근하면 섬네일 작업까지는 진행한다. 다만 실제 적용은 하지 않는다.

    정도 일까요?
  • profile
    고양이 2017.02.01 13:18:12
    요점은 썸네일을 만들때 PC에서도 썸네일을 만들수있게 해달라 인거같아요
    대신에 PC나 모바일에서 사용가능 유무는 설정에서 셋팅하도록 ~
    저는
    옛날 오래된 컴에서 gif 한번뜨면 컴퓨터 멈춰버리는 경우도 있으니 PC에서도 사용하면 좋을 것 같아요
  • profile
    웹지기 2017.02.01 13:19:29
    PC에서 애드온 동작은 하되 옵션에서 PC에서는 자동재생으로 기존처럼 두고 모바일에서만 사용자허락 후 재생할건지 선택하게 하면 좋을 거 같다는 생각이에요.

    서버가 일을 해야 하는데 모바일 방문자에게만 편중시키기 싫어서요.
  • profile
    웹지기 2017.02.01 13:28:35

    혹시 글을 수정하거나 새로 작성해야 동작하나요 ??

     

    이것도 아니네요. 관지라계정으로 회원글 수정해봤는데 동일하게 동작안하네요.

  • profile
    prologos 2017.02.01 13:51:57

    이 애드온은 글 수정과 관계없이 글을 읽을때마다 작동 합니다.

    컨텐츠중에 img태그가 포함되어 있고 링크가 외부이거나 내부일경우 이모티콘이나 기타 컴포넌트의 작동을 해치지 않기위해 첨부파일내(files/attach/아래의 파일)의 파일일 경우에만 작동합니다.

     

    아래같은 이미지가 검출 되었을경우

    <img src="/files/attach/images/181/778/test.jpg" />

     

    이것을 아래처럼 바꿔서 출력합니다.

    <inline class="animated-gif" style=""><img src="/files/thumbnails/778/pr_jpg_false_348026_736_1536_cead284a4686a441bae941d81ba4cfb3.jpg" data-gif="./files/attach/images/181/778/test.jpg" ><inline class="play-gif" style="position: absolute; top: 440px; left: 318px; display: block;"><inline class="gif-outer-ring"></inline><inline class="gif-circle"><inline class="gif-front"><span>339.9 KB 0.000124</span></inline><inline class="gif-back"><span class="btn-play"></span></inline></inline></inline></inline>

     

    버튼을 위해 다른 클래스등이 추가되었지만 img태그를 살펴보면 진짜 링크는 data-gif에 등록되어있고 src에서 섬네일을 지정해서 섬네일이 보여지게 만듭니다.

    이후 사용자가 재생버튼을 클릭하면 자바 스크립트를 이용해서 src값이 data-gif의 값으로 대체되는 형식 입니다.

  • profile
    prologos 2017.02.01 14:27:36
    일단 배포를 했으니 쓸만 해질때까지 손좀 봐야겠습니다.

    일단 홈페이지 주소에 xe가 포함되어 있으면 제가 의도한대로 작동하지 않을 수 있겠다는 생각이 듭니다.
    그 외에 버그라고 생각되는 부분있다면 말씀 해주세요.
    그리고 잘 작동하지않는곳의 링크 주시면 도움이 됩니다.

    몇가지 더 보완해서 다음버전으로 뵙겠습니다. ㅎㅎㅎ
  • profile
    웹지기 2017.02.01 14:33:14
    저희 사이트는 좀 이상한 증상이

    제가 보내드린 주소의 게시물이 이제는 모바일에서 웹뷰앱에서만 재생하면 없는 이미지입니다.
    그런데 다른 주소의 게시물은 또 괜찮네요. 해당 게시물은 크롬에서는 괜찮구요. 이상한 증상이네요.
  • profile
    웹지기 2017.02.01 14:39:52
    그리고 해당 게시물 이상해서 로드한다음 주소를 보니 http로 불러오네요. 저희는 https 사용하는데요.
  • profile
    웹지기 2017.02.01 14:42:28
    일단 이 게시물은 게시글 작성시 http로 작성된 듯 합니다. 아마도 ssl도우미 ? 지원? 애드온이 동작하지 않는 문제 같아요. 이건 게시물을 수정하면 될 듯 합니다. http 시절에 작성된 게시물인듯 한데 별 문제 아닐듯 하네요.
  • profile
    prologos 2017.02.01 14:52:31
    역시... 쓸만해지려면 아직 멀었네요
    많은 도움이 되었습니다. 감사합니다.
  • profile
    웹지기 2017.02.01 14:57:40
    저희는 쿼리 날려서 모두 https 로 바꿔서 해결했어요. 별 문제 아닙니다.
    http에서 https로 변경하면서 본문 내용 건드리기 싫어서 그냥 애드온으로 땜빵했던게 문제인거죠.
  • ?
    기븐 2017.02.01 15:15:54
    쿼리 어떤 식으로 하셨나요?

    저도 ssl 지원 애드온 사용중인데, 생각해보니 예전에 ssl 적용 전에 작성되었던 게시물들만 한번 수정해 주면 저 애드온은 더 이상 사용할 필요가 없을 거 같네요
  • profile
    웹지기 2017.02.01 15:18:55
    UPDATE xe_documents SET content = REPLACE(content,'http://abc.com/xe','https://abc.com/xe');

    저희는 xe폴더까지 사용을해서 확실하게 하려고 저기까지 바꿔치기 했어요.
    쿼리문 실행하고나니 2800여개 였던가 ㅋㅋ 바뀌었습니다. 애드온으로 땜빵했었는데 이자료와 충돌인지 http로 로드하는 바람에 쿼리로 이번참에 바꾸었네요.
  • ?
    기븐 2017.02.01 15:23:06
    감사합니다. 잘되네요

    어차피 SSL 적용 이후에 작성된 게시물은 https://사이트주소 라고 되어 있을테니, 이제 더 이상 SSL 지원 애드온 사용하지 않아도 되겠네요
  • profile
    웹지기 2017.02.01 15:24:24
    저는 레이아웃등 다른자료에서 제가 타이핑해 놓은 것중 수정하지 않은 것들도 있을수 있고 귀찮아서 그냥 애드온은 계속 씁니다 ㅋ
  • ?
    기븐 2017.02.01 15:25:55
    저는 그 애드온 몰랐을 때 레이아웃 등에서 각종 오류가 발생하길래 그때 http://로 되어 있던거 전부 //로 바꿨네요
  • ?
    기븐 2017.02.01 15:24:50
    가만 보니 예전에 www 붙여서 사용하던 적도 있어서, 겸사겸사 그것까지 해주니까 몇개 더 나오네요.
  • ?
    식이 2017.02.01 15:08:17
    이건 뭐.. 너무 멋지잖아요!
  • profile
    보고하비 2017.02.02 18:31:09
    완소 에드온입니다.^^
  • ?
    낙타 2017.02.07 02:10:24
    왜저만 작동이 안되나요 ㅠㅠ

    애드온 충돌일까요?
    김짤닷컴입니다ㅠㅠ

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