장바구니

등록된 상품이 없습니다
합계: 0

최근 본 상품

등록된 상품이 없습니다
    망보드 강의
    글보기
    제목반응형에 따른 이미지 갤러리 가로 갯수, 세로 사이즈 변경 방법2017-01-02 10:58:40
    작성자user icon
    갤러리에서 가로이미지 갯수와 세로 사이즈를 변경해보도록 하겠습니다.

    먼저 갤러리 가로 이미지 갯수 변경 방법입니다.

    먼저 자료실게시판  갤러리게시판으로 변경을 해주어야 합니다.
    관리자 화면에서 "Mangboard > 게시판관리"를 클릭해주세요.
    해당 게시판의 갤러리 Shortcode를 복사합니다.

    mb-file.php?path=2017%2F01%2F02%2FF329_4.JPG
     

    관리자 화면에서 "페이지 > 모든페이지"를 클릭해주세요.
    해당 페이지를 클릭한 뒤, Shortcode를 붙여넣기 합니다.

    mb-file.php?path=2017%2F01%2F02%2FF330_5.JPG
     

    이제 갤러리 게시판으로 설정되었습니다.

    이제 반응형에 따라 갤러리 게시판의 이미지 개수를 설정하는 방법을 살펴보겠습니다.

    갤러리 가로 이미지 개수를 수정하는 숏코드 속성은 갤러리 숏코드에 
    아래와 같이 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개씩 보입니다.

    mb-file.php?path=2017%2F01%2F02%2FF332_2.JPG
     

    Tablet에서는 3개씩 보입니다.

    mb-file.php?path=2017%2F01%2F02%2FF333_3.JPG
     

    Mobile에서는 2개씩 보입니다.

    mb-file.php?path=2017%2F01%2F02%2FF334_1.JPG
     

    갤러리 게시판 반응형 클래스에 대한 설정은 위와 같이 아주 간단합니다.
    브라우저 크기에 따라 이미지 갯수가 설정되는 방식이며
    현재 설정되어있는 클래스 이외에 다른 반응형을 원하시면 직접 바꾸셔도 됩니다.

    "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" 
    추가로 소스를 적어주시면됩니다.


    mb-file.php?path=2017%2F01%2F02%2FF335_7.JPG



    보다 세부적인 속성은 아래 주소의 망보드 사용팁을 참고해 보시기 바랍니다



    최근 본 상품

    등록된 상품이 없습니다

    장바구니

    등록된 상품이 없습니다
    합계: 0