Hướng dẫn Làm ảnh đại diện bài viết đẹp

KenLilBoiz

CEO DAWEBZ Chuyên Gia Dịch Vụ Trực Tuyến
Tham gia
05/08/2015
Bài viết
340
Được Like
362
Lâu lâu chả có hướng dẫn nào cho a e cả :v hôm nay hướng dẫn các bạn một thủ thuật nhỏ để làm bài viết trông đẹp mắt và chuyên nghiệp hơn .
Ngồi rảnh chả biết làm gì vào tinhte thấy cái phần bài viết nó hay hay ngồi tự chế luôn theo ý mình 1 cái khác :v .. k đẹp thì mong a e cũng bỏ qua còn ai pro hơn thì chế biến thêm cho đẹp r share mọi người
Demo chút nhỉ
Giới Thiệu Cộng Đồng Dev Template   Cộng Đồng Thiết Kế Template Website (5).png

Giới Thiệu Cộng Đồng Dev Template   Cộng Đồng Thiết Kế Template Website (6).png


Mình giải thích qua cái này một chút để có được ảnh như trên bạn phải tải lên file đính kèm dạng image , trong trường hợp có quá nhiều ảnh thì nó sẽ tự động lấy ảnh cuối cùng mà bạn upload làm ảnh đại diện cho bài viết

đầu tiên các bạn tọa cho mình 1 template tên message_user_info_firstpost mục đích của mình là để tách biệt info user đầu tiên ra khỏi các user khác để sau này dễ tiện đường phát triển hoặc thay đổi nội dung file

HTML:
<xen:require css="message_user_info.css" />

<div class="messageUserInfo1" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person" style="display:none;">
<div class="messageUserBlock {xen:if $user.isOnline, online}">
    <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
        <div class="avatarHolder">
            <span class="helper"></span>
            <xen:avatar user="$user" size="m" img="true" />
            <xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-22" data-offsetY="-8"></span></xen:if>
            <!-- slot: message_user_info_avatar -->
        </div>
    </xen:hook>

<xen:if is="!{$isQuickReply}">
    <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
        <h3 class="userText"> <xen:username user="$user" itemprop="name" rich="true" /> <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if> <!-- slot: message_user_info_text --> </h3>
    </xen:hook>
</xen:if>
<xen:if is="!{$isQuickReply}">
    <xen:if hascontent="true">
        <div class="info-one">
            <xen:contentcheck>
            <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
                <xen:if is="@messageShowRegisterDate">
                    <dl class="pairsInline" style="padding-bottom:2px">
                      Tham gia: {xen:date $user.register_date}
                    </dl>
                </xen:if>
    
                <xen:if is="@messageShowMessageCount">
                    <dl class="pairsInline" style="padding-bottom:2px">
                        {xen:phrase message_count}:
                        <a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed">{xen:number $user.message_count}</a>
                    </dl>
                </xen:if>
    
                <xen:if is="@messageShowTotalLikes">
                    <dl class="pairsInline" style="padding-bottom:2px">
                        {xen:phrase likes_received}:
                        {xen:number $user.like_count}
                    </dl>
                </xen:if>
    
                <xen:if is="@messageShowTrophyPoints">
                    <dl class="pairsInline" style="padding-bottom:2px">
                        {xen:phrase trophy_points}:
                        <a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a>
                    </dl>
                </xen:if>

                <xen:if is="@messageShowGender AND {$user.gender}">
                    <dl class="pairsInline" style="padding-bottom:2px">
                        {xen:phrase gender}:
                        <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
                    </dl>
                </xen:if>
    
                <xen:if is="@messageShowOccupation AND {$user.occupation}">
                    <dl class="pairsInline" style="padding-bottom:2px">
                        {xen:phrase occupation}:
                        <dd itemprop="role">{xen:string censor, $user.occupation}</dd>
                    </dl>
                </xen:if>
    
                <xen:if is="@messageShowLocation AND {$user.location}">
                    <dl class="pairsInline" style="padding-bottom:2px">
                        {xen:phrase location}:
                        <a href="{xen:link 'misc/location-info', '', 'location={xen:string censor, $user.location, '-'}'}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a>
                    </dl>
                </xen:if>

                <xen:if is="@messageShowHomepage AND {$user.homepage}">
                    <dl class="pairsInline" style="padding-bottom:2px">
                        {xen:phrase home_page}:
                        <a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a>
                    </dl>
                </xen:if>
                
            </xen:hook>
            <xen:if is="@messageShowCustomFields AND {$user.customFields}">
            <xen:hook name="message_user_info_custom_fields" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">

                <xen:foreach loop="$userFieldsInfo" key="$fieldId" value="$fieldInfo">
                    <xen:if is="{$fieldInfo.viewable_message}">
                        <xen:if hascontent="true">
                            <dl class="pairsInline userField_{$fieldId}">
                                <dt>{xen:helper userFieldTitle, $fieldId}:</dt>
                                <dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>
                            </dl>
                        </xen:if>
                    </xen:if>
                </xen:foreach>
    
            </xen:hook>
            </xen:if>
            </xen:contentcheck>
        </div>
    </xen:if>
