홈페이지 제작팁

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()} &rsaquo; <!--@end--><!--@if($widget_info->show_category=='Y' && $item->get('category_srl') )-->{$item->getCategory()} &rsaquo; <!--@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">&larr; {$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} &rarr;</a></li>

</li>

</ul>

<!--@end-->

수정 후입니다.

녹색 영역이 추가한 부분이고 적색 영역이 지운 부분입니다.

1) li width에 +1을 추가한 건 이미지 사이즈보다 조금 더 크게 계산하고자 넣어보았습니다. 

문법 상으로 이게 되나 몰라 해봤는데 나타내고자 하는대로 되길래 그냥 넣어서 사용 중입니다; (+5나 +1이나 별 차이 없는 거 같더군요;;)

이미지를 가운데로 잡기 위해 수정하였습니다.

다음 버전을 만드실 때는 저런 부분을 고려해서 업데이트해주셨으면 해서 글 남겨봅니다.

문법에 맞지 않는 부분은 윈컴이 님께서 더 잘 고쳐주시기 바랍니다. ㅎㅎ