장바구니

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

최근 본 상품

등록된 상품이 없습니다
워드프레스 전문가들이 선택한 필수 플러그인
    유용한팁
    Home / 유용한팁
    글보기
    갤러리 가로 이미지 개수 및 세로 높이 수정하는 방법
    조회수4205
    2016-07-18 20:21


    1. 숏코드 속성을 이용한 갤러리 가로 이미지 개수 수정하는 방법

    [mb_board name="board2" list_type="gallery" style="" responsive_class="col-321"]

    반응형 클래스 "col-321" 속성에서 뒤에 숫자 "321"은 디바이스 형태에 따라 표시하는 가로 이미지 개수를 의미하며 
    col-321로 설정하면 가로 이미지 개수가 PC 3개, Tablet 2개, Mobile 1개 형태로 표시됩니다.
     
    반응형 클래스 col-321을 col-432 로 변경하시면 가로 이미지 개수가 PC 4개, Tablet 3개, Mobile 2개 형태로 변경됩니다.



    2. 숏코드 속성을 이용한 갤러리 이미지 높이 수정 방법

    숏코드 속성을 이용하여 반응형 클래스에 따라 이미지 높이를 다르게 설정할 수 있습니다.
    (이미지 비율에 따라 높이가 자동으로 설정되는 블럭 갤러리 스킨에는 적용되지 않습니다)

    반응형 이미지 높이 속성
    이미지 높이 속성은 각각의 디바이스로 접속시에만 설정된 높이로 적용됩니다.
     – height : PC 이미지 높이
     – tablet_height : 태블릿 이미지 높이
     – mobile_height : 모바일 이미지 높이

    [mb_board name="board2" list_type="gallery" responsive_class="col-421" height="200px" tablet_height="210px" mobile_height="220px"]
    => PC 4개(이미지 높이 200px) - Tablet 2개(이미지 높이 210px) - Mobile 1개(이미지 높이 220px) 

     

    3. 스킨 파일에서 직접 갤러리 가로 이미지 개수 수정하는 방법

    갤러리 목록 파일: mangboard/skins/스킨이름/gallery.php
    갤러리 가로 이미지 개수를 수정하기 위해서는 갤러리 목록 파일 상단에서 아래 코드를 찾아 수정하면 됩니다.
    $responsive_class = "col-543";



    갤러리 게시판 반응형 클래스에 대한 설정은 아래와 같이 브라우져 크기에 따라 이미지 개수가 설정됩니다.

    - col-555: 5개-5개-5개
    col-543: 5개-4개-3개
    col-542: 5개-4개-2개
    col-444: 4개-4개-4개
    col-442: 4개-4개-2개
    col-432: 4개-3개-2개
    col-431: 4개-3개-1개
    col-422: 4개-2개-2개
    col-421: 4개-2개-1개
    - col-333: 3개-3개-3개
    - col-322: 3개-2개-2개
    - col-321: 3개-2개-1개
    - col-222: 2개-2개-2개
    - col-221: 2개-2개-1개
    - col-111: 1개-1개-1개
       
     
    위에서 제공하는 반응형 클래스 이외의 다른 반응형을 원하시면 아래의 col-543 클래스에 대한 CSS를 참고하셔서
    다른 반응형 클래스를 만들어 사용하시면 됩니다.
    .col-543{float:left;position:relative;min-height: 1px;}
    .mb-desktop-large .gallery-list .col-543,
    .mb-desktop .gallery-list .col-543{width: 20%;}
    .mb-tablet .gallery-list .col-543{width: 25%;}
    .mb-mobile .gallery-list .col-543{width: 33.3333%;}
     
     

    4. 스킨 모델 파일에서 갤러리 이미지 세로 크기 수정하는 방법

    별도의 모델 파일을 설정하지 않으셨다면 
    게시판 스킨 기본 모델 : mangboard/skins/스킨이름/includes/skin-model.php  파일에서 갤러리 목록 모델에 해당하는 
    아래 코드를 찾아 빨간색으로 표시된 설정을 수정하시면 됩니다.
    $desktop_model['list_gallery']      = '
    {"field":"fn_image_path","name":"이미지","width":"100%",
    "height":"90px","type":"img_ratio","class":"img","td_class":"img-border","link":"view","td_class":"gallery-item-img","search":"false"},
    {"field":"fn_title","name":"제목","width":"","type":"title_checkbox","maxlength":"10","maxtext":"..","td_class":"gallery-title"},
    {"field":"fn_content","name":"내용","type":"search"},
    {"field":"fn_reg_date","name":"날짜","width":"115px","type":"gallery_date","td_class":"gallery-date"},
    {"field":"fn_user_name","name":"작성자","width":"115px","td_class":"gallery-name"}
    '
    ;

     * 디바이스 환경에 따라 이미지 높이를 다르게 설정하려면 아래와 같이 3개의 속성을 설정하시면 됩니다.
       "height":"90px","tablet_height":"100px","mobile_height":"110px"

     * 블럭  갤러리 스킨을 사용하실 경우 이미지 비율에 따라 이미지 세로 높이가 자동으로 설정됩니다.
     


    카테고리커스터마이징