자료실

링크 프리뷰

2022.11.29 09:50
12,780
23
자료 유형 모듈
간단한 소개 CKEditor에 링크를 '붙여넣기'하면 미리보기 카드 또는 임베드 코드로 '바로 변환'해줍니다.
설치 경로 ./modules/preview
코어 지원 범위 Rhymix 2.1
PHP 지원 범위 기타
자료 구분 공개 자료
라이선스 GPL v2
저장소 URL https://github.com/cydemo/rx-module-preview
파일명버전날짜용량다운로드 수
preview.0.3.3.changed.zip 0.3.3 2025.01.30 201.1KB 69
preview.0.3.2.changed.zip 0.3.2 2025.01.24 41.0KB 51
preview.0.3.1.changed.zip 0.3.1 2025.01.20 14.7KB 54
preview.0.3.0.zip 0.3.0 2025.01.20 171.9KB 63
preview.0.2.3.changed.zip 0.2.3 2025.01.03 45.2KB 47
preview.0.2.2.changed.zip 0.2.2 2024.12.29 96.3KB 41
preview.0.2.1.changed.zip 0.2.1 2024.12.24 33.1KB 46
preview.0.2.0.zip 0.2.0 2024.12.15 144.5KB 82
preview.0.1.0.zip 0.1.0 2024.10.30 65.7KB 75
preview.0.0.7.zip 0.0.7 2024.10.14 65.9KB 31
preview.0.0.6.zip 0.0.6 2023.12.24 65.4KB 193
preview.0.0.5.zip 0.0.5 2023.12.15 64.9KB 37
preview.0.0.4.zip 0.0.4 2022.11.30 63.6KB 232
preview.0.0.3.zip 0.0.3 2022.11.29 62.8KB 63

- CK에디터 안에서 링크 프리뷰 카드를 바로 삽입해줍니다.

스크린샷 2024-10-30 114104.png

 

 

- CK에디터 안에서 미디어 콘텐츠를 바로 임베드해줍니다.

01.png

 

 

0.3.3 업데이트

- 2025.01.30

: 이번 0.3.3 버전은 기존의 0.3.2 버전까지 설치되어 있어야 하며 그 위에 덮어쓰기로 적용하시면 됩니다.

- [미디어 임베드]

  • 전체
    : 첨부파일 삭제시 본문삽입 콘텐츠 동시 삭제 기능 개선
    : 오디오/비디오 파일 드래그앤드롭시에 업로드 프로그레스바 및 재생목록 구현

  • 4shared : 신규 지원 (뮤직, 비디오)

  • Audio : 신규 지원 (첨부파일 삽입 방식)

  • Video
    : 여러 파일 삽입시 file_srl값 사용 방식 개선
    : 재생목록의 가시성을 위해 색상 조정

  • Youtube : 세로 영상 썸네일 양식 변경(세로로 긴 썸네일은 쇼츠에만 해당하게 됨)에 대응

- [보안 설정 추가 : 외부 멀티미디어]

www.4shared.com

- [보안 설정 추가 : html class]

4shared-embed-music
4shared-embed-video
audio-embed

 

 

0.3.2 업데이트

- 2025.01.24

: 이번 0.3.2 버전은 기존의 0.3.1 버전까지 설치되어 있어야 하며 그 위에 덮어쓰기로 적용하시면 됩니다.

- [전체] : 내장 비디오 플레이어의 재생 목록 컨테이너 세로 사이즈 조절

- [미디어 임베드]

  • MS Office : 로드 시간 단축을 위해 대용량(200kb 초과) 엑셀 파일은 썸네일 생성 방지 #1855846

  • Nadio : 신규 지원 (오디오 시리즈)

  • Video : 정규표현식을 교체해서 다양한 본문 삽입 코드들에 대응 #1855612

- [보안 설정 추가 : html class] nadio-embed

 

0.3.1 패치

- 2025.01.20

: 이번 0.3.1 버전은 기존의 0.3.0 버전까지 설치되어 있어야 하며 그 위에 덮어쓰기로 적용하시면 됩니다.

- [전체] 가로세로 사이즈 수치가 없는 경우 스크립트 전역 변수 설정이 먹통이 되는 문제 수정 (팔공산님)

- [미디어 임베드] Video : 세로 영상 출력시 영상 비율 적용 (팔공산님)

 

0.3.0 업데이트

- 2025.01.20

- [전체]

  • 관리자 설정에서 미디어 임베드 분류에 '첨부파일 삽입'을 추가
  • 자체 비디오 플레이어
    : 초기 동작에서 로딩 이미지 출력
    : 제목 글씨의 시인성을 위해 text-shadow 속성값 수정 + 검정색 기반 그라디언트 배경색 설정
    : 플레이리스트 구현
    : 한 페이지에 여러 플레이어가 있을 때, 새롭게 재생이 시작되면 이미 재생 중인 다른 플레이어는 일시 정지
    : 콘텐츠 재생시 브라우저 정보에 제목과 대표 이미지 전달 및 반영
    : 볼륨 컨트롤 요소를 모바일 기기에서 가리게 했던 조건을 없앤 대신 css의 디바이스 넓이에 따라 요소를 가리도록 수정
    : 웹브라우저 자체의 멀티미디어 재생 제어 기능과 연동

