미디어 임베드 애드온을 배포했습니다.
https://xetown.com/point_contents/1564278
정식으로 한다고는 했는데, 아무래도 혼자는 역부족이어서 버그가 적지 않을 것으로 예상됩니다.
보통은 포인트 컨텐츠 자료실에서 소통을 해도 되는데,
자료실 댓글 커맨드가 아무래도 기능이 미흡해서 (별점 외에는 텍스트만 사용가능하고 보기도 불편하죠ㅜ)
이 게시물을 스레드 삼아 당분간 여기서 소통을 하고자 합니다.
테스트를 한다고는 했는데,
아마 관리자 외의 경우 보안 때문에 코드가 날아가는 경우가 있어서 그 부분이 좀 걱정이 되긴 합니다.
많은 의견 부탁드립니다~
블러 제거해도 이미지가 너무 작아서 PC 큰화면에서는 화면에 맞추면 화질이 낮아서 없는게 낫겠더라구요.
url 주소를 없애는것이 옳은 것인가? 에 관해 잠시 고민을 해봤습니다.
호불호 취향문제로 볼수도 있지만 꼭 해당 url을 적는 것이 목적인 이용자에게는 의도한 것을 하지 못하게 하는 것의 결과로 바뀌는 건데요..
확실한 판단은 서지 않고 있습니다.
트위터 게시글을 공유해보니 이점은 굉장히 안좋아 보이네요. 쉽게 퍼나르기 어려워 보여요. 인스타그램 또는 미디어에 따라 공유 자체를 찾지 못하는 경우도 많아 보입니다.
과거의 oembed 애드온이나 링크파싱 애드온, 파서링크 모듈 등에서는 그렇게 구현해볼 수 있을 것 같은데요.
현재 미디어 임베드 애드온은 에디터에 iframe 태그를 바로 입력하는 성격의 애드온이서 그렇게 하는 건 불가능할 것 같습니다.
몇몇 서비스의 경우에는 lazy loading(스크롤 위치에 따라 순차적으로 로딩)을 지원하기도 하는데요.
유튜브에서 그런 걸 하려면 api 키를 발급받아 서비스를 이용하면 가능하긴 합니다.
그치만 아무래도 범용 애드온으로 만든 것이다보니 이용자들에게 api키 발급과 입력 등의 수고까지 끼치게 하기가 힘든 측면이 좀 있네요ㅜ
안되는 이유를 자세히 설명 해주셔서 감사합니다!
애드온 설치하여 테스트중인데 속도도 빠르고 위에 웹지기님 의견처럼
URL 출력 안되는 부분 외에는 매우 만족스럽네요.
계속 사용해보고 버그 발생 시 피드백 드리겠습니다!
프로알라 에디터 사용자분들 중에서는 인스타그램 게시글이 절반만 불러와지는 현상이 있었습니다.
이 경우 js 폴더의 _froala에서 instagram의 span에 있는 fr-video만 삭제해주니 정상적으로 작동되는것 같습니다!
해결 방법 알려주신 윤삼님 감사합니다!😀😀
프로알라 에디터 사용시 모바일에서 나타나는 현상인데요.
정확하게는 미디어 쿼리에 의해 device 넓이가 줄어들었을 때 fr-video 요소의 가로 세로 비율이 16:9 사이즈로 잘리게 됩니다.
일단 언뜻 보기에는 fr-video를 삭제하면 해당 요소의 일종의 위젯 기능(전체 삭제 기능을 비롯해 드래그 앤 드랍 같은 기능들)이 무효화되는 것 같으니, 이 부분을 감안하시고 해당 클래스명을 삭제하시면 되겠습니다.
차후 버전에서는 이 문제에 대응할 수 있는 방편도 연구해보도록 하겠습니다.
@벨로위키
애드온 관련 소통은 여기서 하도록 할게요 :)
1. 트위터 입력 화면에서 잘 보이는 것 같습니다. 혹시 모르니 브라우저의 쿠키, 인터넷 사용기록, 캐시 등등을 삭제해보시겠어요?
2. 아프리카 티비도 브라우저 호환성 문제인 것 같은데요. 윈도우+크롬에서는 잘 나옵니다. 이 부분은 아프리카 쪽의 문제라고 봐야 할 것 같아요. api와 액세스 토큰 취득 등 복잡한 절차를 따르지 않고 영상을 따오는 것이라 브라우저 호환성에 문제가 있을 수도 있겠습니다.
알려주신 방법으로 하니 컨트롤러가 생겼습니다. 추가로 콘솔 에러가 있어서 제보해 드립니다.
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
아직 다양한 동영상을 이용하지 않아 모르겠습니다만,
유투브 동영상 이용 시입니다.
작업을 마치고 리스트(목록, 특히 갤러리나 그리드 형태)에서 보면 섬네일이
실제 이미지 파일을 첨부한 글과는 다르게 나타나는 것 같습니다.
(레이아웃이나 스킨 영향 때문인 것 같습니다만 원인을 모르겠네요. ㅠ.ㅜ)
왼쪽은 이미지 파일이 첨부된 글이고 오른쪽은 media-embed 애드온으로 링크 포함된 글입니다.
섬네일이 조금 다르게 나타나네요.
이런 현상은 어떻게 조정해야 할지 몰라서요..
혹시 원인 등을 알 수 있을지요.
감사합니다.
ps.
추가로 확인해 보니 내부 이미지 링크는 정상적으로 섬네일 보여주지만
외부 링크는 오른쪽 항목처럼 이미지가 다 나오지는 않네요.
애드온 영향은 아닌 것 같습니다. ^^;;
그래도 너무 편하게 사용 가능한 애드온 만들어 주셔서 감사하게 사용하고 있습니다. ~
네 확인해 보니 스킨에서 섬네일 크롭을 width 360px 으로 하고 있네요.
그러다 보니 원래 유투브 섬네일 320px 보다 크니 나머지를 흰 여백으로 크롭해 놓는 것 같습니다. ^^;;
(그럼 크롭 이미지 사이즈를 줄여야 하나... 그럼 태블릿 등에서 섬네일이 너무 흐릿해서 ...)
원인 알았으니 어떻게든 조정해서 타협해 봐야 겠습니다. (360 x 280 -> 320 x 180 이미지 크롭 사이즈 조정으로 해결? 타협?)
감사합니다 ^^
감사합니다.
한번 try 해 보겠습니다 ^^;;
앗,
말씀 듣고 fill 해당하는 부분이 어딜까 살펴보다가
getThumbnail() 함수에서 crop 부분이 있길래 이걸 fill 로 바꿨더니 가득 채워졌습니다. 야호 ~~~~
여러모로 정말 많은 도움을 받고 있습니다.
다시 한번 감사의 말씀을 ~
감사합니다. 테스트 해본 url 공유합니다.
모두 공유 링크 를 사용하였습니다.
실패
레딧 - 로드 자체가 안됨
성공
사운드 클라우드 - 글쓰기시에는 정상이나 글 발행 이후 css 높이 디자인이 꺠집니다. height 100% 설정 때문인것 같은데
왜 문제가 생기는지 잘모르겠네요.
슬라이드 세어
비메오
카카오tv
네이버tv
jsfiddle
codepen
트위터 - 글쓰기시에 전체 내용이 표시 되지 않고 높이가 잘립니다. 그러나 글 등록후에는 정상적으로 로드 됩니다.
?
iframe 태그를 감싸는 span 태그가 있을 텐데요.
거기 스타일에 padding-bottom: 0; 라 돼 있는 걸 padding: 0; 으로 바꿔보시겠어요?
보통 동영상 반응형으로 만들 때 padding-bottom으로 맞추는데, 프로알라에서는 신기하게도 padding-top으로 맞춰져 있네요ㅜ
?
네. 소스보기를 눌러 padding:0으로 태그를 수정해봤는데 다른 변화가 없는듯 합니다.
?
스킨에 이런게 들어가 있어서 지워버렸더니 해결 되었습니다.
.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%}
전부 제탓입니다.^^ 고맙습니다.
?
?
신경써주셔서 감사합니다.
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}
요런식으로 전부 바꿔서 해봤는데....페이스북과 트위터 제외하고 다른 모든 임베디드된 내용들이 사라지네요...
무엇때문인지..참...해서 위 내용 모두 삭제를 하면 전부 정상으로 돌아오나....모바일에서 애드온으로 삽입된 유튜브가 잘립니다
?
?
.xe_content > p.vid {position: relative; padding-bottom: 56.25%; padding: 0; height: 0; overflow: hidden}
요건 기존 그대로 두고 테스트 했었습니다.
?
네. 저걸 지우면 삽입된 영상들이 반응형이 되질 않네요. pc 에서 삽입되 유튜브가 모바일에서 잘리니
반응형을 강제 하기 위해 넣어둔듯 합니다. ^^ 괜찮습니다. 제가 좀 더 파보고 더 고민 해보겠습니다.
?
?
?
그나저나 위 p.vid 관련 css 는 제거 하고 잘 사용중에 있습니다.
리사이즈 애드온으로 대체 해서 사용 하니 서로간에 충돌도 없습니다. 사운드 클라우드까지 완벽 합니다~
예 : https://x86.co.kr/notice/6015738
당시에 분명히 이런 주석이 있었던 css 인데 왜 다른 것으로 대체할 생각을 못했는지~
/* 문서 내 비디오 사이즈 반응형으로 조절 */
불편 드려 죄송합니다
?
윤삼님 좋은 자료 감사드립니다.
트위치, 유튜브, codepen, 카카오tv, 아프리카tv, vlive, 레딧, 트위터로 테스트를 해보았는데요.
트위터는 글읽기 화면에 표시가 되지 않네요. 쓰기 화면에서도 공간만 생길뿐 내용이 보이지 않습니다.
데모사이트에서 잘 되고 있는듯한데 뭐가 문제일까요..?
데모에 올려진 mlb.com이나 당근마켓은 안되고 있는게 맞는건가요
1. 트위터는 브라우저 캐시, 쿠키 등등 삭제해보세요.
2. 데모 사이트에서 에어비앤비, relive, mlb.com, streamable 등은 다음 버전에 포함될 예정입니다.
3. 당근마켓은 시험삼아 해본 것이고, 해당 사이트에서 공개한 정보로 가져온 콘텐츠가 아니기 때문에 애드온에도 포함하지는 않을 생각이에요.
?
트위터 링크를 넣고 보여지는 화면입니다. 글자가 나오지 않네용..브라우저 쿠키,캐시 삭제하고 난 후의 화면입니다
개발자 도구를 보니 트위터 링크가 있는데 화면에는 나타나지 않네요.
?
인터넷 사용기록 포함해서 전부 지우기 했고
구글 개발자 도구로 봤을때 아래와 같은 오류가 뜨네요!
라이믹스 버전 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
?
아, 생각해보니 다음 버전을 위해 이미 수정을 해놨었네요.
(트위터 말고도 작업량이 많다보니 헷갈립니다ㅜ)
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-_]+)(?:\?.+)?)?$/;
?
_ckeditor.js 수정하고 해보니 아까처럼 안보이는 것이 아니라 주소가 그대로 뜹니다.
에디터에서 붙여넣기시에도 가져오는 느낌없이 주소가 바로 뜨네용
혹시 브라우저 캐시 등등도 해보셨나요? 알려주신 url로 들어가보니 잘 뜨는 것 같은데요..
?
확인 감사합니다!!!! _ckeditor.js 처음에 주소가 그대로 떠서 코드를 다시 복붙했더니 구글과 사파리에서는 나옵니다. 저의 복붙실수였던것 같습니다. ;_; 구글과 사파리에서 뜰때 한참 걸리는데 제 사이트가 속도가 많이 느린걸까요..
그리고 파이어폭스에서만 아까와 마찬가지로 빈 공간이 나오고 있네요! 브라우저마다 다를 수 있는 건가요? 딱히 전 파이어폭스를 자주 사용하진 않지만 궁금합니다!
+) 사운드클라우드는 비교적 빠른거 보니까 트위터 자체가 느린가보네용..
?
그런다면 정말 좋겠네요! 전 지금도 충분히 만족하지만요 :-) 저도 파이어폭스는 테스트용으로만 쓰고있어서 잘 보지 않기도 하구요
항상 좋은 자료를 제작해주시고 공유해 주셔서 너무 감사할따름입니다!
에어비앤비, 인스타, 페북, 틱톡, 트위터 같은 소셜 미디어 콘텐츠들은 각 사이트에서 제공하는 js로 콘텐츠 로딩을 한번 더 해야 하더라구요.
(그나마 인스타는 빠릿빠릿한 것 같더군요. 틱톡은 그나마도 말을 잘 안 듣는 것 같구요)
가급적 외부 js에 의존을 안 하고 싶은데, 콘텐츠들의 세로 사이즈가 유동적이라는 게 걸림돌이 됩니다.
iframe의 세로 사이즈를 맞춰주려면 그쪽에서 제공하는 콘텐츠를 가져와서 그 높이에 맞춰 디스플레이를 해줘야 하거든요ㅜ
일반적인 동영상 같은 경우는 보통 16:9 같은 식으로 정해져 있으니까 세로 높이를 우리쪽에서 그냥 미리 정해버리면 그만이지만요.
?
그렇군요.. sns를 안해서 유일하게 트위터만 확인할 수 있었는데 인스타는 좀 빠른가보네요!
속도에 집착하는 편이라 제 사이트 자체에 문제가 있나 싶어서 걱정을 했었네요 :-)
문제 해결해 주셔서 다시 한번 감사드립니다!
?
감사합니다. 업데이트를 했는데 갑자기 임베드 되지 않습니다. 0.3.0으로 다시 변경하니 임베드가 되는데 원인이 뭘까요 ㅠ
저의 설치 환경은 라이믹스 2.0.12 / ck에디터 / studio02 ink 레이아웃 + 스킨 사용중입니다. 덮어쓰기하고 보안설정 추가해줬습니다.
개발자 모드에서 확인해보니
이런 오류가 나오고 있네요. 조치할 방법이 있을까요?
?
다운받아 적용 해봤습니다. 우선 감사합니다.
유듀브같은 것은 썸네일이 만들어지는데 인스타그램은 썸네일이 안만들어지는것 같네요. 버그는 아니고 처음부터 그렇게 만들어진거겠죠?
글쓴 이유는 핸드폰에서 볼때 인스타그램을 넣었을때 본문 화면을 벗어나는게 인스타그램의 최소폭이 커서 그런가요?
네 인스타그램에서 썸네일을 제공하지 않아서요.
썸네일 가져오는 게 아예 불가능하지만은 않지만 그렇게 하면 반응 속도가 꽤 느려질 겁니다.
모바일 가로폭 문제는 작업노트를 따로 열어봐야 알 것 같긴 한데요.(기억이 섞여 있어서ㅜ)
관련 url을 남겨주셔야 상황 파악이 좀 더 용이할 텐데요.
이쪽 링크에 가면 모바일에서도 잘 보이시나요?
https://dev.aporia.blog/board_fKje44/34277
제가 그 사이에 관련된 문제를 발견하고 이미 수정을 한 것일 수도 있는데요.
암튼 else님 스샷이 나오는 url을 알려주셔야 비교가 가능할 것 같습니다.
아 그리고 만약에 데모페이지에서도 모바일 가로가 넘쳐보인다면, 인스타에서 제공하는 최소 가로폭보다 else님 사용하시는 디바이스의 가로폭이 좁아서 그런 걸겁니다ㅜ
가로 375px짜리 디바이스로 봤을 때 아티클 부분 가로폭이 309px 정도로 보이는데요.
이게 아마 레이아웃 등의 영향으로 인스타 임베딩 콘텐츠의 최소 넓이보다 작아져서 그런 것 같습니다.
else님 기기로 데모 페이지의 인스타 콘텐츠가 제대로 보였을 수는 있겠는데요.
제 경우에도 기기가 320px짜리면 인스타 콘텐츠 영역이 밖으로 튀어나갑니다.
인스타 콘텐츠의 최소 넓이를 우리쪽에서 수동으로 조정하기는 무리가 있어보이구요.
그 대신 콘텐츠를 감싸는 영역에 overflow-x: auto를 줘서 콘텐츠가 영역 밖으로 나가면 좌우 스와이핑해서 볼 수 있는 방법으로 처리를 하면 좋을 것 같습니다.
윤삼님 유튜브 링크를 모바일에서 붙여 넣으면 이렇게 섬네일과 함께 영상이 나란히 작게 들어갑니다.
스킨 문제인가 해서 테스트 해봤는데 디폴트 스킨에서도 같은 증상이 있네요.
윤삼님의 테스트 게시판에서는 정상적으로 출력이 되는데 왜 이럴까요.
혹시 충돌하는 애드온이 있나 싶어서 이미지자동첨부 애드온 / 링크자동 애드온 모두 설정 끄고 했는데
뭔가 모바일에서 붙여넣을 때만 이런 현상이 나타납니다.
https://feedzone.club/freeboard2
테스트 게시판에서 테스트 중입니다.
보안 설정에서 media_embed class 허용을 안 하시지 않았나요?
해당 클래스 속성이 있어야 css에서 썸네일과 iframe 처리를 해줄 수 있어요.
흠 저도 트위터쪽 에러가 좀 있습니다 비회원으로 작성했고 애드온 최신버전 사용중입니다
?
?
넵 감사합니다
링크를 붙혀넣기하면 자동으로 중앙정렬로 ifream이 생성되던데 이것도 옵션에서 설정할수있으면 좋겠습니다~!
?
윤삼님 보통 링크를 sns 같은 곳에 링크하면 이렇게 임베드가 되자나요.
혹시 이런 링크도 임베드 지원은 어려울까요?
위 형식에서 내용도 100자 정도 들어갔으면 좋겠습니다.
뉴스를 공유하고 싶은데 많이 가져오면 저작권 문제가 있을것 같아서
단순히 임베드로만 보여주고 싶어서요.
네, 궁극적으로는 그런 형태까지 생각하고 있습니다.
예전에도 비슷한 애드온을 만들어서 배포한 적이 있었고, 이거를 람보님이 모듈로 포팅해서 발전시키기도 했었구요.
https://github.com/bjrambo/parserlink
다만, 이 두 개 모두 본문에서 링크를 파싱해서 프리뷰 카드를 출력해주는 것이었는데요.
제가 이번에 작업하고 있는 게 바로 이 부분을 개선해서 본문 입력시에 프리뷰가 가능하게끔 하는 거예요.
근데 요즘 시간이 별로 없어서ㅜㅜ 작업 속도가 붙질 않네요ㅠㅠㅠ
헉 그랬네요..저의 불찰로 번거롭게 해드려 죄송합니다ㅜㅜ
혹시 pc환경에서 유튜브 주소 입력시 썸네일만 블러처리되어서 나오는 건 어떤 현상인지 알 수 있을까요,,?
한다고 했는데 미처 생각하지 못했던 주소 형식이었네요ㅜ
이렇게 해보시죠.
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] : '';
XE 공식 홈페이지에서 배포중인 타임라인 모듈과 충돌이 있는듯 합니다!
글쓰기 페이지에서만 나오는 경고문이 나오는가 하면..
동영상 같은 경우 섬네일이 나오고 영상 사이즈가 줄어드는군요.
람보님께서 배포중인 타임라인 플러스 모듈은 가지고 있지 않아서 확인 하지 못했습니다.
네 타임라인 적용 안하면 정상적으로 출력 됩니다. (동일 게시판스킨,설정,레이아웃)
2.0.13 올리고 사용하려고 하는데 유튜브 썸네일 첨부가 안되네요.
혹시 1. 설정 > 시스템 설정 > 보안 설정 > iframe에 다음을 추가 <--- 이부분이 관련이 있을까요?
2.0.13에서 위부분이 없어진거같습니다. 아래처럼 나오고 있네요.
안녕하세요! 유투브 링크를 모바일에서 첨부하면 임베드가 될 때도 있고 안 될 때도 있는데,
확인해보니 클립보드에 있는 걸 바로 붙여넣기 하면 임베드가 되고
클립보드 버튼을 누르고 그 안에 있는 링크를 넣으면 임베드가 되지 않습니다. 왜 이런 문제가 발생하는 걸까요?ㅠㅠ
참고를 위해 사진 첨부합니다.
안녕하세요. 연휴를 틈타 오랜만에 들어와서 늦은 댓글 남겨봅니다.
에디터의 paste 이벤트를 사용해서 미디어를 임베드하는데요.
모바일 기기의 클립보드 삽입은 paste 이벤트로는 잡히지 않는 모양이에요.
이 부분은 장기간에 걸친 연구가 필요할 것 같습니다.
사용 중이신 모바일 OS와 모바일 브라우저를 알려주시면 도움이 될 것 같습니다.
혹시 좋은 의견 있으시면 나눠주세요~
최신버전 설치했는데 윗분 말씀 처럼 링크 텍스트가 사라지고
섬네일이 생성이 되지 않는데 무슨 문제가 있을까요??
작성된 게시글의 소스는 이렇게 되어있습니다.
<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
KPOP, K드라마가 대세인만큼 VLIVE 영상도 지원되었으면 좋겠습니다!!!
트위터 아래쪽이 잘리는데요. 이거 원인을 좀 알 수 있을까요?
제가 사용하는 레이아웃,보드시킨 테마에 트위터쪽 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를 사용하지 않는 것으로 하겠습니다. 기존에 미디어쪽이 아직 삽입된게 없으니 기존 문서에 영향을 주지는 않을 것 같습니다.
링크 텍스트도 표시를 설정해도
글 등록시 링크텍스트가 사라지는 현상은 어떻게 고쳐야할까요.
URL 텍스트가 남도록 하고싶어서요ㅕ ㅜㅜ
업데이트 내역(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> </p>';
paste + 를 맨 위쪽에 추가해 주었습니다. 모든 곳에 다 추가를 해주는 방법을 ㅜㅡ
아프리카VOD 무한으로 콘텐츠를 로딩중이라는 팝업발생합니다.
1. 크롬 애드블럭 사용시
2. 19금이 걸린 VOD
안녕하세요! 기똥찬 애드온 정말 감사드립니다 ㅠ 혹시 xe에서는 사용이 불가능한 애드온일까요? 감사합니다 ㅠ!
아마도 모바일 쪽에서 유튜브나 아이프레임의 리사이즈를 통제하는 별도의 서드파티 자료를 쓰시는 게 아닐까 생각됩니다. 저는 같은 증상이 재연되지 않거든요ㅜ
혹시 그 부분 체크해보셨나요?
?
<p>링크</p>
가 제거 되면서 약간 애로점이 생기네요.
동영상섬네일 애드온(유료)에 의존하려면 위 링크가 제거가 되면 안되는 상황인데요.
애매한 지점입니다.(네이버,카카오 의 경우 동영상섬네일 애드온에서 섬네일을 지원하고 있어서...)
네이버는 p태그가 없는데도 섬네일용 파일이 첨부가 되긴 하네요.