위젯 컨텐트 스킨 수정 질문드립니다

구름

2016.04.28 11:55

205

우선 구상하고 있는 디자인은 아래 Hypebeast 웹사이트 처럼 메인이미지가 중간에 위치하고 다음 게시물들이 작은 사이즈로 아랫단에 나오는 식인데요

제 웹사이트의 경우 위젯 컨텐트 스킨을 갤러리형으로 사용하여 현재 다음처럼 가로로 게시물이 3개 나오는 것 까지는 했습니다

여기서 다음 스텝으로 해당 게시판에서 공지사항으로 선택한 게시물을 메인이미지로 배치하고 싶은데.. 어떻게 해야하는건지 모르겠습니다ㅠㅠ

아래가 현재 사용중인 위젯 컨텐트 스킨 갤러리형인데요.. 어디를 어떻게 수정을 해야할까요?

일단 사이즈나 이런 것은 관리자화면에서 조정하지 않고 그냥 여기에 하드코드하는 방식으로 구현해보려 합니다

도움 주실 수 있으면 매우 감사하겠습니다^^

<ul class="widgetGalleryA"> <!--style="width:{$widget_info->cols_list_count*($widget_info->thumbnail_width+28)}px;"-->

{@$_idx=0}

    <!--@foreach($widget_info->content_items as $key => $item)-->

    <li<!--@if($_idx>0 && $_idx % $widget_info->cols_list_count==0)--> class="clearLeft"<!--@end--> style="<!--@if($_idx >= $widget_info->list_count)-->display:none;<!--@end-->width:{$widget_info->thumbnail_width}px;">

        <!--@foreach($widget_info->option_view_arr as $k => $v)-->

            <!--@if($v=='thumbnail')-->

                <a href="{$item->getLink()}" class="thumb" style="width:{$widget_info->thumbnail_width}px;height:{$widget_info->thumbnail_height}px" target="_blank"|cond="$widget_info->new_window">

                    <!--@if($item->getThumbnail())-->

                        <img src="{$item->getThumbnail()}" style="width:{$widget_info->thumbnail_width}px;height:{$widget_info->thumbnail_height}px"/>

                    <!--@else-->

                        <span class="imgNone">{$lang->none_image}</span>

                    <!--@end-->

                <!--@if($widget_info->show_browser_title=='Y' && $item->getBrowserTitle())-->

                    <strong class="board">{$item->getBrowserTitle()}</strong>

                <!--@end-->

                <!--@if($widget_info->show_category=='Y' && $item->getCategory())-->

                    <strong class="category">{$item->getCategory()}</strong>

                <!--@end-->

                </a>

            <!--@else if($v=='title')-->

                <a href="{$item->getLink()}" class="title" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>

                <!--@if($widget_info->show_comment_count=='Y' && $item->getCommentCount())-->

                    <em class="replyNum" title="Replies"><a href="{$item->getLink()}#comment">{$item->getCommentCount()}</a></em>

                <!--@end-->

                <!--@if($widget_info->show_trackback_count=='Y' && $item->getTrackbackCount())-->

                    <em class="trackbackNum" title="Trackbacks"><a href="{$item->getLink()}#trackback">{$item->getTrackbackCount()}</a></em>

                <!--@end-->

                <!--@if($widget_info->show_icon=='Y')-->

                    <span class="icon">{$item->printExtraImages()}</span>

                <!--@end-->

        <!--@else if($v=='nickname')-->

            <a href="#" onclick="return false;" class="author member_{$item->getMemberSrl()}">{$item->getNickName($widget_info->nickname_cut_size)}</a>

        <!--@else if($v=='regdate')-->

            <span class="date">{$item->getRegdate("Y-m-d")}</span> <span class="hour">{$item->getRegdate("H:i")}</span>

        <!--@end-->

    <!--@end-->

    </li>

    {@$_idx++}

    <!--@end-->

</ul>

<!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->

<ul class="widgetNavigator">

    <li><button type="button" class="prev" title="{$lang->cmd_prev}" onclick="content_widget_prev(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetGalleryA'),{$widget_info->list_count})"><span>{$lang->cmd_prev}</span></button></li>

    <li><button type="button" class="next" title="{$lang->cmd_next}" onclick="content_widget_next(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetGalleryA'),{$widget_info->list_count})"><span>{$lang->cmd_next}</span></button></li>

</ul>

<!--@end-->

윤삼

2016.04.28 15:11 #270431

해당 위젯이 공지 게시물을 우선 순위로 출력하도록 되어 있진 않은 것 같은데요. 그런 맥락에서 공지게시물만 따로 먼저 반복문 처리를 해줘야 할 것 같아요.
근데 $widget_info로 공지게시물을 불러오는 게 가능한가요?

추천 0
구름

2016.04.28 23:15 #270623

감사합니다.. 제가 프알못이라 예시를 부탁드려도 될련지요..

추천 0
윤삼

2016.04.29 03:34 #270810

주저리주저리 글을 쓰면서 이것저것 해보다가 그냥 코드를 새로 추가해봤습니다;;;

