그누보드 5.4 나리야 빌더에서 게시글 본문 이미지 Lazyload 적용하기
컨텐츠 정보
- 13,677 조회
- 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 파일을 직접만들 수도 있습니다.
위 사이트에 가서 만들 수 있습니다.
선택해서 적용하면 좋을 것 같습니다.
다운받은 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로 변경
-
등록일 2020.10.10그누보드 SMTP 외부메일 설정하는 방법댓글 26
-
등록일 2020.10.03그누보드5에 실시간 채팅 구축하기댓글 13
-
등록일 2020.09.26
-
등록일 2020.09.24도커로 메일서버 구축하기댓글 4
관련자료
-
서명우성짱의 NAS를 운영하고 있습니다.
저의 즐거움이 여러분의 즐거움이면 좋겠습니다.
-
링크
-
첨부등록일 2020.08.01 18:40