크롬80버전 결제 이슈, 영카트5 주요패치 확인!

[테마제작기(24記)] 갤러리 게시판 페이지 개발 1/2 > 개발자팁

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

[테마제작기(24記)] 갤러리 게시판 페이지 개발 1/2 정보

기타 [테마제작기(24記)] 갤러리 게시판 페이지 개발 1/2

본문

원문(출처) : 그누보드 테마 제작 24 - 갤러리 게시판 페이지 개발

 

게시판 작업이 끝이 아니었더라구요. 흠냐...

이제 갤러리 게시판 작업을 진행합니다.

그누 기본 테마의 갤러리 리스트 화면과 
현재 제작중인 테마의 갤러리 리스트 화면을 비교해봅니다.

2949618301_1594690409.1191.png

 

뭐가 어떻게 되면 저렇게 깨질까 궁금하네요.

 

일반 게시판과 갤러리 게시판의 차이점은
리스트 페이지만 다르군요.

 

보기 페이지, 댓글 페이지, 보기 우측 사이드 페이지는 
그대로 복사해서 옮겨도 될 듯 합니다.
(아... 혹시 모르니 소스 비교 작업은 진행해야겠네요.)
검토 결과 list.skin.php 만 다르고 모두 똑같은 소스입니다.

 

같은 것들은 옮겨놓고, list.skin.php만 원래의 갤러리 파일로 두고 화면을 확인해보겠습니다.
(이제 진짜 현재 화면일수도 있겠네요~)

2949618301_1594690454.3074.png

2949618301_1594690463.3169.png

2949618301_1594690476.6446.png

2949618301_1594690488.0157.png

보기 영역과 보기 사이드 영역은 정상적으로 보이나,
하단 리스트 영역은 역시 엄청 깨져 보입니다.

 

먼저 Metronic Admin Templat에서 저 화면을 예쁘게 만들어줄 템플릿을 찾아 보겠습니다
이미지 영역과 하단 텍스트 영역을 나누어서 찾아봐야겠습니다.

 

이미지 영역은 가운데 과일(망고인가?)을 이용하기로 하고...

2949618301_1594690529.5405.png

keenthemes.com/metronic/preview/demo1/features/custom/overlay.html

 

하단 텍스트 영역을 뭘 써야 할지... 못찾겠네요...
걍 일반 게시판에서 썼던것들을 가져와 짜집기 해야겠어요...

2949618301_1594690577.6852.png

 

위 이미지 영역에 사용할 템플릿을 이용하여 대략의 화면을 만들어봅니다.
한 줄에 3개씩 들어 있는걸 col-lg-4 클래스르 col-lg-3로 변경하여 4개씩 보이게 하고...

2949618301_1594690596.94.png

 

이미지에 오버레이되는 버튼은 추천과 비추천으로 바꾸야 겠네요.
템플릿의 아이콘은 SVG네요. 아이콘 하나에 코드가 엄청나게 긴...
뭐 찾아봅니다. 
아니네요... 여러 그림 중에 힘겹게 찾았더니...
(아래 이미지에서 좌상단에 콤파스 같이 생긴거.. 그게 SVG였네요)

 

이미지 위에 표시되는 아이콘은 flaticon였네요.
다시 찾아봅니다. ㅎㅎ
아놔... 이넘은 like는 있는데, dislike는 없네요...

 

lineaswome에서도 찾아봅니다. 없어요...

 

다시 만만한 fontaswome에서 찾아봅니다.
간신히 찾았습니다.
far fa-thumbs-up으로 찾아야 down까지 나오네요. 

 

overlay-layer 클래스를 편집하는 것까지
대략 2시간은 걸린 것 같습니다. ㅠㅠ

2949618301_1594690654.8241.png

 

이제 하단의 텍스트 영역을 짜집기 해볼게요.

2949618301_1594690669.3597.png

 

