애니메이션 GIF 확인 애드온 V0.2
달라진점
버튼 디자인이 변경 되었습니다.
섬네일을 생성 후 이용합니다.
속도 개선을 위해 이미지 파일 리스트를 만들어서 사용합니다.
애드온 옵션
작동방식: 모든 이미지, GIF이미지, 애니메이션 GIF
파일 사이즈: 애드온이 작동할 최소 이미지 용량을 지정가능 합니다. 입력 단위는 KB 입니다.
예로 1메가 이상의 이미지에만 적용되길 원한다면 1024를 입력합니다.
섬네일 최대 버니: 특별히 제한하지 않으면 원본과 동일한 사이즈의 섬네일이 생성 됩니다.
셀룰러 체크 스크립트는 테스트 해보니 기기를 가리는지 브라우저를 가리는지 체크 못하는 경우가 있어서 적용하지 않습니다.
속도 개선을 위해서 이번 버전에서는 섬네일을 생성후 디스크에 저장하고 이용합니다.
기본적으로 상당히 저품질(25)의 jpg 이미지로 섬네일을 생성합니다.
옵션에서 섬네일 너비를 제한하지 않으면 원본과 동일한 사이즈의 섬네일을 생성합니다. 섬네일 너비를 원본 이하로 조절할경우 이미지 태그에 width, height가 지정되어있지 않은경우는 원본과는 다르게 작은 사이즈로 표시 됩니다.
물론 플레이 버튼을 누르면 원본 이미지가 보여지면서 레이아웃이 복원 되긴 합니다.
섬네일은 ./files/thumbnails/문서번호/ 아래 폴더에 생성되며 옵션 변경등의 이유로 더이상 사용하지 않는 섬네일은 자동 삭제됩니다.
또한 속도 향상을 위해서 문서에 사용된 이미지의 정보를 따로 리스트로 만들어서 섬네일이 저장되는 동일한 폴더에 pr_addon_img_info.txt라는 파일을 생성 합니다.
애드온 적용 후 처음 글을 읽을때는 약간의 로딩 시간이 필요할지 모르나 이후 섬네일과 파일리스트가 생성된 후에는 이전과 별차이없는 로딩 속도를 기대 할 수 있을겁니다.
주의
이 애드온은 독자 섬네일 이미지와 관리용 파일을 생성해서 사용합니다. 이것이 싫다면 이 애드온 사용에 주의 하세요.
./files/thumbnails/문서번호/ 폴더는 XE에서 해당 문서를 수정하면 삭제되었다 다시 생성될수도 있는 폴더 입니다.
이렇게 되면 해당 문서를 처음 읽을때와 마찬가지로 섬네일과 이미지 리스트 파일 생성시간이 약간 소요 될 수 있습니다.
![pr_pause_gif.jpg [File Size:85.9KB/Download:8]](/files/download/link/685683/dc093b8530a3a770866c111dc1aa38d1/pr_pause_gif.jpg){kind=link}
![pr_pause_gif2.jpg [File Size:34.8KB/Download:5]](/files/download/link/685684/4e2e8c51eb987a04d558cd1a5c2f478f/pr_pause_gif2.jpg){kind=link}
댓글 45
외부링크된 이미지는 그냥 이미지가 안보이는 증상인듯 보여집니다.
확실한것은 아니에요
김짤.com
보시면 gif이미지들이 용량이크거든요 요쪽 자료 그냥 외부링크하면 잘안되는듯합니다.
한번해보세요.
그리고 클라우드 플레어 환경에서 테스트 부탁드려요^^
그리고 이미지 프로세스 모듈과 충돌이 있는것 같습니다.
핫링크 금지 되어 있는거 같네요. 그거 클라우드 플레어에서 풀어주셔야 할듯 한데요...
그나저나 애니메이션 gif 로 설정하면 일반 이미지들은 썸네일이 생성 안되는게 맞죠?
그런데 이미지 프로세스 모듈 (https://xe1.xpressengine.com/index.php?mid=download&package_id=22753726) 과 동시에 이용시 작동이 안되는 것 같은데, 혹시 단독으로만 사용해야 하나요?
저희는 이미지프로세서 모듈 사용합니다. 잘 되네요. 혹시 애니메이션 gif 이미지를 리사이즈해서 움직임이 없어진 걸 말씀하신거라면 그건 원래 그런거라서....
수고 하셨습니다^^
모바일에서 네이버앱, 크롬, 삼성브라우저(?)에서 테스트 했을때는 별다른 이상 없었는데요... ㅠㅠ
http://a3ghost.dyndns.org/free
위 홈페이지에서도 동일한 오류 발생하는지 확인좀 해주세요.
내부망에서 테스트용으로 사용하던 개인 홈서버 입니다. 잠시 외부ip로 변경 했습니다.
=====
위 홈페이지에서는 버튼 아래쪽에 숫자가 표시될겁니다. 처리시간 알아보기위해 디버깅용으로 표시하는거니까 개의치 마세요.
라이믹스에서 포함된 photoswipe 애드온을 XE에 설치해서 사용중인데 영향이 있을까요 ?
XE를 설치하고 테스트 해보도록 하겠습니다 @.@
제 사이트 스킨이 문제 였던것 같습니다. pjaxboard를 사용중인데 flatboard로 변경하니 되네요. :-)
img태그가 애드온 적용후에는 <inline class="animated-gif"> 태그로 감싸져 있을겁니다. pjaxboard사용시 이 형태가 변형되는거 같은데 출력이 어찌 되는지 알려주시면 수정에 도움이 되겠습니다.
모바일에서 가능하다면... 데이터폭탄을 방지할 수 있겠네요...
제가 찾던 기능입니다.
그런데 혹시 PC 모바일 모두 동작시키고 옵션에서 실제 사용자확인 후 재생은 모바일에서만 하게끔 하면 좋지 않을까요 ?
왜냐면 데이터폭탄 방지로 대부분 모바일에서만 작동시키길 원할 수 있는데 이렇게 되면 섬네일 생성등의 작업이 모바일 방문자에의해서만 동작이 되니 부하가 걸리는 작업이 모바일에 편중될 듯 싶어서요.
1. 모바일 사용자에게만 보이기 옵션을 추가한다.
2. 1의 옵션이 활성화 상태이면 XE 애드온 옵션에서 PC, Mobile모두 체크한 상태여도 모바일 사용자 에게만 적용된다.
3. 단, 속도 향상을 위해서 PC사용자가 문서에 접근하면 섬네일 작업까지는 진행한다. 다만 실제 적용은 하지 않는다.
정도 일까요?
대신에 PC나 모바일에서 사용가능 유무는 설정에서 셋팅하도록 ~
저는
옛날 오래된 컴에서 gif 한번뜨면 컴퓨터 멈춰버리는 경우도 있으니 PC에서도 사용하면 좋을 것 같아요
서버가 일을 해야 하는데 모바일 방문자에게만 편중시키기 싫어서요.
혹시 글을 수정하거나 새로 작성해야 동작하나요 ??
이것도 아니네요. 관지라계정으로 회원글 수정해봤는데 동일하게 동작안하네요.
이 애드온은 글 수정과 관계없이 글을 읽을때마다 작동 합니다.
컨텐츠중에 img태그가 포함되어 있고 링크가 외부이거나 내부일경우 이모티콘이나 기타 컴포넌트의 작동을 해치지 않기위해 첨부파일내(files/attach/아래의 파일)의 파일일 경우에만 작동합니다.
아래같은 이미지가 검출 되었을경우
이것을 아래처럼 바꿔서 출력합니다.
버튼을 위해 다른 클래스등이 추가되었지만 img태그를 살펴보면 진짜 링크는 data-gif에 등록되어있고 src에서 섬네일을 지정해서 섬네일이 보여지게 만듭니다.
이후 사용자가 재생버튼을 클릭하면 자바 스크립트를 이용해서 src값이 data-gif의 값으로 대체되는 형식 입니다.
일단 홈페이지 주소에 xe가 포함되어 있으면 제가 의도한대로 작동하지 않을 수 있겠다는 생각이 듭니다.
그 외에 버그라고 생각되는 부분있다면 말씀 해주세요.
그리고 잘 작동하지않는곳의 링크 주시면 도움이 됩니다.
몇가지 더 보완해서 다음버전으로 뵙겠습니다. ㅎㅎㅎ
제가 보내드린 주소의 게시물이 이제는 모바일에서 웹뷰앱에서만 재생하면 없는 이미지입니다.
그런데 다른 주소의 게시물은 또 괜찮네요. 해당 게시물은 크롬에서는 괜찮구요. 이상한 증상이네요.
많은 도움이 되었습니다. 감사합니다.
http에서 https로 변경하면서 본문 내용 건드리기 싫어서 그냥 애드온으로 땜빵했던게 문제인거죠.
저도 ssl 지원 애드온 사용중인데, 생각해보니 예전에 ssl 적용 전에 작성되었던 게시물들만 한번 수정해 주면 저 애드온은 더 이상 사용할 필요가 없을 거 같네요
저희는 xe폴더까지 사용을해서 확실하게 하려고 저기까지 바꿔치기 했어요.
쿼리문 실행하고나니 2800여개 였던가 ㅋㅋ 바뀌었습니다. 애드온으로 땜빵했었는데 이자료와 충돌인지 http로 로드하는 바람에 쿼리로 이번참에 바꾸었네요.
어차피 SSL 적용 이후에 작성된 게시물은 https://사이트주소 라고 되어 있을테니, 이제 더 이상 SSL 지원 애드온 사용하지 않아도 되겠네요
애드온 충돌일까요?
김짤닷컴입니다ㅠㅠ