작업실
나리야 분류

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

컨텐츠 정보

본문


GIF
 


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로 변경

관련자료

댓글 0
등록된 댓글이 없습니다.
Total 157 / 2 Page
RSS
윈도우10 ffmpeg로 GIF 움짤을 MP4, WEBM으로 변환하는 방법

서버 1. 들어가며GIF 움짤을 하나씩 변환하려면 온라인 컨버터 사이트를 이용하면 편합니다.하지만 움짤이 몇백개가 넘어가면 힘들겠죠? ^^;;그래서 …

php 도커 이미지에 ffmpeg 추가하기

서버 1. 들어가며최근 그누보드5.4에 움직이는 gif 이미지를 mp4 동영상으로 변환하는 플러그인이 올라왔습니다.https://sir.kr/g5_p…

Acme.sh Docker 이미지로 와일드카드 인증서 발급받기

서버 1. 왜 도커로 설치할까요?DNS 인증을 통한 acme.sh Letsencrypt SSL 인증서 발급받기LuaDNS API를 이용한 무료도메인 …

그누보드 5.4에 Vditor 에디터 올리기

그누보드 기본 소개편집모드 바꾸기이미지 드래그 앤 드롭 업로드 기능1. 들어가며깃허브 : https://github.com/Vanessa219/vdito…

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

나리야 1. 들어가며그누보드 5.4는 그누보드 5.3과 조금 다릅니다. 그래서 따로 글을 올려봅니다.그누보드 5.3 아미나 빌더에서 Lazyload 적…

LuaDNS API를 이용한 무료도메인 와일드카드 SSL 인증서 발급 받기

1. 들어가며무료 DNS 서비스로 클라우드플레어를 추천하지만, 클라우드플레어는 Freenom의 무료도메인(ga,tk,ml,cf,gq)에 대해 A…

최근글


새댓글


알림 0