본문 바로가기
재밌는 IT 개발/그누보드 테마 제작기(記)

그누보드 테마 제작 24 - 갤러리 게시판 페이지 개발

by 만수킴 2020. 7. 13.

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

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

그누 기본 테마와 제작중인 테마의 갤러리 리스트 화면

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

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

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

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

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

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

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

갤러리 리스트의 이미지 노출 영역에 사용하기 위해 고른 Metronic Admin 템플릿의 모습

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

 

Metronic | Overlay

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has sur

keenthemes.com

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

갤러리 리스트의 하단 텍스트 영역은 기존 작업물을 이용하기로 함.

하루 쉬고, 다시 달려봅니다~

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

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

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

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

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

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

상단 추천/비추천 버튼까지 완료한 모습.

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

하단 텍스트 영역까지 화면 구성을 완료한 모습.

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

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

Row-->
<div class="row">
	<div class="col-lg-3">
		<!--begin::Card-->
		<div class="card card-custom overlay">
			<div class="card-body p-0">
				<div class="overlay-wrapper">
					<img src="assets/media/stock-600x400/img-5.jpg" alt="" class="w-100 rounded" />
				</div>
				<div class="overlay-layer align-items-start justify-content-end pt-1 pr-1" style="opacity:100;">
					<a href="#" class="btn btn-clean btn-sm btn-pill font-size-lg px-1 py-1 mr-2" target="_blank" style="background-color:white;">
						<i class="far fa-thumbs-up icon-lg text-danger mr"></i> <span class="align-middle text-dark-75">579</span>
					</a>
					<a href="#" class="btn btn-clean btn-sm btn-pill font-size-lg px-1 py-1" target="_blank" style="background-color:white;">
						<i class="far fa-thumbs-down icon-lg text-primary"></i> <span class="align-middle text-dark-75">14</span>
					</a>
				</div>
			</div>
			<div class="card-footer p-0">
				<button type="button" onclick="location.href='#';" class="btn btn-sm btn-primary px-1 py-1 mr-3">카테고리-1</button>
				<a href="#" class="d-block font-weight-bolder font-size-lg text-dark">
					제목이에요. 길게 나올수도 있겠죠. 기본 그누테마도 딱히 제목을 자르지 않으니까... 저도 다 출력합니다.
				</a>
				<a href="#" class="d-block font-weight-bolder font-size-lg text-muted">
					본문 내용입니다. 관리자에서는 쓰면 느려지니까 쓰지 말라고 하는 옵션이요. 그래도 테마니까, 기능에 충실해야 하니까. 저는 넣어 봅니다.
				</a>
				<div class="d-md-inline font-weight-bolder w-100px text-dark text-center mr-3 ">최고관리자</div>
				<span class="font-weight-bold text-muted mr-2"><i class="fa fa-clock-o" aria-hidden="true"></i> 07-02</span>
				<span class="font-weight-bold text-muted mr-2"><i class="fa fa-eye" aria-hidden="true"></i> 3회</span>
			</div>
		</div>
		<!--end::Card-->
	</div>
	<div class="col-lg-3">
		<!--begin::Card-->
		<div class="card card-custom overlay">
			<div class="card-body p-0">
				<div class="overlay-wrapper">
					<img src="assets/media/stock-600x400/img-5.jpg" alt="" class="w-100 rounded" />
				</div>
				<div class="overlay-layer align-items-start justify-content-end pt-1 pr-1" style="opacity:100;">
					<a href="#" class="btn btn-clean btn-sm btn-pill font-size-lg px-1 py-1 mr-2" target="_blank" style="background-color:white;">
						<i class="far fa-thumbs-up icon-lg text-danger mr"></i> <span class="align-middle text-dark-75">579</span>
					</a>
					<a href="#" class="btn btn-clean btn-sm btn-pill font-size-lg px-1 py-1" target="_blank" style="background-color:white;">
						<i class="far fa-thumbs-down icon-lg text-primary"></i> <span class="align-middle text-dark-75">14</span>
					</a>
				</div>
			</div>
			<div class="card-footer p-0">
				<button type="button" onclick="location.href='#';" class="btn btn-sm btn-primary px-1 py-1 mr-3">카테고리-1</button>
				<a href="#" class="d-block font-weight-bolder font-size-lg text-dark">
					제목이에요. 길게 나올수도 있겠죠. 기본 그누테마도 딱히 제목을 자르지 않으니까... 저도 다 출력합니다.
				</a>
				<a href="#" class="d-block font-weight-bolder font-size-lg text-muted">
					본문 내용입니다. 관리자에서는 쓰면 느려지니까 쓰지 말라고 하는 옵션이요. 그래도 테마니까, 기능에 충실해야 하니까. 저는 넣어 봅니다.
				</a>
				<div class="d-md-inline font-weight-bolder w-100px text-dark text-center mr-3 ">최고관리자</div>
				<span class="font-weight-bold text-muted mr-2"><i class="fa fa-clock-o" aria-hidden="true"></i> 07-02</span>
				<span class="font-weight-bold text-muted mr-2"><i class="fa fa-eye" aria-hidden="true"></i> 3회</span>
			</div>
		</div>
		<!--end::Card-->
	</div>
	<div class="col-lg-3">
		<!--begin::Card-->
		<div class="card card-custom overlay">
			<div class="card-body p-0">
				<div class="overlay-wrapper">
					<img src="assets/media/stock-600x400/img-5.jpg" alt="" class="w-100 rounded" />
				</div>
				<div class="overlay-layer align-items-start justify-content-end pt-1 pr-1" style="opacity:100;">
					<a href="#" class="btn btn-clean btn-sm btn-pill font-size-lg px-1 py-1 mr-2" target="_blank" style="background-color:white;">
						<i class="far fa-thumbs-up icon-lg text-danger mr"></i> <span class="align-middle text-dark-75">579</span>
					</a>
					<a href="#" class="btn btn-clean btn-sm btn-pill font-size-lg px-1 py-1" target="_blank" style="background-color:white;">
						<i class="far fa-thumbs-down icon-lg text-primary"></i> <span class="align-middle text-dark-75">14</span>
					</a>
				</div>
			</div>
			<div class="card-footer p-0">
				<button type="button" onclick="location.href='#';" class="btn btn-sm btn-primary px-1 py-1 mr-3">카테고리-1</button>
				<a href="#" class="d-block font-weight-bolder font-size-lg text-dark">
					제목이에요. 길게 나올수도 있겠죠. 기본 그누테마도 딱히 제목을 자르지 않으니까... 저도 다 출력합니다.
				</a>
				<a href="#" class="d-block font-weight-bolder font-size-lg text-muted">
					본문 내용입니다. 관리자에서는 쓰면 느려지니까 쓰지 말라고 하는 옵션이요. 그래도 테마니까, 기능에 충실해야 하니까. 저는 넣어 봅니다.
				</a>
				<div class="d-md-inline font-weight-bolder w-100px text-dark text-center mr-3 ">최고관리자</div>
				<span class="font-weight-bold text-muted mr-2"><i class="fa fa-clock-o" aria-hidden="true"></i> 07-02</span>
				<span class="font-weight-bold text-muted mr-2"><i class="fa fa-eye" aria-hidden="true"></i> 3회</span>
			</div>
		</div>
		<!--end::Card-->
	</div>
	<div class="col-lg-3">
		<!--begin::Card-->
		<div class="card card-custom overlay">
			<div class="card-body p-0">
				<div class="overlay-wrapper">
					<img src="assets/media/stock-600x400/img-5.jpg" alt="" class="w-100 rounded" />
				</div>
				<div class="overlay-layer align-items-start justify-content-end pt-1 pr-1" style="opacity:100;">
					<a href="#" class="btn btn-clean btn-sm btn-pill font-size-lg px-1 py-1 mr-2" target="_blank" style="background-color:white;">
						<i class="far fa-thumbs-up icon-lg text-danger mr"></i> <span class="align-middle text-dark-75">579</span>
					</a>
					<a href="#" class="btn btn-clean btn-sm btn-pill font-size-lg px-1 py-1" target="_blank" style="background-color:white;">
						<i class="far fa-thumbs-down icon-lg text-primary"></i> <span class="align-middle text-dark-75">14</span>
					</a>
				</div>
			</div>
			<div class="card-footer p-0">
				<button type="button" onclick="location.href='#';" class="btn btn-sm btn-primary px-1 py-1 mr-3">카테고리-1</button>
				<a href="#" class="d-block font-weight-bolder font-size-lg text-dark">
					제목이에요. 길게 나올수도 있겠죠. 기본 그누테마도 딱히 제목을 자르지 않으니까... 저도 다 출력합니다.
				</a>
				<a href="#" class="d-block font-weight-bolder font-size-lg text-muted">
					본문 내용입니다. 관리자에서는 쓰면 느려지니까 쓰지 말라고 하는 옵션이요. 그래도 테마니까, 기능에 충실해야 하니까. 저는 넣어 봅니다.
				</a>
				<div class="d-md-inline font-weight-bolder w-100px text-dark text-center mr-3 ">최고관리자</div>
				<span class="font-weight-bold text-muted mr-2"><i class="fa fa-clock-o" aria-hidden="true"></i> 07-02</span>
				<span class="font-weight-bold text-muted mr-2"><i class="fa fa-eye" aria-hidden="true"></i> 3회</span>
			</div>
		</div>
		<!--end::Card-->
	</div>
