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

페이지 정보

루루아빠 2,359 2018.05.04 02:52

평점

  • 평점 : 0점 (0명 참여)

본문

전체검색 리스트 페이지에서 동영상 썸네일 이미지도 사용하기
이윰빌더 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,294,838
레벨 97
경험치 1,398,514

Progress Bar 6%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 242413 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 🚩 전체검색 리스트 페이지에서 동영상 썸네일 이미지도 사용하기 루루아빠 2018.05.04 2,360 0
이윰  🏆 Eyoom Builder 1.3.6 패치 루루아빠 2017.11.21 2,371 0
이윰  🏆 게시판 관리자의 레벨이 글쓰기 권한보다 낮더라도 태그 작성하기 루루아빠 2017.05.03 2,400 0
이윰  🏆 Eyoom Builder 1.3.4 패치 루루아빠 2017.11.21 2,429 0
이윰  🏆 Eyoom Builder 1.3.15 패치 루루아빠 2018.01.05 2,431 0
이윰  🏆 Eyoom Builder 1.3.2 패치 루루아빠 2017.11.21 2,439 0
이윰  🏆 이윰빌더 조건문 변수 루루아빠 2016.12.13 2,440 0
이윰  🏆 이윰빌더 외부이미지 로컬 저장시 용량 줄이기 루루아빠 2017.11.23 2,441 0
이윰  🏆 🎞️ Input 관련 버튼과 이윰 버튼 정렬 맞추기 루루아빠 2015.11.17 2,444 0
이윰  🏆 특정 게시판에 다른 헤더 파일 불러오기 루루아빠 2016.10.01 2,445 0
이윰  🏆 🎞️ 게시글 본문에 동영상(HTML5)이 있을 시 아이콘 보여주기 루루아빠 2018.01.29 2,449 0
이윰  🏆 Eyoom Builder 3.0.9 패치 shadow2fox 2019.03.25 2,452 0
이윰  댓글+2🏆 회원 프로필 사진 변경시 바로 갱신하여 보여 주기 shadow2fox 2018.12.04 2,464 0
이윰  🏆 최신글에서 글 작성 시간을 나타내지 않기 루루아빠 2017.02.16 2,474 0
이윰  🏆 Eyoom Builder 1.2.4 패치 루루아빠 2016.04.23 2,490 0
이윰  🏆 게시글 작성시 전화번호 입력하고 구독자가 전화걸 수 있게 하기 루루아빠 2015.09.17 2,495 0
이윰  🏆 최신글 카테고리 추출 옵션 루루아빠 2016.02.25 2,496 0
이윰  🏆 반응형 테마 PC에서 메인과 사이드 레이아웃 위치 변경하기 루루아빠 2016.11.22 2,503 0
이윰  🏆 태그 클릭시 관련된 게시글 페이지당 노출 갯수 정하기 루루아빠 2016.10.09 2,504 0
이윰  🏆 이윰빌더 외부이미지 로컬 저장 https 보안서버도 적용하기 루루아빠 2017.11.22 2,508 0