본문에 유튜브 영상이 있을 경우 영상 썸네일을 목록에 출력해주는 방법

board_youtube_default 스킨은 유튜브 썸네일을 리스트에 출력해주는 스킨입니다.

이 스킨은 사용자정의 필드에 유튜브 변수값을 입력받을 경우 처리하는 방식입니다.

코드는 다음과 같습니다.

{@
   $youtube_eid = $module_info->youtube_eid;
   $youtube_code = $document->getExtraEidValue($youtube_eid);
$youtube_id = str_replace('http://youtu.be/','',$youtube_code);
$youtube_id = str_replace('https://youtu.be/','',$youtube_id);
             }
 <span class="thumb">
   <img src="https://img.youtube.com/vi/{$youtube_id}/hqdefault.jpg" />
 </span>

이걸 참조해서, 글 본문에 유튜브 링크가 있는 경우 썸네일을 출력해주는 방법입니다.

먼저 게시판 설정에서 '요약'을 리스트에 추가해주세요.

그래야 $document->getSummary() 변수를 사용할 수 있습니다.

먼저 적용한 전체 코드를 살펴보겠습니다.

{@
//$youtubeUrl = "https://youtu.be/";
//$youtubeUrl = "https:\/\/youtu.be\/\D+[a-z-]";
// $youtubeId =
// var_dump(preg_match("/youtube/i",$document->getSummary()))
}
<?php
// $string = "https://youtu.be/X37-plgL-Xs tkf";
$string = $__Context->document->getSummary(500);
// echo ($string);
//$result = preg_match("/https:\/\/youtu.be\/\D+[^\b]/i",$string,$matches);
// $result = preg_match("/(https:\/\/youtu.be\/)([a-z]\D+)\s/i",$string,$matches); // abc는 됨..
//$result = preg_match("/(https:\/\/youtu.be\/)(.+[A-Za-z-0-9])/i",$string,$matches);
$result = preg_match("/(https:\/\/youtu.be\/)(.+[A-Za-z-0-9]+)(https:\/\/youtu.be)/i",$string,$matches) || preg_match("/(https:\/\/youtu.be\/)(.+[A-Za-z-0-9])/i",$string,$matches);
if($result==true){
// echo var_dump($result);
// echo ('있음'.'<br>');
// echo $matches[0].'<br>';
// echo $matches[1].'<br>';
// echo $matches[2].'<br>';
echo ('<img src="https://img.youtube.com/vi/'.$matches[2].'/hqdefault.jpg" />');
}
?>

작성 편의상 XE템플릿이 아닌 PHP 코드를 그대로 작성했습니다.

{@

$string = $document->getSummary(500); // 적당하게 500글자를 뽑아옵니다. 500글자 안에 없으면 -_- 없는걸로..

}

그 다음은 정규식을 뽑아와야 하는데, 에디터에 따라, 사용하는 애드온에 따라 출력방식이 다르기 때문에 두가지 경우를 다 작성해주었습니다.

CASE1

가나다라마바사 https://youtube/ID 아자차카타파하

CASE2

가나다라마바사 https://youtube/IDhttps://youtube/ID 아자차카타파하

$document->getSummary를 하다보니 에디터나 애드온에 따라서 저런 식으로 출력되더군요.

preg_match 함수를 사용해서 두 가지 경우를 모두 다 적어주도록 했습니다.

{@

$result = preg_match("/(https:\/\/youtu.be\/)(.+[A-Za-z-0-9]+)(https:\/\/youtu.be)/i",$string,$matches) || preg_match("/(https:\/\/youtu.be\/)(.+[A-Za-z-0-9])/i",$string,$matches);

}

그리고 썸네일은 이런 식으로 적어줄 수도 있습니다.

{@

$youtubeThumbnail =  '<img src="https://img.youtube.com/vi/'.$matches[2].'/hqdefault.jpg" />';

}

그러면 이런 식으로 작성 가능하겠죠.

{$youtubeThumbnail }

자 다시 XE템플릿코드로 정리해보면 아래와 같이 작성 가능합니다.

{@
$string = $document->getSummary(500);
$result = preg_match("/(https:\/\/youtu.be\/)(.+[A-Za-z-0-9]+)(https:\/\/youtu.be)/i",$string,$matches) || preg_match("/(https:\/\/youtu.be\/)(.+[A-Za-z-0-9])/i",$string,$matches);
$youtubeThumbnail =  '<img src="https://img.youtube.com/vi/'.$matches[2].'/hqdefault.jpg" />';
}
{$youtubeThumbnail}

혹은 아래와 같이 작성해줄 수도 있습니다.

{@
$string = $document->getSummary(500);
$result = preg_match("/(https:\/\/youtu.be\/)(.+[A-Za-z-0-9]+)(https:\/\/youtu.be)/i",$string,$matches) || preg_match("/(https:\/\/youtu.be\/)(.+[A-Za-z-0-9])/i",$string,$matches);
// $youtubeThumbnail =  '<img src="https://img.youtube.com/vi/'.$matches[2].'/hqdefault.jpg" />';
}
<img src="https://img.youtube.com/vi/{$matches[2]}/hqdefault.jpg" cond="$matches[2]">

#유튜브 #유튜브썸네일