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

컨텐츠 정보

본문


G30KvvL.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 155 / 1 Page
RSS
메일 서버를 Docker로 구축하여 그누보드, 라이믹스, 워드프레스와 연결하기

서버 들어가며도커로 메일서버 구축하기( https://www.wsgvet.com/home/673 )엊그제 윗 글을 올렸습니다.기존에 올렸던 글은 모든…

도커로 메일서버 구축하기

서버 도커 메일서버란?도커에서 메일서버를 직접 운영할 수 있게 해줍니다.SMTP, ESMTP, POP3, IMAP 방식을 사용할 수 있습니다.자신의 …

그누보드5.4 나리야빌더에서 box shadow 효과 적용하기

나리야 현재 제 홈페이지 본문 이미지에 적용된 box shadow 효과를 적용하는 방법에 대해 알려드리겠습니다.우선 적용 전 이미지입니다.위와 같이 사…

그누보드 나리야빌더 NB-Basic 보드스킨 GIF 움짤 표현 최적화하기 댓글 2

나리야 그누보드 5.4.2.8 버전부터 움직이는 GIF 이미지를 올리면 MP4나 WEBM으로 변환하여 보여줄 수 있습니다.https://sir.kr/g…

윈도우10 ffmpeg로 GIF 움짤을 MP4, WEBM으로 변환하는 방법

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

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

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

최근글


새댓글