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

본문 바로가기
전체검색

아이디비번찾기

그누보드 게시판스킨 강좌

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

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

페이지 정보

작성자 관리자 작성일18-01-29 20:34 조회821회

첨부파일

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 } ?>



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

관리자님의 댓글

관리자

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

로그인 후 댓글을 남겨주세요.
그누보드 게시판스킨 강좌 목록
번호 제목
공지 게시판 스킨 강좌 공지사항입니다.
69 스크랩 버튼 비회원에게도 노출시키기 댓글1
68 댓글 목록에서 내가 작성한 글만 출력하기
67 갤러리형 게시판에서 첨부된 사진이 없을 때 no image를 이미지로 출력
66 게시판 스킨을 분류별로 각각 다르게 설정했을 때 스킨 수정 안내
65 패스워드 지정 비밀글 게시판 만들기
64 링크 입력 특정 게시판에서만 삭제하기
63 목록 페이지에 특정 이미지 원본 선택해서 출력하기
62 게시판 스킨 제작할 때 이미지 경로 설정 방법
61 모바일 내용 관리 페이지에서 상단 하단 파일을 별도로 관리하는 방법
60 비밀글 체크박스 디폴트 값을 체크 상태로 설정하기
59 게시판 설정에 있는 여분 필드 사용 예제
58 글쓰기 페이지에서 링크 입력 문구 변경하기
57 목록에서 tr 배경색 구분
56 첨부파일 등록할 때 원하는 곳에 따로따로 입력하기
55 글쓰기 페이지에서 첨부 파일 문구를 각각 다르게 출력
54 게시판 글 번호 역순으로 정렬 1번부터 시작
53 [그누보드5.3] 게시판에 회원 이미지 출력하는 방법
열람중 유튜브 동영상 API 썸네일 이미지 자동 출력 댓글1
51 댓글 바로가기 링크 주소 얻기 댓글1
50 게시판 목록에서 첨부 파일 다운받기
49 목록페이지 상단에 내글 보기 버튼 생성
48 목록에서 첨부파일 아이콘 출력할 때 이미지 파일은 구분해서 출력
47 게시판 글쓰기 버튼 항상 보이게 처리
46 여분필드를 활용한 게시판 스킨 제작 - 댓글 쓰기 페이지에 적용하는 방법
45 게시판 목록에 있는 분류탭 메뉴를 view 페이지에서도 그대로 출력
44 게시판 스킨을 분류별로 각각 다르게 사용하는 방법
43 댓글 목록에서 본문글을 올린 회원이 작성한 댓글은 강조하기
42 최근 댓글이 등록된 게시물 순서대로 리스트 재정렬
41 모바일 게시판에서 상단 하단 파일을 별도로 관리하는 방법
40 10개 이상의 여분필드를 사용할 때 게시판 생성 단계에서부터 추가하기 댓글3
39 신청서나 예약 게시판 등에서 글을 작성할 때 회원 정보에 있는 값 가져오기 댓글2
38 리스트 정렬 필드를 여분필드값 기준으로 정렬하는 방법
37 새 코멘트가 등록되었을 때 게시판 목록에 new 아이콘 출력 댓글6
36 기본 gallery 스킨에서 공지사항도 썸네일 이미지 출력
35 링크 주소 입력 개수 늘리는 방법
34 글 보기 페이지에 이전글 다음글 제목 날짜 출력 댓글1
33 본문 페이지에서 특정 이미지를 선택해서 출력하는 방법
32 코멘트 비밀글 체크박스 삭제시 문제 해결
31 본문에 댓글을 남겼는지 체크해서 활용하기 댓글5
게시물 검색


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

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