이미지 갤러리 최신글 Wide로 적용하기
fm25
112.♡.179.192
2015-04-26 16:24
14,514
15
2
배포파일 : image_gallery_w.7z (1.3K)
후원포인트 : 500포인트|다운로드횟수 : 7|최종수정일 : 2015-05-20 18:34:59
본문
eyoom/theme/basic/skin_bs/latest/image_gallery
를 복사해서 아주 약간 수정했습니다.
사소한 내용이어서 수정한 사항만 알려드려도 될 터이지만
'image_gallery'와 병행하려면 별도의 스킨이 있어야 하기에 따로 올립니다.
스킨은 'eyoom/theme/basic/skin_bs/latest'에 넣습니다.
eyoom/theme/basic/layout/head_bs.html
<!--=== End Header ===-->
<!--{? defined('_INDEX_') || defined('_EYOOM_MYPAGE_')}-->
사이에...
<!--=== End Header ===-->
<!--{? !C.G5_IS_MOBILE}-->
<div>
<!--------------- EBL Image Gallery Wide 최신글 영역 시작 --------------->
<!--{latest->latest_eyoom('image_gallery_w','title=게시판 제목||bo_table=게시판 아이디||count=12||cut_subject=50||img_view=y||bo_direct=n||img_width=500||cols=12')}-->
<!--------------- EBL Image Gallery Wide 최신글 영역 끝 --------------->
</div>
<!--{/}-->
<div class="clearfix"></div>
<!--{? defined('_INDEX_') || defined('_EYOOM_MYPAGE_')}-->
이렇게 입력해줍니다.모바일에서는 보이지 않게 했습니다.
부족한 부분은 보완해서 사용하십시오.
1:1 비율의 이미지를 기준으로 했습니다.
다른 비율의 이미지를 사용할 경우에는...
eyoom/theme/basic/skin_bs/latest/image_gallery_w/style.css
.view .gallery-img2 {
display: block;
overflow: hidden;
min-height: 139px;
max-height: 139px;
}
높이를 적당히 수정하세요.
4:3 = 104px
3:2 = 93px
16:9 = 78px
2
로그인 후 추천 또는 비추천하실 수 있습니다.
댓글목록15
fm25님의 댓글
이 부분을 해결할 수 있는 능력이 없네요.
bootstrap.css에 규정된 'img-responsive'가
세로로 긴 이미지의 경우에는 그리 큰 문제가 되지는 않는데... 가로로 긴 이미지가 문제네요.
반응형이기 때문에 당연한 것인지?
shadow님의 댓글의 댓글
일단 반응형이란 세로를 기준으로 하지 않고 가로를 기준으로 하지 않는지요?
이미지 관련 css 내용 내에
위 소스만 추가하면 가로문제는 발생치 않습니다.
문제는 세로지요.
퍼센트로 하던 실제 크기 조정을 위한 px로 하던 전체 크기로 조정하기 때문에 세로 이미지 크기에 따라 들쭉날쭉하게 됩니다.
제 개인적인 견해는 최신글에 사용할 이미지를 실제 이미지를 불러오는게 아니라 썸네일 크롭하여 불러올 수 있게 수정한다면 문제가 없을 것 같습니다.
이 부분에 대해 향후 기능 추가가 된다면 좋겠습니다.
fm25님의 댓글의 댓글
가로는 아무리 길어도 100%로 보여지기 때문에
상대적으로 짧은 세로가 문제로 나타나는 것이니...
원인은 '가로로 긴 이미지' → 결과는 '세로로 들쭉날쭉'
shadow님의 댓글의 댓글
현재 저는 편법으로 피시상과 모바일상 스킨을 달리 불러오도록해서 사용하고 있습니다.
모바일 이미지 높이 값을 더 작게 잡아주면 적어도 들쭉날쭉하진 않으니 말이죠
비즈팔님의 댓글
수고 하셨습니다.
joosam님의 댓글
joosam님의 댓글
fm25님의 댓글의 댓글
joosam님의 댓글
joosam님의 댓글
<!--=== End Header ===-->
<!--{? defined('_INDEX_')}-->
<div>
<!--------------- EBL Image Slider Wide 최신글 영역 시작 --------------->
<!--{latest->latest_eyoom('image_slider_w','title=게시판 제목||bo_table=board1||count=5||cut_subject=50||img_view=y||bo_direct=n||img_width=1920')}-->
<!--------------- EBL Image Slider Wide 최신글 영역 끝 --------------->
</div>
<!--{:}-->
<div>
<!--------------- EBL Image Gallery Wide 최신글 영역 시작 --------------->
<!--{latest->latest_eyoom('image_gallery_w','title=게시판 제목||bo_table=board1||count=12||cut_subject=50||img_view=y||bo_direct=n||img_width=500')}-->
<!--------------- EBL Image Gallery Wide 최신글 영역 끝 --------------->
</div>
<!--{/}-->
<!--{? defined('_INDEX_') || defined('_EYOOM_MYPAGE_')}-->
이렇게 적용했습니다만 서브페이지에 적용한 image_gallery_w 우측으로 카테고리 제목이 같이 올라가네요..
축하합니다. 행운의 포인트 57포인트를 획득하였습니다.
joosam님의 댓글
fm25님의 댓글의 댓글
<div class="clearfix"></div>
를 추가하여 가려지지 않게 했습니다.
그리고 해당 게시판에 이미지 포함된 글을 12개 이상 생성해보세요.
복사해서 게시글 수를 늘린 것은 제대로 인식이 되지 않는 듯 합니다.
joosam님의 댓글
joosam님의 댓글
오늘도좋은날님의 댓글