</xen:if>
<xen:if is="{$post.position} == 0 AND !{$message.conversation_id}">
<div class="readcount"><span>{xen:number $thread.view_count}</span> lượt xem</div>
</xen:if>
    <span class="arrow"><span></span></span>
</div>
</div>

Kế tiếp bạn đi đến template message
tìm
HTML:
<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}"> <xen:include template="message_user_info"> <xen:map from="$message" to="$user" /> </xen:include>
thay nó bằng
HTML:
<xen:if is="{$post.position} == 0 AND !{$message.conversation_id}"> <li id="{$messageId}" class="message firstPost {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}"> <xen:include template="message_user_info_firstpost"> <xen:map from="$message" to="$user" /> </xen:include> <xen:else /> <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}"> <xen:include template="message_user_info"> <xen:map from="$message" to="$user" /> </xen:include> </xen:if>
thêm đoạn code sau vào dòng thứ 2 đầu tiên trong template mesage
HTML:
<xen:if is="{$post.position} == 0">
    <img src="{xen:link attachments, $attachment}" style="width: 100%; height: 200px; />
</xen:if>
Trong EXTRA.CSS
thêm
HTML:
.titleBar {
    background: white;
    position: relative;
    top: 209px;
    text-align: center;
    opacity: 0.9;
    margin-top: -59px;
}

.pageNavLinkGroup{
    position: relative;
    top: 247px;
    margin-right: 10px;
        margin-top: -67px;

}

.linkGroup a, .linkGroup .Popup, .linkGroup .element {
    margin-left: 10px;
    display: block;
    float: right;
    background-color: #2D2D2D;
    color: white;
    border: solid 7px;
    padding: 0px;
    width: 200px;
    text-align: center;
    padding-left: 13px;
}
 

Đính kèm

  • Giới Thiệu Cộng Đồng Dev Template   Cộng Đồng Thiết Kế Template Website (4).png
    Giới Thiệu Cộng Đồng Dev Template Cộng Đồng Thiết Kế Template Website (4).png
    324.9 KB · Lượt xem: 43
Sửa lần cuối:

KenLilBoiz

CEO DAWEBZ Chuyên Gia Dịch Vụ Trực Tuyến
Tham gia
05/08/2015
Bài viết
340
Được Like
362
anh em đừng làm vội nhé để mình fix xong đã nhé .. thử test trên mấy giao diện khác bị lỗi nhiều quá
__________________
đã fix xong bạn nào gặp lỗi hay gì thì cho mình biết nhé
 
Sửa lần cuối:

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,969
Được Like
11,315
đẹp ^^
 

phucdinh997

Thượng Đế
Tham gia
27/04/2015
Bài viết
26
Được Like
19
Yes~~ Tốt, cơ mà nhìn hình demo có vẻ hình bị nén lại trên cover, điều này gây khó chịu người xem.
 

phucdinh997

Thượng Đế
Tham gia
27/04/2015
Bài viết
26
Được Like
19
cái ảnh đầu tiên là responsive mà thím
Ý mình là hình ảnh bị bóp méo cho buaef khung hiển thị, chỉ cần nhìn cái thumbnai của attachment và cover là thấy. Mình không có ý chê, chỉ góp ý thôi.
 

KenLilBoiz

CEO DAWEBZ Chuyên Gia Dịch Vụ Trực Tuyến
Tham gia
05/08/2015
Bài viết
340
Được Like
362
Ý mình là hình ảnh bị bóp méo cho buaef khung hiển thị, chỉ cần nhìn cái thumbnai của attachment và cover là thấy. Mình không có ý chê, chỉ góp ý thôi.
:D à không mình thì không ngại chê . tưởng bác nói sao nó lại thay đổi như vậy.
bác có thể sửa lại css cho nó theo ý bác mà
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom