RX/XE 기능개발 내역 - 썸네일 확장 (sejin7940_thumb)
RX/XE 기능개발 내역
의뢰 전에 실제 구현가부가 걱정되시는 경우
또는 XE로 이런게 구현가능한지 의구심이 드는 경우들을 위해
실제로 XE 기반으로 제작한 기능들을 간단히 소개합니다.

단, 기재한 모든 기능들은 전부 의뢰자들의 요청에 의해 제작된 유료자료들입니다.
( 타사이트들처럼 템플렛형태로 다량 판매 자료로 만들어진 자료들이 아닙니다. )

따라서 가격대가 저가는 아님을 미리 알려드립니다. ( 기존 의뢰자와의 형평성을 감안해 비용측정됩니다)
구매 및 제작 원하시면 XE 제작의뢰 게시판에 글을 남겨주시면 됩니다.

[썸네일 확장 (sejin7940_thumb)] 첨부파일 중 원하는 순번의 파일을 썸네일로 생성하고 출력시키는 확장 기능 구현

sejin7940 조회:284 2017.05.03 16:36

기존의 sejin7940_thumb 애드온은 ( 유튜브/비메오 자동 섬네일 추출 애드온 )  sejin7940_movie_thumb 으로 이름을 바꾸고

썸네일 확장 기능 모듈인 sejin7940_thumb 을 새로 만들었다

 

이를 만들게 된 이유는..  썸네일 생성 관련된 XE 내의 한계를 극복하기 위해서이다.

 

XE 는 document 모듈과 comment 모듈 모두 썸네일을 추출하는 함수가 있다

썸네일 추출 함수는 단순히 추출하는 것 뿐만 아니라, 썸네일이 없을 경우 썸네일을 생성한 후 주소를 바로 반환해준다

썸네일로 선택한 이미지 (cover_image) 기능을 사용 안 한 경우 첫번째 이미지를 썸네일로 만들어준다

 

썸네일이라는 건 사이트 속도 부분에서 굉장히 중요한 요소이다

특히 PC 가 아니라 모바일 환경에서는 굉장히 중요한 문제가 된다.

 

물론 갤러리라든지 웹진형의 경우 일반적으로는 썸네일을 추출해도 어차피 하나만 출력하기에 문제가 없지만

만약 2개 이상의 썸네일을 추출하고 싶은 경우는....  굉장히 큰 문제가 발생하게 된다.

글 ( 또는 댓글 )당  하나의 파일(또는 이미지)에 대한 썸네일만 생성하게 되어있다보니

여러개를 표현하려면 불가피하게  파일목록 전체를 추출한 뒤, 원본이미지를 작게 줄여서 출력할 수 밖에 없게 된다

첨부한 원본 이미지가 작다면야 문제가 없지만, 이미지가 크다면... 

이미지를 여러개 출력시키는 목록 등에서는 속도나 트래픽에서 치명적인 단점이 생기게 된다

 

결국, 필요한 경우 첨부파일들을 첨부 썸네일화해서 추출할 수 있는 기능이 필요하다

따라서 별도의 썸네일 추출함수를 만들어서

썸네일을 바로바로 생성해서, 그 생성한 작은 크기의 썸네일을 출력시키는 함수를 새로 만들었다

 

개발하면서 점점 기능적으로 답답했던 부분들을 보완하기 위해서

첨부된 파일중 원하는 순서의 파일을 썸네일로 만드는 함수로까지 확장을 했다

 

즉, 무조건 첫번째 이미지 / 또는 cover 선택한 이미지가 아니라

첨부파일 중 세번째 첨부파일을  썸네일화해서 썸네일 추출하는 기능 형태로 구현이 된다

 

 

예를들면  첨부파일을 아래처럼 1,2,3,4 순서로 했어도

 

thumb1.jpg

 

 

함수 사용에 따라 아래처럼 원하는 위치에  2,1,4,3  형태로 출력이 가능하다

( 당연히  세번째 이미지만 출력시킬 수 도 있고.. 다 가능하다 )

그리고 원본파일이 아니라 썸네일이다 (  13KB 이다 . 원본은 762KB 이고 )

 

thumb2.jpg

 

 

 

썸네일이 추출되는거기에 클릭시 확대해도 당연히 썸네일만 나와 확대 의미가 없지만

확대기능이야 view 에서 사용하는 거고,  list 에서는 썸네일 추출만 원하기에

( 아니면 썸네일 추출자체를 크게 한 뒤,  추출한 썸네일을 img 태그에 넣을때 크기를 강제조정하면  이 부분도 해결가능하다 )

 

원하는 파일을 썸네일화하고,  원하는 썸네일을 원하는 위치에 추출할 수 있는 함수를 만든거기에

일단 이 기본만으로도 여러 확장성이 있다

 

( 당연히 첨부파일 외에, 본문에 추가된 이미지 태그 들도 순서대로  추출해 썸네일화할 수도 있다 )

 

 

목록
전체 2건
카테고리
XE Login