갤러리 게시판 리스트에서 분류별로 정렬하려면...
본문
갤러리 게시판 리스트에서 아래와 같이 노출되려면 어떻게 해야 할까요?
검색해도 비슷한게 없네요.
해당 게시판에 카테고리가 2개 있습니다.(분류명1|분류명2)
리스트에서 아래와 같이 보일려면 어떻게 해야 할까요?
고수님들의 고귀한 답변을 기다리겠습니다.
답변 4
카테네임을 변수로 지정을 하고
$category = $list[$i]['ca_name'];
$target_categories = array('카테고리이름');
// 이런식으로 // 게시물의 카테고리 변수 설정 하고 실제카테이름을 설정해주고 하면되겟지요.
하여
해당스킨은 작업의뢰에 신청해야할듯 보입니다.
네, 감사합니다.
스킨 소스에서 for문을 다음 처럼 하면 됩니다
for ($i=0; $i<count($list); $i++) {
if( $list[$i]['ca_name']=='분류2') continue;
위의 출력하는 for문을 복사헤서 위의 for문이 끝난 뒤쪽에 붙여넣은 후
for ($i=0; $i<count($list); $i++) {
if( $list[$i]['ca_name']=='분류1') continue;
그런데 문제는 게시물이 6개만 있다면 질문처럼 되겟으나 분류1이 10개 분류2가 5개 라면
어덯게 하겠다는 것인가요?
갯수 상관없이 한페이지에 보여지면 됩니다.
분류명별로 콘텐츠를 시각적으로 구분된 블록으로 정렬할 수 있게,
데이터베이스에서 분류 정보를 기준으로 데이터를 가져오고,
출력 스킨에서 분류별 그룹화 및 HTML/CSS 스타일링을 적용하여
분류명과 그에 속한 게시물을 시각적으로 명확히 구분하도록 구현합니다.
＊블록의 상단에 분류명을 명시하여 콘텐츠를 분류별로 구분
예로, skin/board/gallery/list.skin.php에서 분류별 그룹화 로직을 다음과 같이 작성
$current_category = '';
while ($row = sql_fetch_array($result)) {
if ($current_category !== $row['ca_name']) {
if ($current_category !== '') {
echo "</div>"; // 이전 카테고리 닫기
}
$current_category = $row['ca_name'];
echo "<h2>{$current_category}</h2>";
echo "<div class='gallery-category'>";
}
// 게시물 출력
echo "<div class='gallery-item'>";
echo "<img src='{$row['wr_file']}' alt='{$row['wr_subject']}'>";
echo "<p>{$row['wr_subject']}</p>";
echo "</div>";
}
if ($current_category !== '') {
echo "</div>"; // 마지막 카테고리 닫기
}
＊동일한 크기의 사각형 콘텐츠
이미지 및 콘텐츠 항목을 균일한 크기로 정렬하여 한 행에 3개씩 표시합니다. HTML 구조에서 각 항목을 .gallery-item 클래스로 감싸고, CSS로 스타일링
skin/board/gallery/style.css
.gallery-category {
display: flex;
flex-wrap: wrap; /* 여러 줄로 배치 */
gap: 1%; /* 항목 간 간격 */
margin-bottom: 40px; /* 분류 간 간격 */
}
.gallery-category h2 {
width: 100%; /* 분류명은 전체 줄 차지 */
font-size: 24px;
margin-bottom: 20px;
}
.gallery-item {
flex: 1 1 calc(30% - 1%); /* 한 줄에 3개 */
margin-bottom: 20px;
text-align: center;
}
.gallery-item img {
width: 100%;
height: auto;
border-radius: 5px;
}
.gallery-item p {
margin-top: 10px;
font-size: 16px;
color: #555;
}
＊분류 간 여백
gallery-category 클래스에 여백 스타일을 추가하여 각 분류 블록 간에 시각적인 구분
.gallery-category {
margin-bottom: 40px; /* 분류 블록 간 간격 */
padding: 10px;
border-bottom: 1px solid #ddd; /* 분류 구분선 */
}
＊콘텐츠 항목이 동일한 간격으로 정렬될 수 있도록 CSS inline-block 스타일과 여백을 적용.
※ 위의 방안은 검색과 AI로 만들었으니, 추가 커스터마이징 하세요.
> 콘텐츠 개수의 변화나 분류 추가에도 유연하게 동작할 것입니다. ?
