장바구니

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

최근 본 상품

등록된 상품이 없습니다
워드프레스 전문가들이 선택한 필수 플러그인
    유용한팁
    Home / 유용한팁
    글보기
    갤러리,웹진 이미지 불러오는 방식 설정하기
    조회수2535
    2016-09-20 20:10

    1. 이미지를 불러오는 기본 타입: img

     - 이미지 사이즈 비율에 상관없이 고정 크기로 설정해서 불러옴

     - 모델링 코드
      {"field":"fn_image_path","name":"이미지","width":"100%","height":"90px","type":"img" ...

     - 생성되는 HTML 코드
      <img style="width:100%;height:90px;" src="image.jpg">




    2. 이미지를 세로 크기에 맞춰서 가로 크기 비율을 설정: img_ratio

     - 이미지를 비율에 맞게 불러오는 방식으로 이미지 비율에 따라 크기가 달라짐

     - 모델링 코드
      {"field":"fn_image_path","name":"이미지","width":"100%","height":"90px","type":"img_ratio" ...

     - 생성되는 HTML 코드
      <img style="max-width:100%;height:90px;" src="image.jpg">



    3. 배경 속성을 이용하여 이미지 크기 및 비율 설정 : img_bg

     - "background-image" 속성을 이용하여 이미지를 배경 형태로 불러오는 방식

     - 모델링 코드
      {"field":"fn_image_path","name":"이미지","width":"100%","height":"90px","type":"img_bg" ...
       => "background-size":"cover","background-position":"center center" 속성 사용 가능 
          ("background-size":"cover" 속성은 IE8 이하 버젼에서 지원하지 않습니다)

     - 생성되는 HTML 코드
      <div style="width:100%;height:90px;background-image:url(image.jpg);background-position:center center;background-size:cover;"></div>



    4. 이미지 사이즈 속성 설정하기

     - 용량이 큰 이미지를 사용하는 갤러리의 로딩속도를 개선하기 위한 목적으로 망보드에서는 관리자>옵션설정에서
      Small 이미지와 Middle 이미지 사이즈를 설정하여 원본이미지의 복사본을 생성해서 사용할 수 있는 기능을 지원합니다.

     - 모델링 코드
      {"field":"fn_image_path","name":"이미지","width":"100%","height":"90px","type":"img_bg","size":"small" ...
       => small 사이즈로 생성된 이미지를 불러옵니다 (이미지가 없을 경우 원본 이미지를 불러옵니다)

      {"field":"fn_image_path","name":"이미지","width":"100%","height":"90px","type":"img_bg","size":"middle" ...
       => middle 사이즈로 생성된 이미지를 불러옵니다 (이미지가 없을 경우 원본 이미지를 불러옵니다)


     
    카테고리커스터마이징