content 위젯 하나로 원하시는 디자인을 구현하면 좋겠지만, 그럴 경우 여러 문제가 있겠더군요.

- 첫째, 페이지가 넘김이 되면 디자인이 깨질 수 있으므로 코드 수정이 생각보다 까다로울 수 있습니다. 이 부분은 미해결 상태입니다;;;

- 둘째, 페이지 넘김 없이 처리한다 하더라도 첫 번째 요소의 섬네일이 커지면 자연히 흐릿하게 나올 수밖에 없습니다. 이 경우 섬네일의 원본 파일을 불러오는 방법이 있긴 한데, (트래픽 문제가 있긴 하지만) 위젯에서 원본 파일을 불러오는 함수가 없기 때문에 별도로 변수를 정의를 해줘야 합니다.

그래서 아래 소스에서처럼 {@ $oDocumentModel = &getModel('document'); $document = $oDocumentModel->getDocument($item->get('document_srl')); } 로 원본 파일을 불러오도록 문서 모델을 객체화하고, $document->getUploadedFiles()=>$file로 문서에 업로드된 파일들을 배열로 불러옵니다.

그리고 이 부분이 중요한데요. $file->cover_image=='Y'에서 볼 수 있는 것처럼 섬네일이 커버이미지로 등록되어 있어야 합니다. 문서 에디터를 ckeditor로 쓰신다면 첨부 이미지에서 커버이미지로 등록하는 방법을 아실 겁니다.

- 셋째, 이 모든 경우를 고려해서 소스 구현이 가능하더라도 위젯에서 첫 번째 이미지는 출력 대상의 첫 번째 요소일 뿐이지, 구름님이 원하시는 '공지사항으로 선택된 게시물'은 아닙니다.

뒤져보니 "다행스럽게도" $item->get('is_notice')로 공지 게시물을 판별할 수 있더군요(이 변수의 값이 Y면 공지입니다). 제가 앞선 댓글에서 드렸던 말씀은 이걸 기준으로 반복문을 따로 한번 더 작성해줘야 한다는 겁니다. 지금 설정하신대로 페이지 넘김 없이 위젯을 설정할 경우 원하시는 형태의 구현 자체는 어렵지 않습니다. 이렇게 해보세요.

<ul class="widgetGalleryA" style="width:{$widget_info->cols_list_count*($widget_info->thumbnail_width+28)}px;">


 <li loop="$widget_info->content_items=>$key,$item" cond="$item->get('is_notice')=='Y'" class="clearLeft" style="width:{$widget_info->cols_list_count*($widget_info->thumbnail_width+28)}px;">
 
 
 <a href="{$item->getLink()}" class="thumb" style="width:{$widget_info->cols_list_count*($widget_info->thumbnail_width+28)-28}px;height:auto" target="_blank"|cond="$widget_info->new_window">
 
 {@
 $oDocumentModel = &getModel('document');
 $document = $oDocumentModel->getDocument($item->get('document_srl'));
 }
 <block loop="$document->getUploadedFiles()=>$file" cond="$file->cover_image=='Y'">
 <img src="{$file->uploaded_filename}" style="width:{$widget_info->cols_list_count*($widget_info->thumbnail_width+28)-28}px;height:auto"/>
 </block>
 
 {$lang->none_image}
 
 
 {$item->getBrowserTitle()}
 
 
 {$item->getCategory()}
 
 </a>

 
 <a href="{$item->getLink()}" class="title" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>
 
 <a href="{$item->getLink()}#comment">{$item->getCommentCount()}</a>
 

 
 <a href="{$item->getLink()}#trackback">{$item->getTrackbackCount()}</a>
 

 
 {$item->printExtraImages()}
 

 
 <a href="#" onclick="return false;" class="author member_{$item->getMemberSrl()}">{$item->getNickName($widget_info->nickname_cut_size)}</a>
 
 {$item->getRegdate("Y-m-d")} {$item->getRegdate("H:i")}
 
 
 </li>


{@$_idx=0}
 
 <li class="clearLeft" style="display:none;width:{$widget_info->thumbnail_width}px;">
 
 
 <a href="{$item->getLink()}" class="thumb" style="width:{$widget_info->thumbnail_width}px;height:{$widget_info->thumbnail_height}px" target="_blank"|cond="$widget_info->new_window">
 
 <img src="{$item->getThumbnail()}" style="width:{$widget_info->thumbnail_width}px;height:{$widget_info->thumbnail_height}px"/>
 
 {$lang->none_image}
 
 
 {$item->getBrowserTitle()}
 
 
 {$item->getCategory()}
 
 </a>

 
 <a href="{$item->getLink()}" class="title" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>
 
 <a href="{$item->getLink()}#comment">{$item->getCommentCount()}</a>
 

 
 <a href="{$item->getLink()}#trackback">{$item->getTrackbackCount()}</a>
 

 
 {$item->printExtraImages()}
 

 
 <a href="#" onclick="return false;" class="author member_{$item->getMemberSrl()}">{$item->getNickName($widget_info->nickname_cut_size)}</a>
 
 {$item->getRegdate("Y-m-d")} {$item->getRegdate("H:i")}
 
 
 </li>
 {@$_idx++}
 
