갤러리에서 가로이미지 갯수와 세로 사이즈를 변경해보도록 하겠습니다.
먼저 갤러리 가로 이미지 갯수 변경 방법입니다.
먼저 자료실게시판 → 갤러리게시판으로 변경을 해주어야 합니다. 관리자 화면에서 "Mangboard > 게시판관리"를 클릭해주세요. 해당 게시판의 갤러리 Shortcode를 복사합니다.
관리자 화면에서 "페이지 > 모든페이지"를 클릭해주세요. 해당 페이지를 클릭한 뒤, Shortcode를 붙여넣기 합니다.
이제 갤러리 게시판으로 설정되었습니다.
이제 반응형에 따라 갤러리 게시판의 이미지 개수를 설정하는 방법을 살펴보겠습니다.
갤러리 가로 이미지 개수를 수정하는 숏코드 속성은 갤러리 숏코드에 아래와 같이 responsive_class="col-543" 속성을 추가해서 사용하시면 됩니다.
[mb_board name="study_board" list_type="gallery" style="" responsive_class="col-543"] 여기서 543이란...
PC에서 갤러리 게시판 가로 이미지 갯수 5개, Tablet에서 갤러리 게시판 가로 이미지 갯수 4개, Mobile에서 갤러리 게시판 가로 이미지 갯수 3개로 설정해라 라는 의미입니다.
숏코드 속성에 responsive_class="col-432" 를 추가하시면 아래와 같이 접속 환경에 따라 4개,3개,2개 형태로 나타나게 됩니다. [mb_board name="study_board" list_type="gallery" style="" responsive_class="col-432"]
PC에서는 아래와 같이 이미지가 4개씩 보입니다.
Tablet에서는 3개씩 보입니다.
Mobile에서는 2개씩 보입니다.
갤러리 게시판 반응형 클래스에 대한 설정은 위와 같이 아주 간단합니다. 브라우저 크기에 따라 이미지 갯수가 설정되는 방식이며 현재 설정되어있는 클래스 이외에 다른 반응형을 원하시면 직접 바꾸셔도 됩니다.
"public_html/wp-content/plugins/mangboard/assets/css/style.css" 해당 위치의 파일에서 수정 가능합니다.
갤러리 세로 사이즈 변경 방법입니다.
"public_html/wp-content/plugins/mangboard/skins/"스킨이름"/includes/skin-model.php" 해당위치의 파일을 에디터를 이용해서 열어줍니다.
$desktop_model['list_gallery']의 이미지 height를 수정해주시면됩니다. 플랫폼 환경에 따라 이미지 높이를 다르게 설정하려면 "tablet_height":"100px","mobile_height":"110px" 추가로 소스를 적어주시면됩니다.
보다 세부적인 속성은 아래 주소의 망보드 사용팁을 참고해 보시기 바랍니다
| 
Hometory
