XETOWN

질문/답변

웹에 관련된 질문과 답변을 나눌 수 있습니다.

안녕하세요. 

 

XETemplate의 에레버스 게시판의 갤러리형을 수정하여 만들고 있습니다.

 

검색을 통해 아래 XE팁을 활용하여 섬네일을 여러개 출력하였습니다(현재는 4개 출력)

 

<block cond="$document->hasUploadedFiles() ">{@ $uploaded_list = $document->getUploadedFiles();$i=0;}
  <block loop="$uploaded_list => $key,$file">
      <img class="3tmb" src="{getUrl()}{$file->download_url}" width="170px" height="170px" alt="" style="display:inline; boder:1px solid #fff;"   cond="$i<4&&preg_match('/(jpg|gif|jpge|png|bmp)$/',$file->source_filename)" />{@ $i++}
   </block>
</block>


 

 

 

wqdqwrqwr.jpg

 

 

 

아직 출력테스트만 하고 디자인 정리를 못하느라 좀 더럽게(?) 나오네요ㅠㅠ

 

여기서 한단계 더 추가하려는 것이, 

 

이미지가 1장일 떄는 가로 100%,

이미지가 2장일 떄는 가로 50%,

이미지가 3장일 때는 가로 33%,

이미지가 4장일 떄는 가로 25%,

 

크기로 출력하려 합니다.

 

 

fb1.jpg

 

fb2.jpg

 

 

 

위에 페이스북이 비슷한 예시일 것 같네요. 일종의 모자이크처럼 보이려하는데,

야매로 배우고 검색으로 해결하다보니 방법을 모르겠습니다. 

 

제가 검색을 잘 못한건지, 어떻게 해야할지 실마리라도 찾고싶습니다.

 

아래는 위에 팁을 적용한 에레버스 게시판 갤러리 html 파일의 섬네일 출력부분입니다.

 

 

<div class="thumb">
  <a href="{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle, 'cpage','')}">
  <!--@if($document->thumbnailExists())-->
     <block cond="$document->hasUploadedFiles() ">{@ $uploaded_list = $document->getUploadedFiles();$i=0;}
     <block loop="$uploaded_list => $key,$file">
     <img class="3tmb" src="{getUrl()}{$file->download_url}" width="170px" height="170px" alt="" style="display:inline; boder:1px solid #fff;"   cond="$i<4&&preg_match('/(jpg|gif|jpge|png|bmp)$/',$file->source_filename)" />{@ $i++}
      </block>
      </block>
<!--@else-->
      <span class="noPhoto" style="width:{$module_info->gallery_thumbnail_width}px; height:{$module_info->gallery_thumbnail_height}px; line-height:{$module_info->gallery_thumbnail_height}px" cond="!$document->thumbnailExists()">No Image</span>
<!--@end-->
  </a>
</div>

 

 

 

 

 

  • ?
    SimpleCode 2016.11.07 19:33:42
    썸네일 이미지 크기를 최대한 크게 설정하시고, 이미지 개수에 따라 <img> 태그를 감싸고 있는 요소에 class를 다르게 주면 쉽게 가능합니다. 추후 유지보수에도 편리하고요.

    예)
    - 이미지 개수가 1인 경우 : .img-one img { width: 300px }
    - 이미지 개수가 2인 경우 : .img-two img { width: 150px }
    - 이미지 개수가 3인 경우 : .img-three img { width: 125px }

    다만, 위에서 보여진 것처럼 썸네일 크기가 제각각인 경우, CSS만으로는 힘들고요.
    jQuery Grid Plugin을 찾아보셔야할 것 같습니다.
  • profile
    Sraty 2016.11.09 22:10:06
    답변 감사합니다. 초보자라 아직 정확히 감이 잡히지 않지만 어느정도 힌트를 얻은 것 같습니다.

List of Articles
번호 제목 글쓴이 날짜
공지 답변을 확실히 받기위한 질문자 지침서 4 람보 2017.05.04
3183 웹호스팅 사용중인데 크론을 사용하고 싶습니다 6 낙타 2016.11.08
3182 도메인 이전 시 비용을 내야 하던데 9 Chronos 2016.11.08
3181 게시판 생성일(등록일)을 변경하려면 어떻게 해야하나요? 2 Chronos 2016.11.08
3180 라이믹스 최신버전에서 비회원이 게시물 조회시 새로고침할 때마다 조회수가 올라가는 증상이 나타났습니다 16 file 기븐 2016.11.08
3179 현재 라이믹스 및 서드파티 자료들 php 7.0/7.1에서 정상 작동하나요? 2 기븐 2016.11.08
3178 라이믹스 최신버전에서 게시물 자동 이동기능이 더 이상 정상적으로 작동하지 않습니다. 8 file 기븐 2016.11.08
3177 XE 접속 통계 모듈 시간설정에 관해서 질문 드려요~ 2 민지 2016.11.08
3176 소셜XE에서 네이버 로그인만 사용하려고 하는데요. 2 file Chronos 2016.11.08
3175 회원 가입 인증메일의 유효기간은 얼마인가요? 3 Chronos 2016.11.08
3174 애드센스 호출할때 불러오는 .js 관련 4 투데이 2016.11.08
3173 라이믹스 몇가지 질문드립니다 3 file 기븐 2016.11.07
3172 [도움요청] 게시물 목록 이미지 표시 문의 2 메비우스의닭 2016.11.07
» 게시판 목록 다중 섬네일 크기변경 질문드립니다. 2 file Sraty 2016.11.07
3170 현재 XE코어에 가장 적합한 PHP 버전은 어떻게 되나요? 6 nado0124 2016.11.07
3169 일반적인 에디터에서는 스크립트 사용못하죠? 6 라그릿 2016.11.07
3168 문자형 퍼머링크 애드온 관련 문의 합니다. Chronos 2016.11.07
3167 클라우드 VS VPS 서버..... 10 아파치 2016.11.07
3166 쓸만한 해외 이메일은 어디가 있을까요? 아웃룩 연동지원하는곳 없을까요? 4 투데이 2016.11.07
3165 Floating IPs, RDNS 가 무엇인지 궁금합니다. 1 렙흥아 2016.11.07
3164 CloudFlare IP Range는 왜 필요한건지요? 4 한라봉 2016.11.06
Board Pagination Prev 1 ... 92 93 94 95 96 97 98 99 100 101 ... 256 Next
/ 256
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...