장바구니

등록된 상품이 없습니다
합계: 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
     

    이제 갤러리 게시판으로 변경되었습니다.
    이제 반응형에 따라 갤러리 게시판의 이미지 갯수가 한줄에 몇개씩 나열될지 수정하는 코드로 가보겠습니다.

    "public_html/wp-content/plugins/mangboard/skins/"스킨이름"/gallery.php"
    해당위치의 파일을 에디터를 이용해서 열어줍니다.

    코드 상단의 "$responsive_class  = 'col-543';"을 바꿔주시면됩니다.

    543이란...
    PC에서 갤러리 게시판 가로 이미지 갯수 5개,
    Tablet에서 갤러리 게시판 가로 이미지 갯수 4개,
    Mobile에서 갤러리 게시판 가로 이미지 갯수 3개로 설정해라 라는 뜻입니다.

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

    $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