XETOWN

질문/답변

웹에 관련된 질문과 답변을 나눌 수 있습니다.
조회 수 25 댓글 2

안녕하세요. 

 

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
번호 분류 제목 날짜
공지 질문/답변 답변을 확실히 받기위한 질문자 지침서 20 2015.12.31
3176 질문/답변 [도움요청] 게시물 목록 이미지 표시 문의 2 2016.11.07
» 질문/답변 게시판 목록 다중 섬네일 크기변경 질문드립니다. 2 file 2016.11.07
3174 질문/답변 현재 XE코어에 가장 적합한 PHP 버전은 어떻게 되나요? 6 2016.11.07
3173 질문/답변 일반적인 에디터에서는 스크립트 사용못하죠? 6 2016.11.07
3172 질문/답변 문자형 퍼머링크 애드온 관련 문의 합니다. 2016.11.07
3171 질문/답변 클라우드 VS VPS 서버..... 10 2016.11.07
3170 질문/답변 쓸만한 해외 이메일은 어디가 있을까요? 아웃룩 연동지원하는곳 없을까요? 4 2016.11.07
3169 질문/답변 Floating IPs, RDNS 가 무엇인지 궁금합니다. 1 2016.11.07
3168 질문/답변 CloudFlare IP Range는 왜 필요한건지요? 4 2016.11.06
3167 질문/답변 원래 Ckeditor는 복사 붙여넣기할때 그대로 안되나요? 5 2016.11.06
3166 질문/답변 요새 "내용 값은 필수입니다" 같은 문구가 자주 뜨는데 왜그럴까요? 1 2016.11.06
3165 질문/답변 회원 프로필 사이즈 질문 4 2016.11.06
3164 질문/답변 도메인을 변경했는데 SPF/DKIM 설정 안내에는 이전 주소로 나오네요. 2 file 2016.11.06
3163 질문/답변 오토링크 적용 문제 4 2016.11.06
3162 질문/답변 가끔씩 구글에서 없는 페이지의 URL이 노출되네요.. 1 2016.11.06
3161 질문/답변 태블릿도 모바일 취급에 체크를 하는게 좋을까요 아니면...? 4 2016.11.05
3160 질문/답변 object 의 내부 세로값을 구하는방법이 있을까요? 2 2016.11.05
3159 질문/답변 외부이미지 (퍼가기) 방지하기 질문 드려요 ~ 2016.11.05
3158 질문/답변 XE관리자의 일반항목에 포트설정 9 file 2016.11.04
3157 질문/답변 SNS형태의 사이트 제작 질문드립니다. 3 2016.11.04
Board Pagination Prev 1 ... 7 8 9 10 11 12 13 14 15 16 ... 170 Next
/ 170
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...