그누보드 외부 이미지 썸네일 - 외부 이미지 불러오기 (여분 필드 사용 방법)
페이지 정보
조회 1,161회 작성일 22-05-16 12:07
본문
외부 이미지 썸네일
외부 이미지 불러오기 (여분필드 사용 방법)
이 방법은 트래픽과 저장 용량을 절약하기 위해, 외부에서 이미지를 불러오기 해서 썸네일로 보여 주는 방법이다.
외부 이미지 썸네일 - 외부 이미지 불러오기 (여분 필드 사용 방법)
외부 이미지 썸네일 불러오기
그누보드에서 이미지를 업로드하면 자동으로 썸네일 이미지 파일이 만들어져서 저장된다. 물론 이미지 크기와 썸네일 크기만큼 호스팅의 저장 용량이 줄어든다.
그래서 외부 이미지의 경로를 입력하면 불러오기 해서 보여 주는 방법을 예제 소스로 설명한다. 외부 이미지의 경로 주소로 불러다가 쓰려고 한다.
단, 썸네일이라고는 하나 외부 이미지를 그대로 읽어오는 것이기 때문에, 큰 이미지를 불러올 경우 페이지 로딩 속도가 많이 떨어진다.
그러므로 작은 이미지를 적용하는 것이 좋다.
위 방법을 위해서는 2개의 스킨 파일을 건드려야 한다.
skin/board/gallery 같은 스킨 폴더에 있는 write.skin.php, list.skin.php의 일부에 소스 코드를 추가한다.
외부 이미지용 여분 필드 사용 방법
우선 외부 이미지의 경로를 입력한 곳을 만들어야 한다.
write.skin.php는 글 작성을 하기 위한 페이지다. 여기에 아래의 코드를 추가 한다.
필요한 곳에 아무 데나 넣어도 된다.
[code]
<div class="클래스 이름 1">
외부 이미지 URL : <input type='text' name='wr_번호' value='<?=$write[wr_번호]?>' class="클래스 이름 2" size="가로 길이를 숫자로 입력">
</div>
[/code]
위에서 한글로 된 부분은 사용할 때 자신의 필요에 따라 바꿔서 사용해야 할 부분이다.
여기에서 중요한 것은 여분 필드 사용 방법 중 가장 중요한 <?=$write[wr_번호]?> 부분이다.
번호 부분에는 1부터 10까지 사용할 수 있다. 중요한 것은 이후의 모든 "wr_번호"에서 같은 번호를 사용해야 한다는 것이다.
나중에 글을 쓸 때 이 곳에 외부 이미지의 URL 경로를 붙여넣기 해서 저장하면 리스트와 뷰 페이지에서 이미지가 나타나게 된다.
여부 필드의 외부 이미지 썸네일 넣기
위의 코드를 저장하면 글쓰기 페이지에서 이미지 경로가 저장된다.
그렇다면 이번에는 리스트 목록 페이지에 저장한 경로의 이미지가 나타나게 해야 한다.
list.skin.php를 연 후에 $thumb['src'] 부분을 검색해서 찾는다.
그러면 그 아래에 아래와 같은 코드가 있을 것이다. 이것을 그 아래에 있는 여분필드 외부 이미지 코드로 바꾼다.
<원본>
[code]
if ($thumb['src']) { // 이 부분은 그냥 놔둠
$img_content = ... // 이 부분도 그냥 놔둠
} else { // 이 부분도 그냥 놔둠
$img_content = ... // 이 이 부분을 지우고 아래 코드로 바꿈
} // 이 부분도 그냥 놔둠
[/code]
<수정>
[code]
if ($thumb['src']) { // 이 부분은 그냥 놔둠
$img_content = ... // 이 부분도 그냥 놔둠
} else { // 이 부분도 그냥 놔둠
$img_content = '<img class="클래스 이름" src="' . $list[$i][wr_숫자] . '">';
} // 이 부분도 그냥 놔둠
[/code]
썸네일로 외부 이미지 불러오기
저장도 했고 리스트에도 보이니 이것만으로도 모든 것이 끝났다.
다만, 내용 읽기 페이지에도 경로 지정된 외부 이미지 불로오기를 하고 싶다면 view.skin.php를 불러서 추가 작업을 해도 된다.
아래 예제 코드를 아무데나 붙여넣기 하면 된다.
[code]
<div class="요소 이름">
<img src="<?php echo $view[wr_숫자]; ?>">
</div>
[/code]
위에 있는 list.skin.php에서는 썸네일 이미지로 사용한 것이기 때문에 크기를 따로 지정할 필요가 없다. 그누보드 설정 페이지에서 지정한 크기로 나오기 때문이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
그러나 내용 보기 페이지에서는 크게 보이게 하고 싶다면 CSS파일에서 width와 height를 추가하면 된다.