[이윰] 전체검색 리스트 페이지에서 동영상 썸네일 이미지도 사용하기
페이지 정보
루루아빠
2,852
2018.05.04 02:52:37
짧은주소
-
https://yadolee.com/tip/548 주소복사
본문
전체검색 리스트 페이지에서 동영상 썸네일 이미지도 사용하기
이윰빌더 1.3.10 패치로 전체검색 리스트 페이지에서 썸네일 이미지 사용하기 기능이 추가되었으며 동영상 썸네일 이미지도 사용하도록 하자.
1. 그누보드5/eyoom/core/search/search.skin.php를 열어 이미지 사용일 경우를 검색한다.
수정 전
2. 그누보드5/eyoom/설치된 테마/skin_bs/search/basic/search.skin.html을 열어 <!--{? ..img_content}-->를 검색하여 다음과 같이 수정한다.
수정 전
1. 그누보드5/eyoom/core/search/search.skin.php를 열어 이미지 사용일 경우를 검색한다.
수정 전
if($eyoom['use_search_image'] == 'y') {
unset($data['img_content'], $data['img_src']);
$thumb = get_list_thumbnail($loop1[$idx]['bo_table'], $list[$idx][$i]['wr_id'],$eyoom['search_image_width'], $eyoom['search_image_height']);
if($tpl_name == 'bs') {
if($thumb['src']) {
$data['img_content'] = '<img class="img-responsive" src="'.$thumb['src'].'" alt="'.$thumb['alt'].'">';
$data['img_src'] = $thumb['src'];
}
} else {
if($thumb['src']) {
$data['img_content'] = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
$data['img_src'] = $thumb['src'];
}
}
}
$loop2[$i] = $data;
}
수정 후
if($eyoom['use_search_image'] == 'y') {
unset($data['img_content'], $data['img_src']);
$thumb = get_list_thumbnail($loop1[$idx]['bo_table'], $list[$idx][$i]['wr_id'],$eyoom['search_image_width'], $eyoom['search_image_height']);
if($tpl_name == 'bs') {
if($thumb['src']) {
$data['img_content'] = '<img class="img-responsive" src="'.$thumb['src'].'" alt="'.$thumb['alt'].'">';
$data['img_src'] = $thumb['src'];
}
} else {
if($thumb['src']) {
$data['img_content'] = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
$data['img_src'] = $thumb['src'];
}
}
$wr_4 = unserialize($list[$idx][$i]['wr_4']); //추가 시작 - 외부동영상도 썸네일 표시
if(!$wr_4) $wr_4 = array();
if($list[$idx][$i]['wr_4'] && !$thumb['src']) {
$thumb['src'] = $wr_4['thumb_src'];
if($thumb['src']) {
if($tpl_name == 'bs') {
if($thumb['src']) {
$data['img_content'] = '<img class="img-responsive" src="'.$thumb['src'].'">';
$data['img_src'] = $thumb['src'];
} else {
$data['img_content'] = '<span style="width:100%;">no image</span>';
}
} else {
if($thumb['src']) {
$data['img_content'] = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
$data['img_src'] = $thumb['src'];
} else {
$data['img_content'] = '<span style="width:'.$board['bo_gallery_width'].'px;height:'.$board['bo_gallery_height'].'px">no image</span>';
}
}
}
}
// 게시물에 동영상이 있는지 결정
$data['is_video'] = $wr_4['is_video']; //추가 끝
}
$loop2[$i] = $data;
}
2. 그누보드5/eyoom/설치된 테마/skin_bs/search/basic/search.skin.html을 열어 <!--{? ..img_content}-->를 검색하여 다음과 같이 수정한다.
수정 전
<!--{? ..img_content}-->
<div class="result-list-image">
<a class="search-result-image">
{..img_content}
</a>
</div>
<!--{/}-->
수정 후
<!--{? ..img_content}-->
<div class="result-list-image">
<!--{? ..is_video}--><span class="video-icon"><i class="far fa-play-circle"></i></span><!--{/}--> <!-- 동영상 폰트어썸 표시 -->
<div class="search-result-image">
{..img_content}
</div>
</div>
<!--{/}-->
동영상 아이콘(폰트어썸)을 위해 상단 스타일 정의 .search-result-list .result-list .result-list-image 아래에 다음과 같은 스타일을 적용한다.
.search-result-list .result-list .video-icon{position:absolute;top:5px;left:5px;color:#fff;font-size:15px;line-height:15px;z-index:1}
추천인
레벨 101
경험치 1,519,440
Progress Bar 14.66%
- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS
BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑
루루아빠랍니다~~
최신댓글이 없습니다.


댓글
첫 번째 댓글을 남겨 주세요