Share Widget Framework Thread Thumbnails giống Tinh Tế

[Smobi]

Chức năng: Thay ảnh đại diện bằng ảnh trong bài viết (mặc định là avatar của poster)

Demo:

​​

Cách làm:

- Yêu cầu phải sử dụng Widget Framework
- Upload đè (overwrite) file Threads.php vào /library/WidgetFramework/WidgetRenderer/
- Mở template wf_widget_threads thay toàn bộ code bằng:

<style>
.xp-thread-top .clear{
clear:both;
}
.xp-thread-bottom .xp-left{
float:left;
}
.xp-thread-bottom .xp-right a{
font-size: 15px;
}
.sidebar .avatarList .avatar img {
width:60px;
height:60px;
}
</style>
 
 
<xen:if hascontent="true">
    <div class="avatarList">
        <ul>
            <xen:contentcheck>
           <xen:foreach loop="$new" value="$thread">
               <li>
               <div class="xp-thread-bottom">
<div class="xp-left">
<xen:if is="{$thread.attachment}">
<a href="{xen:link threads, $thread}" class="avatar" class="Tooltip">
<img src="{$thread.attachment}" alt="{$thread.title}" title="{$thread.title}" />
</a>
<xen:else />
<xen:avatar user="$thread" size="m" img="true" />
</xen:if>
</div>
                            <div class="xp-right">
   <xen:include template="wf_widget_threads_thread_title">
<xen:set var="$_showPrefix">{$widget.options.display.show_prefix}</xen:set>
</xen:include>
<div class="userTitle">{xen:phrase wf_x_posted, 'user={$thread.username}'} <xen:datetime time="{$thread.post_date}" /></div>
                            </div>
                        </div>
               </li>
           </xen:foreach>
           <xen:foreach loop="$recent" value="$thread">
               <li>
               <div class="xp-thread-bottom">
<div class="xp-left">
<xen:if is="{$thread.attachment}">
<a href="{xen:link threads, $thread}" class="avatar" class="Tooltip">
<img src="{$thread.attachment}" alt="{$thread.title}" title="{$thread.title}" />
</a>
<xen:else />
<xen:avatar user="$thread" size="m" img="true" />
</xen:if>
</div>
                            <div class="xp-right">
                           <xen:include template="wf_widget_threads_thread_title">
<xen:set var="$_showPrefix">{$widget.options.display.show_prefix}</xen:set>
<xen:set var="$_threadLink">{xen:if '{$visitor.user_id} > 0', {xen:link threads/unread, $thread}, {xen:link posts, {xen:array 'post_id={$thread.last_post_id}'}}}</xen:set>
</xen:include>
<div class="userTitle">{xen:phrase wf_x_replied, 'user={$thread.username}'} <xen:datetime time="{$thread.last_post_date}" /></div>
                            </div>
                        </div>
               </li>
           </xen:foreach>
           <xen:foreach loop="$popular" value="$thread">
               <li>
               <div class="xp-thread-bottom">
<div class="xp-left">
<xen:if is="{$thread.attachment}">
<a href="{xen:link threads, $thread}" class="avatar" class="Tooltip">
<img src="{$thread.attachment}" alt="{$thread.title}" title="{$thread.title}" />
</a>
<xen:else />
<xen:avatar user="$thread" size="m" img="true" />
</xen:if>
</div>
                            <div class="xp-right">
                           <xen:include template="wf_widget_threads_thread_title">
                                <xen:set var="$_showPrefix">{$widget.options.display.show_prefix}</xen:set>
</xen:include>
<div class="userTitle">{xen:phrase wf_x_posted, 'user={$thread.username}'} <xen:datetime time="{$thread.post_date}" /></div>
                            </div>
                        </div>
               </li>
           </xen:foreach>
                <xen:foreach loop="$mostReplied" value="$thread">
               <li>
               <div class="xp-thread-bottom">
<div class="xp-left">
<xen:if is="{$thread.attachment}">
<a href="{xen:link threads, $thread}" class="avatar class="Tooltip">
<img src="{$thread.attachment}" alt="{$thread.title}" title="{$thread.title}" />
</a>
<xen:else />
<xen:avatar user="$thread" size="m" img="true" />
</xen:if>
</div>
                            <div class="xp-right">
                           <xen:include template="wf_widget_threads_thread_title">
                                <xen:set var="$_showPrefix">{$widget.options.display.show_prefix}</xen:set>
</xen:include>
<div class="userTitle">{xen:phrase wf_x_posted, 'user={$thread.username}'}, {xen:phrase replies}: {xen:number $thread.reply_count}</div>
                            </div>
                        </div>
                   </li>
           </xen:foreach>
                <xen:foreach loop="$mostLiked" value="$thread">
                    <li>
               <div class="xp-thread-bottom">
<div class="xp-left">
<xen:if is="{$thread.attachment}">
<a href="{xen:link threads, $thread}" class="avatar" class="Tooltip">
<img src="{$thread.attachment}" alt="{$thread.title}" title="{$thread.title}" />
</a>
<xen:else />
<xen:avatar user="$thread" size="m" img="true" />
</xen:if>
</div>
                            <div class="xp-right">
                           <xen:include template="wf_widget_threads_thread_title">
                                <xen:set var="$_showPrefix">{$widget.options.display.show_prefix}</xen:set>
</xen:include>
<div class="userTitle">
                                {xen:phrase wf_x_posted, 'user=<a href="{xen:link 'members', {$thread}}">{$thread.username}</a>'},
                                {xen:phrase likes}: <a href="{xen:link 'posts/likes', {xen:array 'post_id={$thread.first_post_id}'}}" class="OverlayTrigger">{xen:number $thread.first_post_likes}</a>
                            </div>
                            </div>
                        </div>
                     </li>
           </xen:foreach>
           <xen:foreach loop="$polls" value="$thread">
               <li>
               <div class="xp-thread-bottom">
<div class="xp-left">
<xen:if is="{$thread.attachment}">
<a href="{xen:link threads, $thread}" class="avatar" class="Tooltip">
<img src="{$thread.attachment}" alt="{$thread.title}" title="{$thread.title}" />
</a>
<xen:else />
<xen:avatar user="$thread" size="m" img="true" />
</xen:if>
</div>
                            <div class="xp-right">
                           <xen:include template="wf_widget_threads_thread_title">
<xen:set var="$_showPrefix">{$widget.options.display.show_prefix}</xen:set>
</xen:include>
<div class="userTitle">{xen:phrase wf_x_posted, 'user={$thread.username}'} <xen:datetime time="{$thread.post_date}" /></div>
                            </div>
                        </div>
                      </li>
           </xen:foreach>
            </xen:contentcheck>
        </ul>
    </div>
</xen:if>

- Done

P/S: Các bạn có thể chỉnh kích thước ảnh đại diện ở width:80px; height:80px;

Download Widget Framework Threads.zip