하... 진짜 오래 걸렸습니다.
역시 디자인이나 화면 구성등은 퍼블리셔 분들에게 부탁해야 하는 일이 맞나봅니다. ㅠㅠ

 

지금까지 작업한 소스입니다.

소스는 원문에서 확인할 수 있습니다.

 

 

이제 코딩 작업 들어갑니다.

 

게시판의 목록이나 보기 페이지 또는 다른 본문 영역들을 보면
<div id="bo_gall" style="width:<?php echo $width; ?>">
이런 코드들이 나옵니다.
$width 변수는 본문의 가로 영역을 지정하는 것 같은데,
전 반응형 사이트라 딱히 신경 쓰지 않고 있습니다.
(나중에 문제가 될까 싶어 글로 남겨봅니다. ^^)

 

일단 위에서 작업한 화면을 우겨 넣어봅니다.
흐미 심란하네요... 이미지가 없으니 영 이상합니다.

2949618301_1594690767.0637.png

 

일반 게시판에서 했던 UI의 기본틀을 가져오고,
상단과 하단 영역을 그대로 옮겨놓습니다.
(전체 체크박스 덕분에 좀 삽질을 했네요.)
그런데, 어째 더욱 더 심란해지네요... 가로 스크롤은 왜 생긴건지...
점점 더 하기 싫어지고 있어요...

2949618301_1594690785.5315.png

 

그누보드에는 $bo_gallery_cols 라는 변수가 있네요.
갤러리 게시판에서 한 줄에 놓일 갤러리의 수를 기억하는 변수입니다.
그러나 제작 중인 테마는 Bootstrap 방식으로
1개, 2개, 3개, 4개, 6개, 12개로만 쪼갤 수 있습니다.
(Bootstrap은 한 줄을 무조건 12컬럼으로만 쪼개도록 되어 있기때문이죠.)
물론, 1컬럼 안을 다시 row를 두고 또 쪼갤 수 도 있겠지만... 그렇게까지 코딩하긴 싫어요...)
한 줄당 표시되는 이미지의 수를 제한을 두도록 하겠습니다.

 


이미지의 수.
// Bootstrap의 방식으로 전체를 12로 놓고 나눌 수 밖에 없다.
// 다시 말해서, 2개, 3개, 4개, 6개, 12개만 가능하다. (1개 또는 12개 쓸 사람은 없겠지...)
// 결론 최대 6개까지만 가능하게 한다. by tank. at 200706.
$bs_bo_gallery_cols = $bo_gallery_cols;
if ( $bo_gallery_cols <= 2 ) $bs_bo_gallery_cols = 6;
else if ( $bo_gallery_cols == 3 ) $bs_bo_gallery_cols = 4;
else if ( $bo_gallery_cols == 4 ) $bs_bo_gallery_cols = 3;
else if ( $bo_gallery_cols == 5 ) $bs_bo_gallery_cols = 6;
else if ( $bo_gallery_cols >= 6 ) $bs_bo_gallery_cols = 6;
                                        //tLog($bo_gallery_cols, $bs_bo_gallery_cols);

2949618301_1594690841.397.png

 

아... 쉽지 않네요. 복잡하고... 그래도...
이제 추천수와 비추천수만 남았습니다.

2949618301_1594690859.5982.png

 

하단의 가로 스크롤바가 사라지지 않고 있네요...
원인을 찾아봐야겠습니다.

2949618301_1594690890.0573.png

 

글이 중간에 또 잘려서 2부로 넘어갑니다.

 

원문(출처) : 그누보드 테마 제작 24 - 갤러리 게시판 페이지 개발

추천1

댓글 전체

전체 5,054
개발자팁 내용 검색

회원로그인

진행중 포인트경매

  1. 참여26 회 시작20.08.05 04:15 종료20.08.12 04:15
  2. 참여21 회 시작20.08.04 00:57 종료20.08.11 00:57

(주)에스아이알소프트 (06212) 서울시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT