유튜브 동영상 API 썸네일 이미지 자동 출력 > 그누보드 게시판스킨 강좌

본문 바로가기
전체검색

그누스킨닷컴

그누보드 게시판스킨 강좌

그누보드 영카트 초보 사용자를 위한 기본 매뉴얼, 스킨 제작 기초강좌를 공유합니다.

유튜브 동영상 API 썸네일 이미지 자동 출력

페이지 정보

작성자 관리자 작성일18-01-29 20:34 조회2,371회

첨부파일

gallery_youtube.zip (19.6K) 2018-01-29 20:56:51

본문

유튜브 API를 활용해서 주소만 넣으면 동영상 썸네일 이미지를 게시판 목록에 자동으로 출력하는 방법입니다.

유튜브 이미지를 출력하기 위해서는 우선 동영상 ID 값이 필요합니다.

예를 들어 유튜브에서 동영상 퍼가기를 클릭하면 코드가 이런식으로 되어 있는데


af1dc5aec58d59115b35237544c3c6cf_1517229460_1426.png 


https://youtu.be/0wlXaHmmOVc 

여기서 맨 뒷부분 값이 필요합니다.



유튜브 API 에서는 사이즈별로 다양하게 썸네일 이미지를 기본으로 제공하고 있습니다.


120X90 (default.jpg) 

https://img.youtube.com/vi/0wlXaHmmOVc/default.jpg


320X180 (mqdefault.jpg)

https://img.youtube.com/vi/0wlXaHmmOVc/mqdefault.jpg


480X360 (hqdefault.jpg)

https://img.youtube.com/vi/0wlXaHmmOVc/hqdefault.jpg


640X480 (sddefault.jpg) 

https://img.youtube.com/vi/0wlXaHmmOVc/sddefault.jpg


동영상 최대 해상도 (maxresdefault.jpg)

https://img.youtube.com/vi/0wlXaHmmOVc/maxresdefault.jpg


스킨 만드실 때 적당한 사이즈로 골라서 사용하시면 됩니다.

(빨간색 부분 변경하면 됩니다.)



그누보드 기본 gallery 스킨에 실제 적용을 해보겠습니다.

일단 link 필드나 여분 필드를 활용해서 저 주소값을 입력받아야겠죠.

예제는 여분 필드로 설명하겠습니다.



write.skin.php 파일 수정


wr_1 여분필드를 사용해서 유튜브 동영상 주소값을 입력받습니다.


<tr>

    <th scope="row"><label for="youtube">유튜브주소</label></th>

    <td><input type="text" name="wr_1" value="<?php echo $write['wr_1'] ?>" id="wr_1" class="frm_input" size="50"><p style="margin-top:5px">입력예 : https://youtu.be/0wlXaHmmOVc</p></td>

</tr>



list.skin.php 파일 수정


<?php

if ($list[$i]['is_notice']) { // 공지사항  ?>

    <strong style="width:<?php echo $board['bo_gallery_width'] ?>px;height:<?php echo $board['bo_gallery_height'] ?>px">공지</strong>

<?php } else {

    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);


    if($thumb['src']) {

        $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';

    } else {

        $img_content = '<span style="width:'.$board['bo_gallery_width'].'px;height:'.$board['bo_gallery_height'].'px">no image</span>';

    }


    echo $img_content;

}

?>


위 코드를 이렇게 변경합니다. 빨간색 부분이 변경된 부분입니다.


<?php

if ($list[$i]['is_notice']) { // 공지사항  ?>

    <strong style="width:<?php echo $board['bo_gallery_width'] ?>px;height:<?php echo $board['bo_gallery_height'] ?>px">공지</strong>

<?php } else {

    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);


    if($list[$i]['wr_1']) {

        $youtube_id = str_replace("https://youtu.be/", "", $list[$i]['wr_1']);

        $img_content = '<img src="https://img.youtube.com/vi/'.$youtube_id.'/mqdefault.jpg" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';

    } else if($thumb['src']) {

        $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';

    } else {

        $img_content = '<span style="width:'.$board['bo_gallery_width'].'px;height:'.$board['bo_gallery_height'].'px">no image</span>';

    }


    echo $img_content;

}

?>



유튜브 주소값을 입력했으면 유튜브 썸네일을 출력하고

없으면 에디터나 파일 첨부로 등록한 이미지를 출력하라는 내용입니다.


코드를 유심히 보면 처음에 설명해드린 유튜브에서 기본으로 제공하는 형태는 이렇고..

