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

페이지 정보

루루아빠 2,294 2018.05.06 01:01

평점

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

본문

전체검색 리스트 페이지에서 외부 이미지도 썸네일 사용하기
전체검색에 첨부 혹은 에디터를 통해 업로드된 이미지 외에 동영상, 외부 이미지 썸네일도 보여지도록 수정해 보자
전체검색 리스트 페이지에서 동영상 썸네일 이미지도 사용하기에 추가적인 작업을 하려 한다.

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'].'">';
                    $data['img_src'] = $thumb['src'];
                }
            } else {
                if($thumb['src']) {
                    $data['img_content'] = '<img src="'.$thumb['src'].'" 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'].'" 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'];        //추가 끝

            if (!$thumb['src']) {        //추가 시작 - 외부이미지 썸네일 표시
                $thumb = $eb->make_thumb_from_extra_image($loop1[$idx]['bo_table'], $list[$idx][$i]['wr_id'], $list[$idx][$i]['wr_content'], $eyoom['search_image_width'], $eyoom['search_image_height']);
                if($tpl_name == 'bs') {
                    if($thumb) {
                        $data['img_content'] = '<img class="img-responsive" src="'.$thumb.'">';
                        $data['img_src'] = $thumb;
                    }
                } else {
                    if($thumb['src']) {
                        $data['img_content'] = '<img src="'.$thumb.'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'">';
                        $data['img_src'] = $thumb;
                    }
                }
            }        //추가 끝

        }

        $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,295,216
레벨 97
경험치 1,399,190

Progress Bar 9%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 7481438 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 Eyoom Builder 1.1.13 패치 루루아빠 2015.10.26 2,698 0
그누•영카트  🏆 구글 웹폰트를 적용해보자 루루아빠 2015.10.27 2,479 0
이윰  🏆 Eyoom Builder 1.1.14 패치 루루아빠 2015.10.30 3,230 0
JavaScript  🏆 마우스 오른쪽 버튼 사용시 경고 메세지 띄우기 루루아빠 2015.10.31 2,590 0
HTML5  🏆 HTML5 동영상 혹은 오디오 마우스 우측 버튼 다운로드 금지시키기 루루아빠 2015.10.31 3,022 0
그누•영카트  🏆 게시판을 디바이스에 따라 보여주기 안보여주기 루루아빠 2015.11.04 2,205 0
이윰  🏆 Eyoom Builder 1.1.15 패치 루루아빠 2015.11.09 3,051 0
그누•영카트  🏆 그누보드 5.1.4 패치 (2015.10.26) 루루아빠 2015.11.09 2,262 0
그누•영카트  🏆 그누보드 5.1.5 패치 (2015.11.02) 루루아빠 2015.11.09 2,406 0
그누•영카트  댓글+1🏆 그누보드 5.1.6 패치 루루아빠 2015.11.09 2,717 0
그누•영카트  🏆 영카트 5.1.3 패치 (2015.10.26) 루루아빠 2015.11.09 2,350 0
그누•영카트  🏆 영카트 5.1.4 (2015.11.02) 루루아빠 2015.11.09 2,527 0
그누•영카트  댓글+1🏆 영카트 5.1.5 패치 루루아빠 2015.11.09 2,517 0
이윰  🏆 🎞️ 검색시 본문 내용 나오지 않게 하기 루루아빠 2015.11.15 2,525 0
그누•영카트  🏆 🎞️ 그누보드 5.1.7 패치 루루아빠 2015.11.17 2,335 0
그누•영카트  🏆 🎞️ 영카트 5.1.6 패치 루루아빠 2015.11.17 2,445 0
이윰  🏆 🎞️ Input 관련 버튼과 이윰 버튼 정렬 맞추기 루루아빠 2015.11.17 2,444 0
이윰  🏆 🎞️ 그누보드 5.17, 영카트 5.16 대응 테마 패치 루루아빠 2015.11.18 2,774 0
이윰  🏆 🎞️ Eyoom Builder 1.1.16 패치 루루아빠 2015.11.19 2,947 0
그누•영카트  댓글+1🏆 🎞️ 접근차단 IP, 접근가능 IP로 인해 홈에 접근 불가될때 루루아빠 2015.11.21 2,820 0