- [프리뷰 카드]

  • 프리뷰 이미지의 사이즈 조정 옵션 제공 (에카님)

- [미디어 임베드]

  • MS Office
    : 내장 아이프레임 대신 MS 오피스 임베드 서비스 url 바로 호출
    : 첨부파일 삭제시 아이프레임도 동시에 제거 (신규 생성 아이프레임에만 해당)
    : 첫 페이지 스크린샷으로 내장 썸네일 처리

  • [미디어 임베드] Pdf
    : pdf 첨부파일 자체의 썸네일 생성 및 썸네일 경로 DB 저장 (문서의 첨부파일 목록에 나오지 않음)
    : 콘텐츠의 썸네일용 이미지가 이미 첨부되었을 경우 중복 첨부를 방지
    : 첨부파일 삭제시 아이프레임도 동시에 제거 (신규 생성 아이프레임에만 해당)

  • Spoon
    : spooncast에서 spoon으로 명칭 변경
    : 플레이리스트가 업데이트되는 경우에 대응하여 초기의 제목과 썸네일용 이미지를 프로필 정보로 대체 (기존에는 첫 곡 정보였는데, 업데이트가 되면 해당곡의 순번이 뒤로 밀리거나 사라지게 됨)
    : 입장 정보(room_token)를 요구하는 라이브 방송도 프리뷰 카드(프로필 페이지)를 출력하지 않고 비디오 플레이어로 출력 후 에러메시지 출력
    : 종료 후 (새로운 라이브 id로) 재개된 라이브 방송도 재생할 수 있도록 수정

  • Video : 신규지원. mp4, webm 등의 동영상 첨부파일의 본문삽입시 내장 플레이어로 재생

  • Youtube : 일반적인 롱폼 영상의 가로세로 비율을 정확히 측정해서 콘텐츠 임베드 (1852364)

- [보안 설정 추가 : html class]

  • spooncast-embed 삭제

  • spoon-embed
    video-embed

 

이전 업데이트

- 이전 업데이트의 내역은 작업 노트 문서를 참조

 

 


 

 

1. 설치 방법

- 첨부한 압축파일을 압축 해제하고 ./modules/preview 에 설치합니다.

- 파일 업로드 후 다음 페이지에 나오는 '1. 보안 설정', '2. CK에디터 플러그인 설치'를 따라합니다.

- https://dev.aporia.blog/board_fKje48/46714#user_content_chapter_1

 

2. 모듈 설정

- 관리자 페이지의 고급 > 설치된 모듈 > 링크 프리뷰로 들어가서 설정값을 입력합니다.

1) 기본 설정

  • 모듈 사용 : 아니오를 선택하면 모듈 전체가 실행되지 않습니다.
  • 링크 텍스트 남기기 : 프리뷰 카드 및 임베디드 미디어와 함께 링크 텍스트를 남기거나 지울 수 있습니다.
  • 링크 텍스트 꾸미기 : 링크 텍스트를 표시할 때 스타일을 줄 수 있습니다. 기본값은 <p>%text%</p>입니다. %text% 앞 뒤로 태그를 붙여 스타일을 꾸며보세요.
  • 사용자 스크립트 : 스크립트 구문을 추가할 수 있습니다. script 태그 안에 들어갈 구문만 입력해주세요.

2) 프리뷰 카드 설정

  • 프리뷰 카드 사용 : 링크 페이지 미리보기를 카드 형식으로 출력할 수 있습니다.
  • 스킨 : 프리뷰 카드의 스킨을 선택합니다. 기본 스킨(default)이 제공됩니다.
  • 외부접속 제한 시간 : 프리뷰를 위해 url의 서버와 연결할 최대 시간을 제한합니다.
  • 입력된 도메인만 : 특정 도메인에 대해서만 프리뷰 카드 생성을 허용하거나 허용하지 않을 수 있습니다.
  • 허용/제외할 도메인 : 프리뷰에서 허용 또는 제외할 도메인을 줄 단위로 입력합니다. (가급적 '허용' 옵션 선택을 권장합니다)
  • 이미지 파일 첨부 : 링크 페이지의 대표 이미지를 파일로 저장할 수 있습니다.
  • 파일 첨부 예외 도메인 : 이미지 파일 첨부 대상에서 제외할 도메인을 줄 단위로 입력합니다.
  • gif를 jpg로 : 링크 페이지의 대표 이미지가 "움직이는 gif" 파일일 경우 "jpg"로 변환하여 저장합니다.

