The Bootstrap 테마 용 최신글 위젯 스킨(이온디 수정판) ver. 0.2.1
조회 수 1 추천 0 2013.02.28 10:18:32http://www.wincomi.com/market_qna/6065
The Bootstrap 테마 용 최신글 위젯 스킨 0.2.1 버전을 사용 중입니다.(2.2.1인거 같은데 자료실에 버전이 저리 표시되어있길래;;)
갤러리 스킨을 사용하려고 gallery.html 수정한 내용입니다.
수정하기 전에는
이렇게 thumbnails 클래스의 테두리 영역 밖으로 이미지가 벗어났습니다.
또 caption 클래스 때문에 제목 위 아래로 빈 칸이 많았습니다.
그래서 아래와 같이 코드를 수정했습니다.
<ul class="tb_widgetImageA thumbnails">
{@$_idx=0}
<!--@foreach($widget_info->content_items as $key => $item)-->
<li style="width:{$widget_info->thumbnail_width}+1px;<!--@if($_idx >= $widget_info->list_count)-->display:none<!--@end-->" class="span2 thumbnail">
<p class="thumbArea" style="width:{$widget_info->thumbnail_width}100%;text-align:center;">
<a href="{$item->getLink()}" class="thumb detail_pop" style="width:{$widget_info->thumbnail_width}px;height:{$widget_info->thumbnail_height}px" title="<!--@if($widget_info->show_browser_title=='Y' && $item->getBrowserTitle())-->{$item->getBrowserTitle()} › <!--@end--><!--@if($widget_info->show_category=='Y' && $item->get('category_srl') )-->{$item->getCategory()} › <!--@end-->{$item->getTitle($widget_info->subject_cut_size)}" data-content='{$item->getContent()}'>
<!--@if($item->getThumbnail())-->
<img src="{$item->getThumbnail()}" style="width:{$widget_info->thumbnail_width}px;height:{$widget_info->thumbnail_height}px" />
<!--@else-->
<span style="width:{$widget_info->thumbnail_width}px;height:{$widget_info->thumbnail_height}px;line-height:{$widget_info->thumbnail_height}px" class="none_image">{$lang->none_image}</span>
<!--@end-->
</a>
</p>
<div style="text-align:center;" class="caption">
<!--@for($j=0,$c=count($widget_info->option_view_arr);$j<$c;$j++)-->
<!--@if($widget_info->option_view_arr[$j]=='title')-->
<h5 style="white-space:nowrap;overflow:hidden;">{$item->getTitle($widget_info->subject_cut_size)}</h5>
<!--@else if($widget_info->option_view_arr[$j]=='content')-->
<p>
{$item->getContent()}
<!--@if($widget_info->option_view_arr[$j+1]=='regdate')-->
<span class="date">{$item->getRegdate("Y-m-d")}</span> <span class="hour">{$item->getRegdate("H:i")}</span>
<!--@end-->
</p>
<!--@end-->
<!--@end-->
</div>
</li>
{@$_idx++}
<!--@end-->
</ul>
<!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
<ul class="contentWidgetNavigator pager">
<li><a href="#" title="{$lang->cmd_prev}" onclick="content_widget_prev(jQuery(this).parents('ul.contentWidgetNavigator').prev('ul.widgetImageA'),{$widget_info->list_count});return false">← {$lang->cmd_prev}</a></li>
<li><a href="#" class="next" title="{$lang->cmd_next}" onclick="content_widget_next(jQuery(this).parents('ul.contentWidgetNavigator').prev('ul.widgetImageA'),{$widget_info->list_count});return false">{$lang->cmd_next} →</a></li>
</li>
</ul>
<!--@end-->
수정 후입니다.
녹색 영역이 추가한 부분이고 적색 영역이 지운 부분입니다.
1) li width에 +1을 추가한 건 이미지 사이즈보다 조금 더 크게 계산하고자 넣어보았습니다.
문법 상으로 이게 되나 몰라 해봤는데 나타내고자 하는대로 되길래 그냥 넣어서 사용 중입니다; (+5나 +1이나 별 차이 없는 거 같더군요;;)
2) p thumbarea에 width를 이미지 넓이 값이 아닌 상위 태그 기준으로 100%를 잡았고, 정렬을 가운데로 했습니다.
이미지를 가운데로 잡기 위해 수정하였습니다.
3) caption을 지운 것은 제목 위 아래로 빈 칸이 많아서 집어넣었고, 가운데 정렬은 제목을 가운데 정렬로 하고 싶어 그리 넣었습니다.
4) h5 태그에 가운데 정렬을 두었고 한 줄로 나타내고 싶어 overflow:hidden을 추가해넣었습니다.
위젯 스킨 자료실의 본문을 보면 2.2를 예상하고 계신다는 글을 보았습니다.
다음 버전을 만드실 때는 저런 부분을 고려해서 업데이트해주셨으면 해서 글 남겨봅니다.
문법에 맞지 않는 부분은 윈컴이 님께서 더 잘 고쳐주시기 바랍니다. ㅎㅎ
