[이윰] 전체검색 리스트 페이지에서 동영상 썸네일 이미지도 사용하기

페이지 정보

루루아빠 2,309 2018.05.04 02:52

평점

본문

전체검색 리스트 페이지에서 동영상 썸네일 이미지도 사용하기
이윰빌더 1.3.10 패치로 전체검색 리스트 페이지에서 썸네일 이미지 사용하기 기능이 추가되었으며 동영상 썸네일 이미지도 사용하도록 하자.

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}
추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,288,461
레벨 96
경험치 1,383,562

Progress Bar 55%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요