</ul>


<ul class="widgetNavigator">
 <li><button type="button" class="prev" title="{$lang->cmd_prev}" onclick="content_widget_prev(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetGalleryA'),{$widget_info->list_count})">{$lang->cmd_prev}</button></li>
 <li><button type="button" class="next" title="{$lang->cmd_next}" onclick="content_widget_next(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetGalleryA'),{$widget_info->list_count})">{$lang->cmd_next}</button></li>
</ul>


다만, 첫 번째 문제로 말씀 드렸던 페이지 넘김시에 요소 배열이 깨지는 문제는 해결하지 못했습니다. 이 부분 구현이 필요하시다면 별도로 연구해보시는 게 어떨까 싶네요 :)

추천 1
구름

2016.04.29 04:12 #270845

헉.. 감사합니다ㅠㅠ 집에가서 시도해봐야겠네요 (- -) (_ _)

추천 0
윤삼

2016.04.29 04:26 #270859

페이지 넘김 시에 요소 배열을 유지하는 방법이 없진 않아서 추가 댓글 남깁니다 ㅎㅎ

댁에서 한번 해보세요~


<ul class="widgetGalleryA" style="width:{$widget_info->cols_list_count*($widget_info->thumbnail_width+28)}px;">
 <li loop="$widget_info->content_items=>$key,$item" cond="$item->get('is_notice')=='Y'" class="clearLeft" style="width:{$widget_info->cols_list_count*($widget_info->thumbnail_width+28)}px;">
 
 
 <a href="{$item->getLink()}" class="thumb" style="width:{$widget_info->cols_list_count*($widget_info->thumbnail_width+28)-28}px;height:auto" target="_blank"|cond="$widget_info->new_window">
 
 {@
 $oDocumentModel = &getModel('document');
 $document = $oDocumentModel->getDocument($item->get('document_srl'));
 }
 <block loop="$document->getUploadedFiles()=>$file" cond="$file->cover_image=='Y'">
 <img src="{$file->uploaded_filename}" style="width:{$widget_info->cols_list_count*($widget_info->thumbnail_width+28)-28}px;height:auto"/>
 </block>
 
 {$lang->none_image}
 
 
 {$item->getBrowserTitle()}
 
 
 {$item->getCategory()}
 
 </a>

 
 <a href="{$item->getLink()}" class="title" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>
 
 <a href="{$item->getLink()}#comment">{$item->getCommentCount()}</a>
 

 
 <a href="{$item->getLink()}#trackback">{$item->getTrackbackCount()}</a>
 

 
 {$item->printExtraImages()}
 

 
 <a href="#" onclick="return false;" class="author member_{$item->getMemberSrl()}">{$item->getNickName($widget_info->nickname_cut_size)}</a>
 
 {$item->getRegdate("Y-m-d")} {$item->getRegdate("H:i")}
 
 
 </li>
</ul>


<ul class="widgetGalleryA" style="width:{$widget_info->cols_list_count*($widget_info->thumbnail_width+28)}px;">
{@$_idx=0}
 
 <li class="clearLeft" style="display:none;width:{$widget_info->thumbnail_width}px;">
 
 
 <a href="{$item->getLink()}" class="thumb" style="width:{$widget_info->thumbnail_width}px;height:{$widget_info->thumbnail_height}px" target="_blank"|cond="$widget_info->new_window">
 
 <img src="{$item->getThumbnail()}" style="width:{$widget_info->thumbnail_width}px;height:{$widget_info->thumbnail_height}px"/>
 
 {$lang->none_image}
 
 
 {$item->getBrowserTitle()}
 
 
 {$item->getCategory()}
 
 </a>

 
 <a href="{$item->getLink()}" class="title" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>
 
 <a href="{$item->getLink()}#comment">{$item->getCommentCount()}</a>
 

 
 <a href="{$item->getLink()}#trackback">{$item->getTrackbackCount()}</a>
 

 
 {$item->printExtraImages()}
 

 
 <a href="#" onclick="return false;" class="author member_{$item->getMemberSrl()}">{$item->getNickName($widget_info->nickname_cut_size)}</a>
 
 {$item->getRegdate("Y-m-d")} {$item->getRegdate("H:i")}
 
 
 </li>
 {@$_idx++}
 
</ul>



<ul class="widgetNavigator">
 <li><button type="button" class="prev" title="{$lang->cmd_prev}" onclick="content_widget_prev(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetGalleryA'),{$widget_info->list_count})">{$lang->cmd_prev}</button></li>
 <li><button type="button" class="next" title="{$lang->cmd_next}" onclick="content_widget_next(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetGalleryA'),{$widget_info->list_count})">{$lang->cmd_next}</button></li>
</ul>


추천 1
구름

2016.04.29 04:49 #270879

정말 디테일하고 친절한 설명 감사드립니다 ㅠㅠ

추천 0
구름

2016.05.02 04:50 #272934

집에서 해보니 잘 작동합니다...!! 감사합니다^^^^

추천 0