</div>
<!--end::Row-->

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

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

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

작업한 화면을 일단 우겨넣었음.

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

일반게시판의 틀을 옮겨와 작업을 진행중인 모습

그누보드에는 $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);

슬슬 자리를 잡아 갑니다.

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

정말이지 쉽지 않은 여정... ㅠㅠ

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

하다에 생뚱 맞은 가로 스크롤바... 

card-body 클래스 다음에 넣은 row class가 영역을 벗어나 있었습니다.
bootstrap을 잘 몰라서 그런지, row class를 쓰면 가끔 이런 상황이 발생한는군요.
뭐 항상 하던데로 margin값을 주어 해결하였습니다.
mx-1 을 추가했습니다.

            <div class="card-body px-0 pt-1 mb-0">
                <div class="row min-w-500px mx-1 p-2 py-1 ">


                    <?php for ($i=0; $i<count($list); $i++) {

아.. 여기서 문제가 발생하였네요.
Metronic Admin Template 선정에서부터 문제가 있었어요.
overlay-layer
말그대로 오버레이가 문제였습니다.
이미지와 카테고리 제목 표시되는 부분이
overlay가 되고 있어 링크가 클릭되지 않습니다.

추천/비추천 버튼의 레이어가 이미지와 텍스트 영역을 덮어버려 클릭이 안된다.

이 무슨... 황당한 결론이란 말인지...
다 했는데, 링크가 클릭이 안될줄은 정말 상상도 못했습니다.
아... 이케 해결하지... ㅠㅠ

꼼수로 해결했네요 ^^
맘에 들진 않지만, 되면 되는거 아니겠음까?
이미지와 제목 위에는 
체크박스를 위한 레이어와 추천/비추천을 위한 레이어가 존재하는데요.
레이어의 높이를 30px로 줄여버렸더니,
링크가 아주 잘 걸립니다. ^^ 
음하하하하~~~
덤으로 Background를 아무리 설정해도 회색 비스무리하게 나오던 버그도
함께 고칠 수 있었습니다.

아... 완료되었습니다.
아주 징글 징글 했습니다만~ 완료되었네요~~

완료된 갤러리 리스트의 화면

 

 

이제 게시판 작업도 90% 이상 완료되었네요.
남은 작업은 2가지가 되겠네요.

1. 선택 삭제/복사/이동 팝업 화면
2. 전체 검색 

다음 포스팅때 모두 완료시키도록 하겠습니다.

긴 글 읽어주셔서 감사합니다.

저작자표시 비영리 동일조건

'재밌는 IT 개발 > 그누보드 테마 제작기(記)' 카테고리의 다른 글

그누보드 테마 제작 26 - 전체 검색 페이지 개발  (4) 2020.07.16
그누보드 테마 제작 25 - 관리자 선택 삭제/복사/이동 기능 개발  (3) 2020.07.14
그누보드 테마 제작 23 - 게시글 부가 페이지 개발  (2) 2020.07.10
그누보드 테마 제작 22 - 게시글 리스트 페이지 개발  (4) 2020.07.09
그누보드 테마 제작 21 - 게시글 보기 및 댓글 페이지 개발  (2) 2020.07.08

관련글

댓글

티스토리툴바