https://img.youtube.com/vi/0wlXaHmmOVc/mqdefault.jpg


예제에 사용된 그누보드 스킨에서는 동영상 ID 값을 이렇게 적용했습니다.

https://img.youtube.com/vi/'.$youtube_id.'/mqdefault.jpg


그리고 $youtube_id 값은 wr_1 여분필드에서 입력받은 값에서 이렇게 추출을 했고요.

$youtube_id = str_replace("https://youtu.be/", "", $list[$i]['wr_1']);


유튜브 동영상 ID 입 출력 방법은 기본적인 방법으로 했으며 더 나은 방법이 있으면 변경하셔도 됩니다.




* 참고사항


view 페이지에서의 동영상 출력은 view.skin.php 파일 적당한 곳에 이렇게 추가


<?php

if($view['wr_1']) {

$youtube_id = str_replace("https://youtu.be/", "", $view['wr_1']);

?>

<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $youtube_id ?>" frameborder="0" allowfullscreen></iframe>

<?php } ?>



실제 해보시면 방법은 매우 간단합니다.

관리자님의 댓글

관리자

수정된 스킨 첨부했으니 참고하세요.

커뮤니티는 당분간 중단하겠습니다.
그누보드 게시판스킨 강좌 목록
번호 제목
공지 게시판 스킨 강좌 공지사항입니다.
93 게시판 목록 카테고리 SELECT 형태로 변경
92 하루 동안 등록할 수 있는 댓글 수 제한하기
91 자동등록방지 캡챠(captcha) 무조건 사용하기
90 갤러리 스킨 목록에서 썸네일 대신 원본 이미지로 출력
89 댓글 수정 금지하기
88 임시 저장된 글 기능 삭제하기
87 댓글 비밀글 체크박스 무조건 체크 상태로 만들기
86 특정 회원 아이디 값을 지정해서 해당 회원이 작성한 글처럼 올리기
85 여분필드 사용 시 배열을 사용해서 체크박스 항목 만드는 방법
84 게시판 목록 페이지에 수정 삭제 버튼 출력
83 특정 게시판 제목 필수 입력 해제하기
82 게시판에 등록된 글 삭제시 관리자에게 SMS 문자 발송하기
81 첨부 파일을 다운로드하면 자동으로 추천하기
80 비추천 개수가 일정수 이상이면 게시글 삭제하기
79 게시판 목록에서 각종 아이콘 출력 부분을 이미지로 변경
78 이메일 주소 직접입력과 특정 도메인을 선택해서 입력
77 게시판에 글 등록시 관리자에게 SMS 문자 발송하기
76 특정 회원만 게시판 내용을 볼 수 있게 아이디를 지정해서 글 등록하기
75 댓글 쓰기 권한이 없는 비회원도 입력 폼은 보이게 처리
74 게시판 목록에 다운로드수, 다운로드 포인트 출력
73 댓글 목록 회원만 공개하고 비회원은 비공개, 권한별로 설정
72 비밀글 댓글 작성시 작성자 별표 처리
71 게시물 수정시 등록 날짜를 현재 시간으로 업데이트
70 글쓰기 페이지에 개인정보수집이용 동의 체크박스 추가하기
69 스크랩 버튼 비회원에게도 노출시키기 댓글1
68 댓글 목록에서 내가 작성한 글만 출력하기
67 갤러리형 게시판에서 첨부된 사진이 없을 때 no image를 이미지로 출력
66 게시판 스킨을 분류별로 각각 다르게 설정했을 때 스킨 수정 안내
65 패스워드 지정 비밀글 게시판 만들기
64 링크 입력 특정 게시판에서만 삭제하기
63 목록 페이지에 특정 이미지 원본 선택해서 출력하기
62 게시판 스킨 제작할 때 이미지 경로 설정 방법
61 모바일 내용 관리 페이지에서 상단 하단 파일을 별도로 관리하는 방법
60 비밀글 체크박스 디폴트 값을 체크 상태로 설정하기
59 게시판 설정에 있는 여분 필드 사용 예제
58 글쓰기 페이지에서 링크 입력 문구 변경하기
57 목록에서 tr 배경색 구분
56 첨부파일 등록할 때 원하는 곳에 따로따로 입력하기
55 글쓰기 페이지에서 첨부 파일 문구를 각각 다르게 출력
게시물 검색


그누스터디는 그누보드, 영카트 초보 사용자를 위한 정보를 공유합니다.

Copyright © GNUSTUDY. All rights reserved.
상단으로