게시판/최신글 스킨 목록에서 외부이미지 보여주기 정보
게시판/최신글 스킨 목록에서 외부이미지 보여주기
본문
게시판 갤러리 스킨(skin/board/gallery)이나
최신글 갤러리 스킨(skin/latest/pic_block)에서
업로드한 이미지가 없을 때
wr_content의 외부이미지를 찾아보고 출력해주는 방법입니다.
실제로 썸네일을 만들지는 않고
사이즈만 줄여서 보여주는 것이라
용량이 큰 외부이미지는 로딩에 영향이 있을 수 있습니다.
소스는 현재 최신 버전인 5.4.5.1과 테마 파일을 기준으로 하겠습니다.
----------
먼저, 5.4.2.9에서 추가된 HOOK을 이용하는 방법입니다.
https://github.com/gnuboard/gnuboard5/commit/2f9bb483424db9dfc8ad4a2e565d17941ca3f613
extend 폴더에 적당한 파일을 하나 생성한 후 코드를 작성합니다.
예) extend/user.extend.thumb.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
add_replace('thumb_image_tag', '_thumb_image_tag', 10, 5);
function _thumb_image_tag($img_content, $thumb, $wr_content='') {
// fallback
$return = $img_content;
// 썸네일이 없을 때 외부이미지가 있으면 출력합니다
if ((!isset($thumb['src']) || empty($thumb['src'])) && !empty($wr_content)) {
if ( $matches = get_editor_image($wr_content, false) ){
$k = count($matches[1]) - 1 < 1 ? 0 : mt_rand(0, count($matches[1]) - 1);
if (isset($matches[1][$k])) {
$return = '<span style="display: block; overflow: hidden; background: url('.$matches[1][$k].') center center no-repeat; background-size: cover;"><span style="display: block; visibility: hidden;">'.$img_content.'</span></span>';
}
}
}
return $return;
}
여기까지만 하면 HOOK은 작동하나
실제로는 아무것도 하지 않기 때문에 변함이 없습니다.
thumb_image_tag HOOK에는 인자가 2개 있는데요.
wr_content에서 외부이미지를 찾아야하므로 인수를 추가해줘야 합니다.
1. 게시판 갤러리 스킨
https://github.com/gnuboard/gnuboard5/blob/5.4.5.1/theme/basic/skin/board/gallery/list.skin.php#L124
// 원래 코드
echo run_replace('thumb_image_tag', $img_content, $thumb);
// 인수 추가 $list[$i]['wr_content']
echo run_replace('thumb_image_tag', $img_content, $thumb, $list[$i]['wr_content']);
2. 최신글 갤러리 스킨
https://github.com/gnuboard/gnuboard5/blob/5.4.5.1/theme/basic/skin/latest/pic_block/latest.skin.php#L29
// 원래 코드
<?php echo run_replace('thumb_image_tag', $img_content, $thumb); ?>
// 인수 추가 $list[$i]['wr_content']
<?php echo run_replace('thumb_image_tag', $img_content, $thumb, $list[$i]['wr_content']); ?>
----------
두번째로, 스킨에서 처리하는 방법입니다.
(extend 폴더에 따로 파일을 작성하지 않습니다!!!)
1. 게시판 갤러리 스킨
https://github.com/gnuboard/gnuboard5/blob/master/theme/basic/skin/board/gallery/list.skin.php#L124
$img_content 를 출력하는 바로 위쪽에 삽입합니다.
// 내부 이미지 파일이 없을 때 외부 이미지가 있으면 출력합니다
if (!isset($thumb['src']) || empty($thumb['src'])) {
if ( $matches = get_editor_image($list[$i]['wr_content'], false) ){
$k = count($matches[1]) - 1 < 1 ? 0 : mt_rand(0, count($matches[1]) - 1);
if (isset($matches[1][$k])) {
// NO_IMAGE로 사이즈를 설정할 때
$img_content = '<span style="display: block; overflow: hidden; background: url('.$matches[1][$k].') center center no-repeat; background-size: cover;"><span style="display: block; visibility: hidden;">'.$img_content.'</span>';
// 썸네일 width/height 비율로 사이즈를 설정할 때
//$img_content = '<span style="display: block; overflow: hidden; width: 100%; padding-top: '.(round(($board['bo_gallery_height'] / $board['bo_gallery_width']) * 100, 2)).'%; background: url('.$matches[1][$k].') center center no-repeat; background-size: cover;"></span>';
}
}
}
echo run_replace('thumb_image_tag', $img_content, $thumb);
2. 최신글 갤러리 스킨
https://github.com/gnuboard/gnuboard5/blob/5.4.5.1/theme/basic/skin/latest/pic_block/latest.skin.php#L25
$img_content 변수 할당 다음에 코드를 삽입합니다.
$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';
// 내부 이미지 파일이 없을 때 외부 이미지가 있으면 출력합니다
if (!isset($thumb['src']) || empty($thumb['src'])) {
if ( $matches = get_editor_image($list[$i]['wr_content'], false) ){
$k = count($matches[1]) - 1 < 1 ? 0 : mt_rand(0, count($matches[1]) - 1);
if (isset($matches[1][$k])) {
// NO_IMAGE로 사이즈를 설정할 때
$img_content = '<span style="display: block; overflow: hidden; background: url('.$matches[1][$k].') center center no-repeat; background-size: cover;"><span style="display: block; visibility: hidden;">'.$img_content.'</span></span>';
// 썸네일 width/height 비율로 사이즈를 설정할 때
//$img_content = '<span style="display: block; overflow: hidden; width: 100%; padding-top: '.(round(($thumb_height / $thumb_width) * 100, 2)).'%; background: url('.$matches[1][$k].') center center no-repeat; background-size: cover;"></span>';
}
}
}
(게시판에 사용된 이미지는 네이버뉴스 기사 이미지)
게시판
최신글
4
댓글 3개
