미디어 임베드 애드온을 배포했습니다.

https://xetown.com/point_contents/1564278

 

정식으로 한다고는 했는데, 아무래도 혼자는 역부족이어서 버그가 적지 않을 것으로 예상됩니다.

보통은 포인트 컨텐츠 자료실에서 소통을 해도 되는데,

자료실 댓글 커맨드가 아무래도 기능이 미흡해서 (별점 외에는 텍스트만 사용가능하고 보기도 불편하죠ㅜ)

이 게시물을 스레드 삼아 당분간 여기서 소통을 하고자 합니다.

 

테스트를 한다고는 했는데,

아마 관리자 외의 경우 보안 때문에 코드가 날아가는 경우가 있어서 그 부분이 좀 걱정이 되긴 합니다.

많은 의견 부탁드립니다~

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • Lv30

    <p>링크</p>
    가 제거 되면서 약간 애로점이 생기네요.
    동영상섬네일 애드온(유료)에 의존하려면 위 링크가 제거가 되면 안되는 상황인데요.

    애매한 지점입니다.(네이버,카카오 의 경우 동영상섬네일 애드온에서 섬네일을 지원하고 있어서...)

    네이버는 p태그가 없는데도 섬네일용 파일이 첨부가 되긴 하네요.

  • Lv30 Lv19
    링크 텍스트를 남길 필요가 있다는 말씀이시죠?
    그 생각을 놓치고 있었네요.
    중요체크!
  • Lv19 Lv30
    네. 제거가 되는게 오히려 문제가 되는 경우가 더 많을 것 같습니다.
    링크가 있어야 하는 상황이 있을 것 같습니다. embed에서 공유기능을 찾을수도 있겠지만... 접근성을 고려한다면...
  • Lv30 Lv19
    반응 속도를 높이기 위해 꼼수를 썼었는데 썸네일 가져오는 것도 고민을 좀 해봐야겠습니다.
  • Lv19 Lv30
    섬네일만 해결된다면 링크가 없어져도 아주 큰문제는 아닐 수 있겠네요.
  • Lv6
    감사합니다.
    잠깐 밖에 나왔는데 빨리 들어가서 설치하겠습니다.
    미디어 임베드 끝판왕
  • Lv6 Lv19
    해보셨습니까? 분명 문제가 있을 텐데 주말이어서 그런지 다들 뜸하시네요.
  • Lv19 Lv6
    라이믹스 2.0.10에서 특별한 문제점을 발견하지 못했습니다.
    라이믹스 2.0.11로 업데이트 후에도 사용상의 문제점은 없는 것 같습니다.
    감사합니다.
  • Lv30
    *버그제보 요청사항 아님*

    본문의 섬네일 이미지는 display:none 으로 하는게 더 좋은 운영자도 있을 수 있겠네요. 이건 취향문제 일수도 있지만 유튜브 작은이미지가 PC 큰화면 100%로 채워져서 잠시 보였다가 선명한 영상의 섬네일로 바뀌는게 이전에 봤던 이미지가 차이가 조금 느껴지는..

    이건 자료에서 수정이 필요 사항이 아닌 자료를 사용하는 운영자 마다 선택을 할 수 있는 부분이라 살짝 언급해 봤습니다. 뒤쪽에 이미지 안보이게는 각자 css에서 display:none; 만 추가해 주면 되는 문제니까요.
  • Lv30 Lv19
    네, 그거는 none으로 처리하셔도 되구요.
    css 파일을 보면 img에 filter로 blur가 들어가 있을 텐데 해당 filter를 삭제하면 썸네일 원본 이미지를 제대로 볼 수도 있을 거예요.
  • Lv19 Lv30

    블러 제거해도 이미지가 너무 작아서 PC 큰화면에서는 화면에 맞추면 화질이 낮아서 없는게 낫겠더라구요.

  • Lv30 Lv19
    큰 화면 생각하면 none 이 나을 수 있겠네요 :)
  • Lv30

    url 주소를 없애는것이 옳은 것인가? 에 관해 잠시 고민을 해봤습니다.
    호불호 취향문제로 볼수도 있지만 꼭 해당 url을 적는 것이 목적인 이용자에게는 의도한 것을 하지 못하게 하는 것의 결과로 바뀌는 건데요..

    확실한 판단은 서지 않고 있습니다.

    트위터 게시글을 공유해보니 이점은 굉장히 안좋아 보이네요. 쉽게 퍼나르기 어려워 보여요. 인스타그램 또는 미디어에 따라 공유 자체를 찾지 못하는 경우도 많아 보입니다.

  • Lv30 Lv19
    붙여넣기했을 때 이용자가 직접 선택하는 것도 방법일 텐데 그건 생각만해도 왠지 복잡해서ㅋㅋ
    링크 파싱 애드온 때처럼 애드온 옵션을 둬서 url 병기를 하든 임베딩만 하든 하게 해주면 될 것 같아요.
  • Lv19 Lv30
    네. 옵션으로 해서 붙여넣기 한 url이 남도록 할 필요가 있다고 생각이 기울고 있습니다.
    사용자에 따라 그게 없었으면 한다면 스스로 지우면 그만일 것이란 생각도 들구요. 개인적으로는 url 정보가 중요정보라 있는게 더 좋다라고 보여지네요.
  • Lv5
    버그는 아니지만,,
    한 게시물에 여러개의 유튜브 영상을 업로드 할 시
    스크롤바를 줄이기 위해 가장 첫번째 URL만 자동 변환하고
    나머지 링크들은 링크 클릭 시 변환되게 하는것도 좋을 거 같다는 생각이 듭니다!
  • Lv5 Lv19

    과거의 oembed 애드온이나 링크파싱 애드온, 파서링크 모듈 등에서는 그렇게 구현해볼 수 있을 것 같은데요.
    현재 미디어 임베드 애드온은 에디터에 iframe 태그를 바로 입력하는 성격의 애드온이서 그렇게 하는 건 불가능할 것 같습니다.

    몇몇 서비스의 경우에는 lazy loading(스크롤 위치에 따라 순차적으로 로딩)을 지원하기도 하는데요.
    유튜브에서 그런 걸 하려면 api 키를 발급받아 서비스를 이용하면 가능하긴 합니다.
    그치만 아무래도 범용 애드온으로 만든 것이다보니 이용자들에게 api키 발급과 입력 등의 수고까지 끼치게 하기가 힘든 측면이 좀 있네요ㅜ

  • Lv19 Lv5

    안되는 이유를 자세히 설명 해주셔서 감사합니다!
    애드온 설치하여 테스트중인데 속도도 빠르고 위에 웹지기님 의견처럼
    URL 출력 안되는 부분 외에는 매우 만족스럽네요.

    계속 사용해보고 버그 발생 시 피드백 드리겠습니다!

  • Lv5 Lv19
    네, 부탁드리겠습니다~~
  • Lv5

    프로알라 에디터 사용자분들 중에서는 인스타그램 게시글이 절반만 불러와지는 현상이 있었습니다.
    이 경우 js 폴더의 _froala에서 instagram의 span에 있는 fr-video만 삭제해주니 정상적으로 작동되는것 같습니다!
    해결 방법 알려주신 윤삼님 감사합니다!😀😀

  • Lv5 Lv19

    프로알라 에디터 사용시 모바일에서 나타나는 현상인데요.
    정확하게는 미디어 쿼리에 의해 device 넓이가 줄어들었을 때 fr-video 요소의 가로 세로 비율이 16:9 사이즈로 잘리게 됩니다.
    일단 언뜻 보기에는 fr-video를 삭제하면 해당 요소의 일종의 위젯 기능(전체 삭제 기능을 비롯해 드래그 앤 드랍 같은 기능들)이 무효화되는 것 같으니, 이 부분을 감안하시고 해당 클래스명을 삭제하시면 되겠습니다.

    차후 버전에서는 이 문제에 대응할 수 있는 방편도 연구해보도록 하겠습니다.

  • Lv5 Lv19
    fr-video보다 이 방법이 더 나아 보입니다~
    https://xetown.com/topics/1564294#comment_1565199
  • Lv5 Lv19
    0.4.0 업데이트가 나왔는데 이번부터는 프로알라 에디터 지원을 하지 않기로 했습니다.
    작업량이 너무 많아져서 힘이 부쳐서요ㅜ
    양해 부탁드리겠습니다ㅠㅠ
  • Lv19

    @벨로위키

    애드온 관련 소통은 여기서 하도록 할게요 :)

     

    1. 트위터 입력 화면에서 잘 보이는 것 같습니다. 혹시 모르니 브라우저의 쿠키, 인터넷 사용기록, 캐시 등등을 삭제해보시겠어요?

    1.png

     

    2. 아프리카 티비도 브라우저 호환성 문제인 것 같은데요. 윈도우+크롬에서는 잘 나옵니다. 이 부분은 아프리카 쪽의 문제라고 봐야 할 것 같아요. api와 액세스 토큰 취득 등 복잡한 절차를 따르지 않고 영상을 따오는 것이라 브라우저 호환성에 문제가 있을 수도 있겠습니다.

    0.png

  • Lv19 Lv4

    알려주신 방법으로 하니 컨트롤러가 생겼습니다. 추가로 콘솔 에러가 있어서 제보해 드립니다. 

    nrecognized feature: 'web-share'.
    index.html:7 The key "target-densitydpi" is not supported.
    DevTools failed to load SourceMap: Could not load content for https://res.afreecatv.com/css/global/mobile/mobile_embed_player.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
    rhymix.min.js?20210501000457:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210501000457:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210501000457:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210501000457:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    DevTools failed to load SourceMap: Could not load content for https://static.m.afreecatv.com/lib/hls/hls.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
    www.instagram.com/:1 Uncaught (in promise) undefined
    load (async)
    (anonymous) @ b638c28265e0.js:52
    t @ b638c28265e0.js:52
    m.exports @ b638c28265e0.js:52
    (anonymous) @ b638c28265e0.js:2
    requestIdleCallback (async)
    (anonymous) @ b638c28265e0.js:2
    c @ (index):22
    i @ (index):22
    r @ (index):22
    (anonymous) @ b638c28265e0.js:1
    c @ (index):22
    i @ (index):22
    r @ (index):22
    (anonymous) @ b638c28265e0.js:190

  • Lv4 Lv19
    노란색 경고는 무시하셔도 되고, 빨간 색이 뜨더라도 콘텐츠 삽입이 잘 되고 컨트롤이 잘 된다면 상관 없을 겁니다. 그쪽 사이트의 문제 같더라구요 :)
  • Lv19 Lv4
    😍 감사 합니다. 정말 대단한 애드온인 것 같습니다.
  • Lv19 Lv4
    단순히 영상들만 임베드 되는 줄 알았는데 트위터나 페이스북 게시글도 임베드 되는걸 보고 깜짝 놀랐는데요 혹시 이런식이라면 네이버카페나 당근 마켓 번개장터 이런 곳도 임베드가 가능한 것인가요?
  • Lv4 Lv19
    일단 해당 사이트에서 정보를 제공해줘야 하구요.
    오픈 그래프(og)를 준수하는 사이트라면 기본 정보 정도는 파싱해서 가져올 수 있죠.
    파서링크 모듈이 있기는 한데, 미디어 임베드 애드온의 궁극적 목표는 붙여넣기를 했을 때 링크 프리뷰 카드를 입력해주는 거랍니다~
  • Lv8

    아직 다양한 동영상을 이용하지 않아 모르겠습니다만,

    유투브 동영상 이용 시입니다.

     

    작업을 마치고 리스트(목록, 특히 갤러리나 그리드 형태)에서 보면 섬네일이 

    실제 이미지 파일을 첨부한 글과는 다르게 나타나는 것 같습니다.

    (레이아웃이나 스킨 영향 때문인 것 같습니다만 원인을 모르겠네요. ㅠ.ㅜ)

     

    media-embed-1.jpg

     

    왼쪽은 이미지 파일이 첨부된 글이고 오른쪽은 media-embed 애드온으로 링크 포함된 글입니다.

    섬네일이 조금 다르게 나타나네요.

     

    이런 현상은 어떻게 조정해야 할지 몰라서요..

     

    혹시 원인 등을 알 수 있을지요.

    감사합니다.

     

    ps. 

    추가로 확인해 보니 내부 이미지 링크는 정상적으로 섬네일 보여주지만

    외부 링크는 오른쪽 항목처럼 이미지가 다 나오지는 않네요.

     

    애드온 영향은 아닌 것 같습니다. ^^;;

    그래도 너무 편하게 사용 가능한 애드온 만들어 주셔서 감사하게 사용하고 있습니다. ~

  • Lv8 Lv19
    네, 왠지 그럴 것 같았습니다.
    썸네일 생성 함수에서 차이가 발생할 수도 있을 거고, 아니면 게시판에서 따로 다른 방법을 써서 그런 걸 수도 있을 것 같아요.
  • Lv19 Lv8

    네 확인해 보니 스킨에서 섬네일 크롭을 width 360px 으로 하고 있네요.
    그러다 보니 원래 유투브 섬네일 320px 보다 크니 나머지를 흰 여백으로 크롭해 놓는 것 같습니다. ^^;;
    (그럼 크롭 이미지 사이즈를 줄여야 하나... 그럼 태블릿 등에서 섬네일이 너무 흐릿해서 ...)

    원인 알았으니 어떻게든 조정해서 타협해 봐야 겠습니다. (360 x 280 -> 320 x 180 이미지 크롭 사이즈 조정으로 해결? 타협?)
    감사합니다 ^^

  • Lv8 Lv19
    요즘은 crop이나 ratio보다는 fill이 대세인 것 같던데요ㅎㅎ
    라이믹스도 이번 버전부터는 fill을 기본으로 한다고 합니다~
  • Lv19 Lv8
    ㅋㅋ 전 그냥 소스에서 글자 몇 개 바꾸는 수준이라
    유료 스킨 사용 중인데 뜯어 고쳐야 하는 거라면 제 수준에선 불가항력적 영역입니당 ^^;;
  • Lv8 Lv19
    ㅠㅠ 그럼 사이즈 조정을 하셔야겠네요.

    _ckeditor.js 파일 하단에 보면
    mqdefault.jpg 라는 글자가 있을 텐데요.
    이걸 hqdefault.jpg 로 바꿔보세요~
  • Lv19 Lv8

    감사합니다.
    한번 try 해 보겠습니다 ^^;;

     

    앗,

    말씀 듣고 fill 해당하는 부분이 어딜까 살펴보다가

    getThumbnail() 함수에서 crop 부분이 있길래 이걸 fill 로 바꿨더니 가득 채워졌습니다. 야호 ~~~~

     

    여러모로 정말 많은 도움을 받고 있습니다.

    다시 한번 감사의 말씀을 ~

     

  • ? Lv17

    감사합니다. 테스트 해본 url 공유합니다.

    모두 공유 링크 를 사용하였습니다.

    실패
    레딧 - 로드 자체가 안됨

    성공
    사운드 클라우드 - 글쓰기시에는 정상이나 글 발행 이후 css 높이 디자인이 꺠집니다. height 100% 설정 때문인것 같은데

    왜 문제가 생기는지 잘모르겠네요. 


    슬라이드 세어
    비메오
    카카오tv
    네이버tv
    jsfiddle 
    codepen

    트위터 - 글쓰기시에 전체 내용이 표시 되지 않고 높이가 잘립니다. 그러나 글 등록후에는 정상적으로 로드 됩니다.

  • ? Lv17 Lv19
    확인을 한다고 했는데ㅜ 레딧과 사운드 클라우드는 다시 제대로 확인을 해봐야겠습니다.

    트위터를 비롯해 인스타, 페북, 틱톡 등 가로 세로 비율이 정해져 있지 않은 콘텐츠들은 에디터 내에선 아이프레임의 사이즈를 조절하는 게 불가능합니다ㅠ
    외부 사이트에서 작동하는 아이프레임 콘텐츠의 높이를 측정해야 하는데,
    특히나 에디터 안에서는 콘텐츠 높이를 가늠하기조차 어렵거든요.
    CK에디터에서도 한참 해보다가 실패했고, 프로알라에서도 마찬가지구요 ㅡㅜ
    그래서 iframe을 가져오는 게 가능하다면(그마저도 트위터 타임라인은 iframe을 바로 가져올 수도 없어요ㅜ) 가급적 밉지 않은 선에서 잘라서만 보여주기로 했습니다.
    소셜 미디어 콘텐츠를 에디터에 앉힐 때 아예 미리보기를 포기하는 것도 방법일 것 같은데, 판단이 잘 안 서네요.
  • Lv19 ? Lv17
    트위터를 비롯해 인스타, 페북, 틱톡 등 가로 세로 비율이 정해져 있지 않은 콘텐츠들은 에디터 내에선 아이프레임의 사이즈를 조절하는 게 불가능합니다ㅠ

    >> 하긴 그렇겠네요. 리포트 차원이었고, 크리티컬 하지 않습니다. 게다가 글쓰기시 미리보기 포기는 이 애드온의 의미를 크게 반감한다고 생각합니다.



    그리고...레딧 됩니다. ????

    사운드 클라우드 높이 문제만 좀 봐주시면 고맙겠습니다. 아무래도 프로알라에서만 생기는 문제 같습니다.
  • ? Lv17 Lv19

    iframe 태그를 감싸는 span 태그가 있을 텐데요.
    거기 스타일에 padding-bottom: 0; 라 돼 있는 걸 padding: 0; 으로 바꿔보시겠어요?
    보통 동영상 반응형으로 만들 때 padding-bottom으로 맞추는데, 프로알라에서는 신기하게도 padding-top으로 맞춰져 있네요ㅜ

  • Lv19 ? Lv17

    네. 소스보기를 눌러 padding:0으로 태그를 수정해봤는데 다른 변화가 없는듯 합니다.

  • Lv19 ? Lv17

    스킨에 이런게 들어가 있어서 지워버렸더니 해결 되었습니다.
    .xe_content > p.vid {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden}
    .xe_content > p.vid iframe,.xe_content > p.vid embed,.xe_content > p.vid object,.xe_content > p.vid embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%}

     

    전부 제탓입니다.^^ 고맙습니다.

  • ? Lv17 Lv19
    그거 지우면 다른 문서들이 영향을 받을 수도 있을 것 같은데..ㅜ
    암튼 신중하게 지우신 거겠죠.

    혹시 이후에 다른 콘텐츠 임베딩에서도 비슷한 문제가 생긴다면 비슷한 방식으로 접근하시고, 저도 참고할 수 있도록 알려주시면 좋겠습니다~
  • Lv19 ? Lv17
    네. 그렇더라고요. T.T 그래도 위 내용이 문제이니...원인이라도 알아서 다행입니다.
  • ? Lv17 Lv19
    아무래도 .xe_content > p.vid 삭제는 마음에 걸리네요ㅜ

    문제가 됐던 span 태그에
    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    등을 조합해서 적용해보시는 것이 어떨까 합니다.

    정 안되면
    padding: 0 !important 같은 것이라도요.
  • Lv19 ? Lv17

    신경써주셔서 감사합니다.

    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding: 0 !important ;

    .xe_content > p.vid {position: relative; padding-bottom: 56.25%; padding: 0; height: 0; overflow: hidden}
    요런식으로 전부 바꿔서 해봤는데....페이스북과 트위터 제외하고 다른 모든 임베디드된 내용들이 사라지네요...

    무엇때문인지..참...해서 위 내용 모두 삭제를 하면 전부 정상으로 돌아오나....모바일에서 애드온으로 삽입된 유튜브가 잘립니다

  • ? Lv17 Lv19
    아 p.vid 쪽이 아니라요.
    제가 의견 제시하는 데 스킵이 컸네요ㅠ

    애드온의 프로알라.js 을 보면
    각 미디어별로 코드를 삽입해주는 소스가 있는데요.
    거기에 soundcloud 부분
    => iframe 태그를 감싸는 span 태그(fr-video가 있는 부분)
    => style 속성에 padding~~ 어쩌구저쩌구를 적용해보자는 의견이었어요.
  • Lv19 ? Lv17
    $.getJSON('https://soundcloud.com/oembed', params, function(data) {
    matches = data.html.match(soundcloudRegExpIframe);
    if ( matches[2] === 'tracks' ) {
    style = 'height: '+ data.height +'px; padding: 0 !important ;';
    } else {
    style = 'height: 374px; padding: 0 !important ;';
    }

    아..일단 말씀하신게 요 부분이 맞다면.... 이렇게 작성하고, 사운드 클라우드 링크 붙여 보았으나 다른 변화는 없어 보입니다.
  • Lv19 ? Lv17

    .xe_content > p.vid {position: relative; padding-bottom: 56.25%; padding: 0; height: 0; overflow: hidden}

    요건 기존 그대로 두고 테스트 했었습니다. 

  • ? Lv17 Lv19
    .xe_content > p.vid 이게 span 태그를 한번 더 감싸고 있는 거군요!
    어느 자료에선가 분명 이유가 있어서 만들어진 wrapper 일 텐데, 얘를 회피할 방법을 잘 못찾겠습니다ㅠ

    처음에 하셨던 대로 p.vid의 스타일을 지우는 것 말고는 방법이 없겠네요.
    혼선을 드려서 죄송합니다ㅜㅜ
  • Lv19 ? Lv17

    네. 저걸 지우면 삽입된 영상들이 반응형이 되질 않네요. pc 에서 삽입되 유튜브가 모바일에서 잘리니

    반응형을 강제 하기 위해 넣어둔듯 합니다. ^^ 괜찮습니다. 제가 좀 더 파보고 더 고민 해보겠습니다.

  • ? Lv17 Lv19
    0.4.0부터는 프로알라 에디터 지원을 하지 않기로 했어요.
    (업데이트를 하더라도 0.3에 머무른다고 보시면 될 것 같습니다)

    어떻게든 해보려 했는데, 일을 키우는 바람에 작업량이 너무 많아져서 여러모로 여건이 어렵네요ㅜ
    양해 부탁드립니다 흑흑...
  • Lv19 ? Lv17
    네. 그러니까 프로알라 유저는 이번 업데이트를 할 필요가 없는거네요?

    언제나 감사드립니다. 여기까지 신경써주신것만 해도 프로알라 에디터 유저에게는 산삼이..아니 행운이 아닐까요?

    아직도 기존 버전으로 엄청 유용하게 잘 쓰고 있습니다. (우리 사이트 사운드당(길드) 보시면 뭐 ^^)
  • ? Lv17 Lv19
    네 업데이트는 안하시는 게 좋을 듯해요.
    신경은 쓴다고 쓰긴 했는데 혹시 버그가 있을지 몰라요.
    송구한 마음뿐입니다ㅜㅜ
  • Lv19 ? Lv17
    별말씀을요^^. 그럼 0.4도 업데이트 해도 되는 것으로 알고 사용해보겠습니다.^^
  • Lv19 ? Lv17

    그나저나 위 p.vid 관련 css 는 제거 하고 잘 사용중에 있습니다.
    리사이즈 애드온으로 대체 해서 사용 하니 서로간에 충돌도 없습니다. 사운드 클라우드까지 완벽 합니다~

    예 : https://x86.co.kr/notice/6015738

    당시에 분명히 이런 주석이 있었던 css 인데 왜 다른 것으로 대체할 생각을 못했는지~

    /* 문서 내 비디오 사이즈 반응형으로 조절 */

     

    불편 드려 죄송합니다

  • ? Lv17 Lv19
    연휴를 틈타ㅋ 오랜만에 글 남깁니다ㅜ
    잘 되시는 걸로 그저 믿고 있겠습니다~
  • Lv19 ? Lv17
    네. 너무 너무 잘 됩니다. ^^ 다시 한번 감사 드립니다.
  • Lv4
    혹시 틱톡링크는 어떤 링크를 지원하시는지 여쭤봐도 될까요?! https://vt.tiktok.com/ZSJDPD466/ 요걸 지원 안하는거 같아서요!
  • Lv4 Lv19
    사이트에서 제공하는 링크 복사 서비스 기준으로 정규식을 짜다보니 허점이 있을 겁니다.
    이렇게 알려주시면 완전 감사하죠~!
  • Lv4 Lv19
    아, 해당 주소는 틱톡에서 일반적으로 지원해주는 임베드 가능한 주소가 아니네요.
    https://www.tiktok.com/oembed?url=https://vt.tiktok.com/ZSJDPD466

    이런 데서는 되는 걸로 보아
    https://iframely.com/embed/https%3A%2F%2Fvt.tiktok.com%2FZSJDPD466
    아마도 따로 api key 발급을 받든 좀 복잡한 절차가 필요한 것 같습니다.

    단순히 정규식으로 주소 따와서 될 일이 아니네요.
    연구 좀 해봐야겠습니다~
  • Lv19 Lv4
    감사합니다!!
  • Lv4 Lv19
    0.4.0에서 틱톡 짧은 주소도 임베드 가능하게 했습니다.
    짧은 주소의 경우에는 긴 주소로 변환하는 과정을 거치다보니 임베드 시에 시간이 살짝 걸리긴 하지만, 그래도 쓸모는 있을 겁니다.
  • Lv19 Lv4
    개선시켜주셔서 감사합니다 ㅠㅠ 다만 아직까지 작동을 하지 않는것 같은데 혹시 다시한번 확인 부탁드려도 될까요?
  • ? Lv5

    윤삼님 좋은 자료 감사드립니다.
    트위치, 유튜브, codepen, 카카오tv, 아프리카tv, vlive, 레딧, 트위터로 테스트를 해보았는데요.
    트위터는 글읽기 화면에 표시가 되지 않네요. 쓰기 화면에서도 공간만 생길뿐 내용이 보이지 않습니다.
    데모사이트에서 잘 되고 있는듯한데 뭐가 문제일까요..?

     

    데모에 올려진 mlb.com이나 당근마켓은 안되고 있는게 맞는건가요

  • ? Lv5 Lv19

    1. 트위터는 브라우저 캐시, 쿠키 등등 삭제해보세요.

    2. 데모 사이트에서 에어비앤비, relive, mlb.com, streamable 등은 다음 버전에 포함될 예정입니다.

    3. 당근마켓은 시험삼아 해본 것이고, 해당 사이트에서 공개한 정보로 가져온 콘텐츠가 아니기 때문에 애드온에도 포함하지는 않을 생각이에요.

  • Lv19 ? Lv5

    dd.png.jpg

    트위터 링크를 넣고 보여지는 화면입니다. 글자가 나오지 않네용..브라우저 쿠키,캐시 삭제하고 난 후의 화면입니다

    개발자 도구를 보니 트위터 링크가 있는데 화면에는 나타나지 않네요.

  • ? Lv5 Lv19
    (보안 관련된 기록은 제외하고) 인터넷 사용기록 포함해서 다 지워보셨나요?

    개발자도구에서 봤을 때 트위터 로딩하는 js는 잘 불러와지나요?

    사용하시는 라이믹스 버전, 웹브라우저는 어떻게 되시나요?

    트위터 링크를 붙여넣기 했을 때 로그인 정보가 관리자인가요, 일반회원인가요, 비회원인가요?

    문제가 되는 페이지의 url은 어떻게 되나요?
  • Lv19 ? Lv5

    인터넷 사용기록 포함해서 전부 지우기 했고
    구글 개발자 도구로 봤을때 아래와 같은 오류가 뜨네요!
    라이믹스 버전 2.0.11 브라우저 구글, 사파리, 파이어폭스에서 확인했고
    관리자로 로그인하고 테스트 해봤습니다.
    테스트 중인 페이지는 아래 주소입니다!
    (해결되어 주소는 삭제했습니다.)

    embed.Tweet.a19bd2e49b47d0822e92.js:1 Uncaught Error: id is a required parameter
    at embed.Tweet.a19bd2e49b47d0822e92.js:1
    at Array.reduce (<anonymous>)
    at p (embed.Tweet.a19bd2e49b47d0822e92.js:1)
    at Module.373 (embed.Tweet.a19bd2e49b47d0822e92.js:1)
    at b (embed.runtime.d6e002d47a332101d70a.js:1)
    at d (embed.runtime.d6e002d47a332101d70a.js:1)
    at Array.n [as push] (embed.runtime.d6e002d47a332101d70a.js:1)
    at embed.Tweet.a19bd2e49b47d0822e92.js:1

  • ? Lv5 Lv19
    붙여넣기한 트위터 url 주소는 어떻게 되나요?
    정규식에 문제가 있었던 듯 싶습니다.
  • Lv19 ? Lv5
    https://twitter.com/kma_skylove/status/1390933834602926090?s=20

    트위터 주소입니다
  • ? Lv5 Lv19

    아, 생각해보니 다음 버전을 위해 이미 수정을 해놨었네요.
    (트위터 말고도 작업량이 많다보니 헷갈립니다ㅜ)

    ckeditor 쓰시는 거죠?
    _ckeditor.js 트위터 정규식을 아래와 같이 바꿔보세요.

    var twitterRegExp = /^https?:\/\/(?:www\.)?twitter\.com\/(?!explore|login|settings|tos|privacy|search|i\/flow|i\/events|i\/moments)(\w+){1,15}(?:\/(?:(status|lists))?)?(?:\/([0-9a-zA-Z-_]+)(?:\?.+)?)?$/;

  • Lv19 ? Lv5

    _ckeditor.js 수정하고 해보니 아까처럼 안보이는 것이 아니라 주소가 그대로 뜹니다.

    에디터에서 붙여넣기시에도 가져오는 느낌없이 주소가 바로 뜨네용

  • ? Lv5 Lv19

    혹시 브라우저 캐시 등등도 해보셨나요? 알려주신 url로 들어가보니 잘 뜨는 것 같은데요..

    0.png

  • Lv19 ? Lv5

    확인 감사합니다!!!! _ckeditor.js 처음에 주소가 그대로 떠서 코드를 다시 복붙했더니 구글과 사파리에서는 나옵니다. 저의 복붙실수였던것 같습니다. ;_; 구글과 사파리에서 뜰때 한참 걸리는데 제 사이트가 속도가 많이 느린걸까요..
    그리고 파이어폭스에서만 아까와 마찬가지로 빈 공간이 나오고 있네요! 브라우저마다 다를 수 있는 건가요? 딱히 전 파이어폭스를 자주 사용하진 않지만 궁금합니다!

     

    +) 사운드클라우드는 비교적 빠른거 보니까 트위터 자체가 느린가보네용..

  • ? Lv5 Lv19
    그럴 가능성이 아예 없진 않을 것 같습니다.
    브라우저별로 지원되는 메소드들이 다른 경우도 있고,
    js 실행할 때 커맨드에 미세한 차이도 있고 그렇더라구요.
    파폭은 저도 안 써서 잘 모르는데, 누군가 기여를 해주시면 좋겠네요ㅜ
  • Lv19 ? Lv5

    그런다면 정말 좋겠네요! 전 지금도 충분히 만족하지만요 :-) 저도 파이어폭스는 테스트용으로만 쓰고있어서 잘 보지 않기도 하구요
    항상 좋은 자료를 제작해주시고 공유해 주셔서 너무 감사할따름입니다!

  • ? Lv5 Lv19

    에어비앤비, 인스타, 페북, 틱톡, 트위터 같은 소셜 미디어 콘텐츠들은 각 사이트에서 제공하는 js로 콘텐츠 로딩을 한번 더 해야 하더라구요.

    (그나마 인스타는 빠릿빠릿한 것 같더군요. 틱톡은 그나마도 말을 잘 안 듣는 것 같구요)
    가급적 외부 js에 의존을 안 하고 싶은데, 콘텐츠들의 세로 사이즈가 유동적이라는 게 걸림돌이 됩니다.
    iframe의 세로 사이즈를 맞춰주려면 그쪽에서 제공하는 콘텐츠를 가져와서 그 높이에 맞춰 디스플레이를 해줘야 하거든요ㅜ
    일반적인 동영상 같은 경우는 보통 16:9 같은 식으로 정해져 있으니까 세로 높이를 우리쪽에서 그냥 미리 정해버리면 그만이지만요.

  • Lv19 ? Lv5

    그렇군요.. sns를 안해서 유일하게 트위터만 확인할 수 있었는데 인스타는 좀 빠른가보네요!
    속도에 집착하는 편이라 제 사이트 자체에 문제가 있나 싶어서 걱정을 했었네요 :-)

    문제 해결해 주셔서 다시 한번 감사드립니다!

  • Lv19 Lv4
    오 relive 성공 하셨군요. 기대가 됩니다 +_+. 이정도 애드온이면 버그픽스 하셔서 유료 서드파티로 배포 하셔야 아닌가 하는 생각이 듭니다.
  • Lv4 Lv19
    그냥 아마추어 취미로 하는 거여서요ㅎㅎ
    판매하면 그만큼 책임도 져야 하는데 저는 그 정도는 감당 못해요ㅜ
  • ? Lv5 Lv19
    0.4.0 사용해보세요.
    트위터 관련해 버그 수정 및 (속도를 포함한) 기능 개선이 있습니다.
  • Lv19 ? Lv5

    감사합니다. 업데이트를 했는데 갑자기 임베드 되지 않습니다. 0.3.0으로 다시 변경하니 임베드가 되는데 원인이 뭘까요 ㅠ
    저의 설치 환경은 라이믹스 2.0.12 / ck에디터 / studio02 ink 레이아웃 + 스킨 사용중입니다. 덮어쓰기하고 보안설정 추가해줬습니다.

     

    개발자 모드에서 확인해보니 

    media_embed.png.jpg

    이런 오류가 나오고 있네요. 조치할 방법이 있을까요?

  • ? Lv5 Lv19
    1. 이렇게 해보시거나요. https://xetown.com/updatenews/1586140#comment_1586379
    2. 아니면 이렇게 해보시겠어요? https://xetown.com/updatenews/1586140#comment_1586309
  • Lv19 ? Lv5
    감사합니다! 주석처리 1번 적용하니 바로 되네요!
  • Lv4

    다운받아 적용 해봤습니다. 우선 감사합니다.
    유듀브같은 것은 썸네일이 만들어지는데 인스타그램은 썸네일이 안만들어지는것 같네요. 버그는 아니고 처음부터 그렇게 만들어진거겠죠?

    글쓴 이유는 핸드폰에서 볼때 인스타그램을 넣었을때 본문 화면을 벗어나는게 인스타그램의 최소폭이 커서 그런가요?

    Screenshot_2021-05-08-23-38-13.png.jpg

  • Lv4 Lv19

    네 인스타그램에서 썸네일을 제공하지 않아서요.

    썸네일 가져오는 게 아예 불가능하지만은 않지만 그렇게 하면 반응 속도가 꽤 느려질 겁니다.

     

    모바일 가로폭 문제는 작업노트를 따로 열어봐야 알 것 같긴 한데요.(기억이 섞여 있어서ㅜ)

    관련 url을 남겨주셔야 상황 파악이 좀 더 용이할 텐데요.

     

    이쪽 링크에 가면 모바일에서도 잘 보이시나요?

    https://dev.aporia.blog/board_fKje44/34277

    제가 그 사이에 관련된 문제를 발견하고 이미 수정을 한 것일 수도 있는데요.

    암튼 else님 스샷이 나오는 url을 알려주셔야 비교가 가능할 것 같습니다.

     

    아 그리고 만약에 데모페이지에서도 모바일 가로가 넘쳐보인다면, 인스타에서 제공하는 최소 가로폭보다 else님 사용하시는 디바이스의 가로폭이 좁아서 그런 걸겁니다ㅜ

  • Lv19 Lv4
    아.. 죄송합니다. 제가 스샷만 넣고 주소를 안넣었네요.
    http://afbase.com/ac4_fboard/828662
    테스트 아이디 패스워드는 test, 0000 입니다.
    제 핸드폰은 LG G5 골동품입니다.
    그리고 윤삼님 글에있는 주소를 봤는데 그 주소의 인스타 그램은 딱 가운데에 있네요. 제껀 오른쪽으로 치우쳤는데.. 이게 제 레이아웃 문제일까요? 유튜브랑은 문제없이 가운데에 있는데요.
  • Lv4 Lv19

    가로 375px짜리 디바이스로 봤을 때 아티클 부분 가로폭이 309px 정도로 보이는데요.
    이게 아마 레이아웃 등의 영향으로 인스타 임베딩 콘텐츠의 최소 넓이보다 작아져서 그런 것 같습니다.

    else님 기기로 데모 페이지의 인스타 콘텐츠가 제대로 보였을 수는 있겠는데요.
    제 경우에도 기기가 320px짜리면 인스타 콘텐츠 영역이 밖으로 튀어나갑니다.

    인스타 콘텐츠의 최소 넓이를 우리쪽에서 수동으로 조정하기는 무리가 있어보이구요.
    그 대신 콘텐츠를 감싸는 영역에 overflow-x: auto를 줘서 콘텐츠가 영역 밖으로 나가면 좌우 스와이핑해서 볼 수 있는 방법으로 처리를 하면 좋을 것 같습니다.

  • Lv19 Lv4
    답변 감사합니다. 크게 문제 될것 같진 않은데 한번 알려주신대로 수정 해보겠습니다.
  • Lv4
    윤삼님 핀터레스트는 외부 임베드가 어려운 환경인가요? 가능하다면 추가 되었으면 좋겠습니다.
  • Lv4 Lv19
    살펴봤는데 까다로운 작업이긴 합니다. 지금도 트위터, 페북, 인스타, 틱톡 등 때문에 작업량이 많은 편인데 핀터레스트도 딱 그런 방식이거든요.
    가급적이면 에디터상에서 미리보기를 제공하고 싶은데 세로 사이즈가 정해져 있지 않은 소셜 미디어 임베딩은 그게 참 어려워요ㅜ
    그래도 일단 도전은 해보겠습니다.
  • Lv19 Lv4
    고생이 많으십니다. 지금도 차고 넘치니 베스트셀러 서드파티가 될 겁니다. 항상 감사 드립니다.
  • Lv4

    스크린샷 2021-05-18 12.23.39.png

     

    윤삼님 유튜브 링크를 모바일에서 붙여 넣으면 이렇게 섬네일과 함께 영상이 나란히 작게 들어갑니다.

    스킨 문제인가 해서 테스트 해봤는데 디폴트 스킨에서도 같은 증상이 있네요.

    윤삼님의 테스트 게시판에서는 정상적으로 출력이 되는데 왜 이럴까요.

    혹시 충돌하는 애드온이 있나 싶어서 이미지자동첨부 애드온 / 링크자동 애드온 모두 설정 끄고 했는데

    뭔가 모바일에서 붙여넣을 때만 이런 현상이 나타납니다. 

    https://feedzone.club/freeboard2

    테스트 게시판에서 테스트 중입니다. 

     

  • Lv4 Lv19

    보안 설정에서 media_embed class 허용을 안 하시지 않았나요?
    해당 클래스 속성이 있어야 css에서 썸네일과 iframe 처리를 해줄 수 있어요.

  • Lv19 Lv4
    중복되는 내용이 있어서 삭제하다가 실수로 빠진것 같네요. 한참 헤멨는데 덕분에 해결 되었습니다.
    감사 합니다.
  • ? Lv4

    크롬오류.PNG

    흠 저도 트위터쪽 에러가 좀 있습니다 비회원으로 작성했고 애드온 최신버전 사용중입니다

  • ? Lv4
    ckeditor 쓰시는 거죠?
    _ckeditor.js 트위터 정규식을 아래와 같이 바꿔보세요.

    var twitterRegExp = /^https?:\/\/(?:www\.)?twitter\.com\/(?!explore|login|settings|tos|privacy|search|i\/flow|i\/events|i\/moments)(\w+){1,15}(?:\/(?:(status|lists))?)?(?:\/([0-9a-zA-Z-_]+)(?:\?.+)?)?$/;
    위에 써주신대로 수정하니 작동은하는데, 비회원으로 작성한글은 적용이 안됩니다 ㅜ
    작성할때 썸네일이나 ifream 은 작성후 등록하면 썸네일이 다시 사라져버리네요 ㅠ

    관리자 아이디로 작성하면 잘작성됩니다
  • ? Lv4 Lv19
    보안 설정 class 부분에서 트위터 관련 클래스를 누락 없이 추가하신 건가요?
  • Lv19 ? Lv4
    네 네 맞습니다
  • ? Lv4 Lv19
    data-로 시작하는 속성이 누락되는 문제일 것 같습니다.
    다음 버전에서 패치될 예정이에요.
  • Lv19 ? Lv4

    넵 감사합니다

    링크를 붙혀넣기하면 자동으로 중앙정렬로 ifream이 생성되던데 이것도 옵션에서 설정할수있으면 좋겠습니다~!

  • ? Lv4 Lv19
    염두에 두고 있는 기능이니 한데 작업량이 많아서 기능 개선 작업은 추후로 미루고 있습니다~
  • Lv19 ? Lv4
    그렇군요~ 어쨋든 윤삼님 진심으로 감사합니다..
  • ? Lv4 Lv19
    지적해주셨던 버그는 0.4.0에서 수정했습니다.
    업데이트 버전 사용 부탁드려요 :)
  • Lv4

    sbtm.PNG

    윤삼님 보통 링크를  sns  같은 곳에 링크하면 이렇게 임베드가 되자나요.

    혹시 이런 링크도 임베드 지원은 어려울까요? 

    위 형식에서 내용도 100자 정도 들어갔으면 좋겠습니다. 

    뉴스를 공유하고 싶은데 많이 가져오면 저작권 문제가 있을것 같아서 

    단순히 임베드로만 보여주고 싶어서요.

  • Lv4 Lv19

    네, 궁극적으로는 그런 형태까지 생각하고 있습니다.
    예전에도 비슷한 애드온을 만들어서 배포한 적이 있었고, 이거를 람보님이 모듈로 포팅해서 발전시키기도 했었구요.
    https://github.com/bjrambo/parserlink

    다만, 이 두 개 모두 본문에서 링크를 파싱해서 프리뷰 카드를 출력해주는 것이었는데요.
    제가 이번에 작업하고 있는 게 바로 이 부분을 개선해서 본문 입력시에 프리뷰가 가능하게끔 하는 거예요.

    근데 요즘 시간이 별로 없어서ㅜㅜ 작업 속도가 붙질 않네요ㅠㅠㅠ

  • Lv19 Lv4
    정말 기대가 되는 애드온입니다. +_+.
  • Lv0
    안녕하세요
    저의 경우 모바일에서는 인스타그램 파싱이 작동되지 않습니다. pc로는 카드형식으로 바로 뜨네요

    그리고 pc 환경에서 유튜브 링크 삽입시 바로 재생버튼이 뜹니다만, 글작성 버튼을 누르고 나면 흐린 썸네일 로 나오며 사진처럼 바껴서 재생이 되질 않네요... 혹시 해결법을 알 수 있을까요?
    답변 부탁드립니다 만들어주셔서 감사합니다!
  • Lv0 Lv19
    해당 문제가 일어나는 페이지의 url을 알려주시겠어요?
    글쓰기 권한도 열어주셔야 어떤 상황인지 체크해볼 수 있을 것 같습니다.
  • Lv19 Lv0
    https://incheonation.kr/free/471187
    https://incheonation.kr/free/471191
    위 두개는 인스타그램 예시이구요

    id: test1234
    pw: test1234

    로 만들어두었습니다!
  • Lv0 Lv19
    이 애드온은 ckeditor용인데요.
    모바일에서는 심플에디터를 사용하고 계시네요.
  • Lv19 Lv0

    헉 그랬네요..저의 불찰로 번거롭게 해드려 죄송합니다ㅜㅜ

     

    혹시 pc환경에서 유튜브 주소 입력시 썸네일만 블러처리되어서 나오는 건 어떤 현상인지 알 수 있을까요,,?

  • Lv0 Lv30
    https://xetown.com/topics/1564294#comment_1564397
  • Lv9
    뒷북인거 같아 죄송합니다 ㅠㅠ 이제야 사용하게 되어서요 ㅎㅎ
    혹시 유튜브 영상을 등록할때 자동생성되는 섬네일의 크기를 조절할 수 있나요?
  • Lv9 Lv19
    _ckeditor.js 파일 하단 YOUTUBE 부분에
    '<img src="https://img.youtube.com/vi/'+ id +'/mqdefault.jpg" />' +
    이런 부분이 있을 텐데요.

    mqdefault.jpg 을 다른 형태의 썸네일 파일명으로 바꿔주시면 됩니다.
    섬네일 사이즈와 파일명의 관계에 대해서는 구글링해보시면 금방 답을 찾으실 수 있을 거예요.
  • Lv19 Lv9
    답변 감사드립니다! 확인해보겠습니다. ^^
  • Lv19 Lv9
    윤삼님, 빠른 답변 친절한 설명 감사드려요.
    덕분에 잘 해결되었습니다.
    저는 해당부분을 "hqdefault.jpg"로 바꾸었습니다.
    감사드려요 ^^
  • Lv4
    안녕하세요. 적용이 늦었습니다만 정말 필수애드온이네요 ㅎㅎ
    항상 감사드립니다. 여기저기 별 5개 추천!
  • Lv6
    안녕하세요! 어제 알려주신데로 서드파티랑 충돌되는것 같다고 말씀해주셔서

    사용중인 애드온을 하나씩 꺼보고 찾아봤는데 도무지 해결이 안되서

    새로운 계정에 라이믹스 초기상태로 애드온만 설치해보았는데요
    여기서도 동일하게 트위터만 임베드가 안되는 현상이 발생되서요
    혹시 서버 설정에 문제가 있을수 있나요?

    https://test.voiceits.com/
    https://test.voiceits.com/home/148
    https://test.voiceits.com/home/152
  • Lv6 Lv19
    부랴부랴 업데이트 버전 정리해서 올렸으니 그걸로 적용해보세요.
    https://xetown.com/point_contents/1564278#user_content_1-040
  • Lv19 Lv6
    감사합니다! 정상출력되네요!!

    최고의 애드온이에요!
  • Lv5
    삼님 혹시 동접 400~500명 사이트에서 애드온 사용 시
    임베디드 기능을 많이 이용하면 제한이 걸리는게 있을까요?
  • Lv5 Lv19
    주로 외부 사이트의 iframe 서비스를 이용하니 괜찮지 않을까...
    서버 쪽은 제가 잘 몰라서 확답은 못 드리겠네요ㅜ
  • Lv19 Lv5
    아하! 한번 직접 써보고 피드백 남겨보겠습니다!
    좋은 자료 만들어 주셔서 너무 감사합니다 ^^
  • Lv19 Lv5
    트위치 클립은 지원을 하지 않는건가요!?
    (개발자: 유효한 인수 세트를 지정해주세요) 라는 문구가 뜨네요.
  • Lv5 Lv19
    그새 바뀌었을 수도요ㅜ
    해당 트위치 클립 링크 공유 부탁드려요
  • Lv19 Lv5
    https://www.twitch.tv/so_urf/clip/GorgeousArtisticFennelLeeroyJenkins-8coqsgLc27dcG_kW 해당 클립 입니다.

    트위치는 엄청 자주 뭐가 바뀌는거 같습니다 ㅠ
  • Lv5 Lv19

    한다고 했는데 미처 생각하지 못했던 주소 형식이었네요ㅜ

    이렇게 해보시죠.

     

     

    1. 트위치 정규식 교체
    _ckeditor.js 57행을

    var twitchRegExp = /^https?:\/\/?(?:([a-z0-9]+)\.)?twitch.tv(?:\/(\w+))?\/(?:(clip)\/)?(?:([-_0-9a-zA-Z]+))?(?:[/?&]+(?:(?:(t|channel))=([-_0-9a-zA-Z]+)|.+))?$/;

    으로 교체

     

    2. 트위치 관련 구문 수정

    _ckeditor.js 1208~1227행

    if ( matches[1] === 'clips' || matches[3] === 'clip' ) {
    type = 'clip';
    } else if ( !matches[2] ) {
    type = 'channel';
    } else if ( $.inArray(matches[2], ['video', 'videos', 'channel', 'collection', 'clip', 'clips']) !== -1 ) {
    type = matches[2].replace('s', '');
    }
    
    if ( type === 'channel' ) {
    id = matches[2] ? matches[2] : matches[4];
    if ( !id ) {
    if ( matches[5] === type ) {
    id = matches[6];
    }
    }
    } else {
    id = matches[4];
    }
    
    start = ( matches[5] === 't' ) ? '&time=' + matches[6] : '';

     

  • Lv19 Lv5
    와우 이렇게 빠르게...
    방금 적용 하고 테스트 해보니 아주 잘 나옵니다!
  • Lv19 Lv5

    XE 공식 홈페이지에서 배포중인 타임라인 모듈과 충돌이 있는듯 합니다!

    피드백.PNG

    글쓰기 페이지에서만 나오는 경고문이 나오는가 하면..

     

    피드백2.PNG

    동영상 같은 경우 섬네일이 나오고 영상 사이즈가 줄어드는군요.

     

    람보님께서 배포중인 타임라인 플러스 모듈은 가지고 있지 않아서 확인 하지 못했습니다.

     

  • Lv5 Lv19
    타임라인 모듈 적용 안 했을 때, 같은 레이아웃 및 같은 게시판 스킨에서는 괜찮은가요?
  • Lv19 Lv5

    네 타임라인 적용 안하면 정상적으로 출력 됩니다. (동일 게시판스킨,설정,레이아웃)

  • Lv5 Lv19
    일단 제가 테스트해본 결과로는 잘 되는 것 같습니다.
    1. 타임라인이 적용된 게시판에 애드온 적용이 되어 있는지
    2. css 충돌이 의심되지 않는지
    등이 관건일 것 같아요.
  • Lv19 Lv5
    아 그러면 저희 레이아웃 스킨이나 게시판 스킨과 충돌했을 가능성이 높겠네요.
    한번 찾아보도록 하겠습니다!
    신경써주셔서 감사합니다 ^^!
  • Lv19 Lv5
    애드온 로딩 시점을 조금 더 빨리 당길 수 있을까요?
    어제부터 하루 종일 적용해서 사용하고 있는데
    회원분들이 임베디드기능이 됐다 안됐다 한다는 의견이 있어서
    확인해보니 에디터가 로딩 되고 애드온이 실행되기 전 링크를 복붙 시 임베디드 되지 않는 경우가 있는듯 합니다.
    약 1~2초 정도 딜레이?

    글쓰시는분들이 많아서 한분한분 천천히 써달라고 말할 수도 없고 이거 참 난감하네요 ㅋㅋ
  • Lv5 Lv19
    CK에디터 자체의 이벤트를 활용하는 것이기 때문에 애드온 작동 시점 역시 에디터 로딩을 확인한 다음으로 구성되어 있습니다.
    즉, 제가 생각했을 땐 현재의 구성이 가장 빠른 시점인 것 같아요.
    그나저나 에디터 로드되자마자 기다렸다는 듯이 링크 주소를 복붙하는 경우도 있나요? ㄷㄷ
  • Lv5 Lv9
    저도 테스트 중인데, 되다 안 되다 해서 며칠째 다른거랑 충돌이 있는지 살펴보고 있네요 ^^
  • Lv19 Lv5
    아하 그렇군요..
    저희 사이트에는 빠르게 복붙 하시는 분들이 많으신듯해요.
    저같은 경우도 PC로 사이트 이용 시 몇번씩 너무 빠르게 해서 임베디드 안되는 경우가 생기네요 ㅋㅋ
  • Lv9 Lv5
    어제부터 계속 원인을 찾는 중인데 확실히 딜레이 때문에 안되는 경우가 제일 많은듯하고
    복붙하는 링크에 A태그가 포함되어 있찌 않은 단순 텍스트일 경우에도 임베디드 안되는듯해요.
  • Lv5 Lv9
    음.. 제 사이트는 좀 다르네요,
    아직 특정하기가 어려울 정도로 되었다 안되었다를 반복해서, 문제를 특정할 때까지 테스트 해보고 제보해야겠네요 ㅎㅎ ^^
  • Lv7

    2.0.13 올리고 사용하려고 하는데 유튜브 썸네일 첨부가 안되네요.
    혹시 1. 설정 > 시스템 설정 > 보안 설정 > iframe에 다음을 추가 <--- 이부분이 관련이 있을까요?
    2.0.13에서  위부분이 없어진거같습니다. 아래처럼 나오고 있네요.

     

    무제-1.jpg

  • Lv7
    https://xetown.com/tips/219485

    이미지 자동첨부 애드온으로 해결되었습니다.
  • Lv7 Lv9
    음, 저도 같은 현상이네요.
  • Lv7 Lv9
    이미지 자동첨부 애드온으로 사용하면 뜨긴하는데, 섬네일 사이즈 조정이 가능할지 모르겠네요. 출력되는 섬네일이 좀 작아서요 ㅠㅠ
  • Lv9
    음, 위에 되다 안되다 하던 문제는 확실히 뭐가 문제였는지는 모르겠습니다.
    xe에서 라이믹스로 넘어온 사이트여서 오래된 안 쓰는 모듈과 애드온 삭제하고 캐시재성성을 하고나니 정상동작합니다!! 안되시는 분들 다른 문제일수도 있을 것 같습니다!
  • 안녕하세요! 유투브 링크를 모바일에서 첨부하면 임베드가 될 때도 있고 안 될 때도 있는데,

    확인해보니 클립보드에 있는 걸 바로 붙여넣기 하면 임베드가 되고

    클립보드 버튼을 누르고 그 안에 있는 링크를 넣으면 임베드가 되지 않습니다. 왜 이런 문제가 발생하는 걸까요?ㅠㅠ

    참고를 위해 사진 첨부합니다.

    ex.png

  • Lv19

    안녕하세요. 연휴를 틈타 오랜만에 들어와서 늦은 댓글 남겨봅니다.
    에디터의 paste 이벤트를 사용해서 미디어를 임베드하는데요.
    모바일 기기의 클립보드 삽입은 paste 이벤트로는 잡히지 않는 모양이에요.
    이 부분은 장기간에 걸친 연구가 필요할 것 같습니다.

     

    사용 중이신 모바일 OS와 모바일 브라우저를 알려주시면 도움이 될 것 같습니다.
    혹시 좋은 의견 있으시면 나눠주세요~

  • Lv4
    링크 텍스트도 표시를 설정해도 글 등록시 링크텍스트가 증발합니다.
  • Lv30

    최신버전 설치했는데 윗분 말씀 처럼 링크 텍스트가 사라지고
    섬네일이 생성이 되지 않는데 무슨 문제가 있을까요??

    작성된 게시글의 소스는 이렇게 되어있습니다.

    <div class="media_embed" contenteditable="false" style="width:100%;padding-bottom:56.5%;"><img alt="" src="https://i.ytimg.com/vi/GKMmAcaB50A/mqdefault.jpg" /><iframe allowfullscreen="" frameborder="0"

     

    섬네일 설정 등 원인 찾기가 어려울 것 같아 외부이미지 첨부 애드온을 써야 하겠습니다.

    참고 사항 : {$document->getThumbnail(1080, 'auto', 'ratio')} 저희는 목록에서 이와 같은 섬네일 형태를 사용하고 있습니다.

     

     

    테스트를 해보니 위와 같은 설정에서는 외부이미지 작은 사이즈는 섬네일이 생성이 안되네요. 조금 큰 사이즈는 생성이 됩니다.(애드온과 상관없는 문제네요.)

     

    https://github.com/rhymix/rhymix/issues/1816

  • Lv30 Lv19
    확인 감사합니다!
  • Lv4

    KPOP, K드라마가 대세인만큼 VLIVE 영상도 지원되었으면 좋겠습니다!!!

  • Lv4 Lv19
    꽤 초창기부터 지원을 하긴 했는데, 요즘도 잘 되는지는 잘 모르겠습니다.
    https://dev.aporia.blog/board_fKje44/34121
    손 놓고 산지가 하도 오래 돼서요ㅜ
  • Lv19 Lv4
    vlive 잘 나옵니다. ㅎㅎ;; 제가 잘못 설정한게 있었나봅니다
  • Lv30

    트위터 아래쪽이 잘리는데요. 이거 원인을 좀 알 수 있을까요?
    제가 사용하는 레이아웃,보드시킨 테마에 트위터쪽 css도 있는 것으로 확인됩니다.

    https://feedfactory.kr/feed/682

     

    일단 제가 사용하는 보드 스킨의 css

     

    $base-padding: 1.25rem;

    @mixin mobile {
      @media (max-width: $mobile-w) {
        @content;
      }
    }

    .app-article-content {
      .app-article__video-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;

        width: 100%;
        max-width: 100%;
        
        @include mobile() {
          width: calc(100% + #{$base-padding * 2}) !important;
          max-width: calc(100% + #{$base-padding * 2}) !important;
          margin-left: $base-padding * -1 !important;
        }

        & > iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }

     

     

    위 부분과 애드온의 css가 서로 충돌하는 것 같아 일단 보드 스킨의 css를 사용하지 않는 것으로 하겠습니다. 기존에 미디어쪽이 아직 삽입된게 없으니 기존 문서에 영향을 주지는 않을 것 같습니다.

  • Lv30
    생략된 부분은 본문이 로드되면 볼 수 있습니다.

    이문구가 문제를 발생합니다. 컨텐츠로 삽입되어버려서 검색에서도 상관없는 내용이 수집되며 목록에서 컨텐츠 요약을 가져와 보여줄때 불필요한 문구가 보여지게 되니 이 문구가 뭐지? 라는 생각이 들게 합니다.
  • Lv30 Lv19
    개발할 때부터 이걸로 참 애를 먹었는데요.
    에디터 안에서 바로 임베드하려는 욕심과 해당 플랫폼에서 미디어의 세로 사이즈를 제공해주지 않는 부분이 충돌하면서 그런 문구를 넣었던 걸로 기억합니다.
    해당 문구를 삭제하는 것도 방법이겠단 생각이 드네요.
  • Lv4

    링크 텍스트도 표시를 설정해도
    글 등록시 링크텍스트가 사라지는 현상은 어떻게 고쳐야할까요.
    URL 텍스트가 남도록 하고싶어서요ㅕ ㅜㅜ

  • Lv4 Lv30

    업데이트 내역(https://xetown.com/updatenews/1586140) 설명을 읽어보니 링크 텍스트 표시하는 옵션은 다음 버전에서 작동하는 것이라고 설명되어 있네요. 아직 작동 안하는게 맞습니다.

    저는 어디서 지우는 건지 못찾아서 그냥 다시 추가하는 방법을 임시로 추가했습니다.

    /addons/media_embed/js/_ckeditor.js

    파일에서

    e.data.dataValue =
    paste +
    '<div class="'+ iframe_wrapper +' airbnb-embed" contenteditable="false" style="'+ style +'">' +
    '<iframe src="'+ url +'" frameborder="0" scrolling="no" style="'+ style +'"></iframe>' +
    '</div>' +
    '<p>&nbsp;</p>';


    paste + 를 맨 위쪽에 추가해 주었습니다. 모든 곳에 다 추가를 해주는 방법을 ㅜㅡ

  • Lv30 Lv4
    아하~ 그렇군요. 감사합니다!
  • Lv30 Lv19
    오, 중요체크!
  • Lv8
    0.4.0 버전 사용 시 jQuery를 찾을 수 없게 만드는 문제가 발생하네요...ㅠㅠ 0.3 버전은 다행히 문제가 없어서 0.3 버전 사용하고 있습니다.
  • Lv8 Lv19
    아이고, 오랜만에 댓글을 주욱 달고 있는데 이거는 뭔가 크리티컬한 이슈인 거 같네요ㅜ
  • Lv4

    아프리카VOD 무한으로 콘텐츠를 로딩중이라는 팝업발생합니다.

     

    1. 크롬 애드블럭 사용시

    2. 19금이 걸린 VOD

     

  • Lv4 Lv19
    포인트 콘텐츠 자료실의 대댓글과 같은 내용입니다.
    https://xetown.com/index.php?comment_srl=1648825&document_srl=1564278&mid=point_contents&rnd=1648825#comment_1648825
  • 안녕하세요! 기똥찬 애드온 정말 감사드립니다 ㅠ 혹시 xe에서는 사용이 불가능한 애드온일까요? 감사합니다 ㅠ!

  • Lv19
    xe에서는 아마 안 되지 싶은데요.
    혹시 되더라도 이슈 처리 같은 것은 힘들 것 같습니다.
    (근데 본업 때문에 라이믹스에서 사용하시더라도ㅜㅜ)
  • ? Lv1
    안녕하세요. PC에서 유튜브 링크를 올리면 정상 작동하는데, 모바일에서 유튜브 링클르하면 사이즈 조절이 안되네요
  • ? Lv1 Lv19

    아마도 모바일 쪽에서 유튜브나 아이프레임의 리사이즈를 통제하는 별도의 서드파티 자료를 쓰시는 게 아닐까 생각됩니다. 저는 같은 증상이 재연되지 않거든요ㅜ

    혹시 그 부분 체크해보셨나요?

  • Lv19 ? Lv1
    다른 에드온을 꺼도 모바일에서는 화면 사이즈가 크게 나오네요. ㅠㅠ