3) 미디어 임베드 설정

  • 미디어 임베드 사용 : 주요 미디어 콘텐츠들을 iframe 형태로 바로 삽입할 수 있습니다.
  • 미디어 임베드 목록 : iframe으로 삽입할 미디어 콘텐츠들을 선별할 수 있습니다.
    - https://dev.aporia.blog/board_fKje48/46714#user_content_chapter_3 3번(지원사항) 항목 참고

4) 게시판 공통 설정

  • 선택한 모듈에서만 : 특정 모듈에서만 프리뷰와 임베드를 작동 또는 미작동시킬 수 있습니다.
  • 모듈 목록 : 작동 또는 미작동시킬 모듈을 선택합니다.

 

3. 소소한 팁

  • ./modules/preview/tpl/css 폴더에 custom.css 파일을 만들어 저장/업로드하면  자신만의 스타일로 프리뷰 카드와 미디어 임베드를 제어할 수 있습니다.
  • ./modules/preview/skins 폴더에 프리뷰 카드 스킨 폴더를 만들어보세요. 기본 제공되는 $preview_info 변수를 활용해서 다양한 스타일을 꾸며볼 수 있습니다.
  • '프리뷰 카드 설정'에서 '입력된 도메인만' 항목에서는 '허용'을 선택하기를 권장합니다. 작지 않은 확률로 프리뷰를 위한 데이터 수집에 실패할 수 있기 때문입니다.
윤삼 Lv. 19
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.

댓글 359

  • 2025.02.20 01:43 #1859745
    링크프리뷰 모듈은 0.3.0으로 기존 모듈을 완전히 덮어쓰기 하시구요.
    그 다음에 0.3.1, 0.3.2, 0.3.3 등의 변경 파일들을 순차적으로 업데이트해보세요.
    혹시 이 절차로 모듈 설치 및 업데이트가 된 게 아니라면 높은 확률로 오류가 생길 겁니다.
  • 2025.02.20 02:02 #1859751
    정회원이 돼야.. 쪽지를 보낼 수 있군요..ㅠㅠ 정회원은 언제쯤이나..ㅠ

    https://momstouch.org/testboard

    계정아이디 cuniculus@gmail.com
    패스워드 asdf1234


    혹시 최고 관리자 권한이 필요하면 말씀해 주시면 그렇게 변경할께요

    이렇게 도와주셔서 정말 감사합니다.
  • 2025.02.20 02:08 #1859754
    가입신청서 파일을 제 사이트에서 테스트해본 결과 잘 임베드됩니다.
    말씀드렸던 것처럼
    - 링크프리뷰 모듈을 0.3.0부터 순차적으로 설치 및 업데이트했는지
    - 링크프리뷰 모듈 설정에서 미디어 임베드 항목에서 pdf도 체크가 되었는지
    등을 우선적으로 확인해보시구요.

    그래도 문제가 있는 경우라면 관리자 권한을 잠시 제공해주시면 좋겠습니다.
    오늘은 8시 이후에 테스트해볼 수 있을 것 같으니 필요하시다면 그때쯤 또 댓글 달아주세요 :)
  • 2025.02.20 02:23 #1859762
    짓헙에서 소스 통째로 받아서 했는데.. 그게 문제였을까요....
    0.3.0으로 다시 덮어씌우기 하고 순차적으로 덮어씌워보겠습니다..

    감사합니다!
  • 2025.02.23 15:55 #1860319
    textarea에서는 사용이 불가한가요? ㅜ
    자료소개에는 CKEditor 에디터가 명시되어있긴한데 ㅜ 한번 문의드려봤습니다!
  • 2025.02.23 22:53 #1860353

    네, cj에디터만 지원합니다~

    아 ck요. 방금 cj 쇼핑몰 구경하다가..ㅋㅋ

  • 2025.02.24 00:17 #1860362
    답변 감사합니다!
  • 2025.02.25 16:19 #1860629
    글에 링크 추가시 생성되는 프리뷰 카드가 생성되면 제 사이트에서는 몇 가지 문제가 발생 하더군요.
    - 프리뷰 카드가 생성된 글에서는 사이드 로그인 팝업 버튼이 안뜸
    - 프리뷰 카드가 생성된 글에 대댓글이 안뜸

    이런 오류가 있는데 이걸 보여 드리기 조금 애매 합니다. 오류가 생길때 글 수정으로 프리뷰 카드 삭제하고 다시 링크 달면, 또 됩니다.

    방금도 글에서 오류가 보였는데 프리뷰 카드 지우고 다시 링크 추가하니 정상화 되네요.

    나중에 재현되면 링크 추가 하겠습니다.
  • 2025.02.25 23:36 #1860642
    아마도 사용 중이신 레이아웃과 css 또는 js 충돌이 있지 않나 싶은데요.
    여건이 되신다면 관련 사항도 체크해보시면 좋을 것 같습니다.