나리야

그누보드 5.4 나리야 빌더에서 게시글 본문 이미지 Lazyload 적용하기

우성짱쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성
작성일 2020.07.31 23:45

13,836 조회
11 댓글
1 추천
목록

1. 들어가며

그누보드 5.4는 그누보드 5.3과 조금 다릅니다. 그래서 따로 글을 올려봅니다.

그누보드 5.3 아미나 빌더에서 Lazyload 적용하는 방법은

https://www.wsgvet.com/bbs/board.php?bo_table=home&wr_id=589

위 링크를 참조하세요.

2. Lazyload 최신버전 다운로드

필요한 파일들은 직접 다운 받거나 CDN을 통해서 링크만으로 적용 가능합니다.

우선 다운 받으려면

https://github.com/tuupola/lazyload/releases

lazyload의 최신버전을 확인하려면 위 링크를 통하면 받을 수 있습니다.

또는 첨부한 압축파일에도 있습니다.

그리고 loading용 gif 파일과 투명배경 파일도 같이 첨부파일에 있습니다.

저는 처음에 gif 파일을 적용하여 뭔가 로딩되는 느낌을 줬었는데요.

자꾸보다보니 뭔가 불편하더라구요. 그래서 투명 파일을 만들어서 바꿔줬더니 훨씬 좋았습니다.

첨부파일에 loading.gif가 움직이는 로딩느낌의 파일이고

trans.png가 그냥 830 X 553 의 투명파일입니다.

trans-wide.png 는 3000 X 553 투명파일입니다.

특이하게 나리야에서는 로딩 파일 가로 기준으로 이미지가 출력이 되더라구요. 되도록이면 trans-wide.png 파일이 나을 것 같습니다.

loading 파일을 직접만들 수도 있습니다.

https://loading.io/

위 사이트에 가서 만들 수 있습니다.

선택해서 적용하면 좋을 것 같습니다.

다운받은 jquery.lazyload.min.js 와 loading 파일을 적정 위치에 넣습니다.

저는 js 파일을 그누보드 루트에 있는 js 폴더에 넣었고, 로딩파일을 그누보드 루트에 있는 img 폴더에 넣었습니다.

jquery.lazyload.min.js 파일을 CDN으로 편하게 쓰시려면 다운 받지 않아도 됩니다. 밑에 글에 추가하여 설명드립니다.

다만 로딩파일의 경우 CDN이 있지만 이미지 가로폭이 로딩파일과 같은 버그가 있어 추천드리진 않습니다.

3. head.sub.php 파일 수정하기

/theme/NB-Basic/head.sub.php 121번째 줄에 있는


<script src="<?php echo NA_URL ?>/js/jquery-3.5.1.min.js"></script>

위 내용 바로 밑에


<script src="<?php echo G5_JS_URL; ?>/jquery.lazyload.min.js"></script>
<script type="text/javascript" charset="utf-8"> //lazyload 기능 추가
	$(document).ready(function(){
		$("img.lazy").lazyload({
			threshold : 10,  
			effect : "fadeIn",
		});
	});
</script>

위 내용을 추가합니다.

CDN으로 사용하시려면


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" integrity="sha512-jNDtFf7qgU0eH/+Z42FG4fw3w7DM/9zbgNPe3wfJlCylVDTT3IgKW5r92Vy9IHa6U50vyMz5gRByIu4YIXFtaQ==" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8"> //lazyload 기능 추가
	$(document).ready(function(){
		$("img.lazy").lazyload({
			threshold : 10,  
			effect : "fadeIn",
		});
	});
</script>

위와 같이 붙여넣으면 끝입니다.

이제 테마 전영역에서 lazyload를 사용할 수 있습니다.

4. thumbnail.lib.php 파일 수정하기

/lib/thumbnail.lib.php 188번째줄 ~ 192번째 줄


if ($width) {
   $thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" width="'.$width.'" height="'.$height.'"/>';
} else {
   $thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'"/>';
}

위 내용을


if ($width) {
   $thumb_tag = '<img src="'.G5_URL.'/img/trans-wide.png" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy" width="'.$width.'" height="'.$height.'"/>';
} else {
   $thumb_tag = '<img src="'.G5_URL.'/img/trans-wide.png" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy"/>';
}

위와 같이 변경합니다.

투명 배경이 아닌 loading.gif를 원하시면


if ($width) {
   $thumb_tag = '<img src="'.G5_URL.'/img/loading.gif" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy" width="'.$width.'" height="'.$height.'"/>';
} else {
   $thumb_tag = '<img src="'.G5_URL.'/img/loading.gif" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy"/>';
}

위와 같이 변경하면 됩니다.

CDN에 있는 loding 파일을 사용하려면



if ($width) {
   $thumb_tag = '<img src="//cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy" width="'.$width.'" height="'.$height.'"/>';
} else {
   $thumb_tag = '<img src="//cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg" data-original="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="lazy"/>';
}

위와 같이 넣으면 되는데요.

그런데 나리야 빌더에서는 로딩파일의 가로폭을 기준으로 이미지가 뜨는 버그가 있네요.

그래서 첨부파일에 trans-wide.png 파일을 이용하면 게시판 가로폭 100%로 출력이 됩니다.

또는 자신이 원하는 이미지 가로폭에 맞춰서 리사이즈 후 사용해도 됩니다.

---

2020-08-04 업데이트

lazy id를 lazy class로 변경