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

[KenLilBoiz]

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ỉ

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

<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

<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

<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

<xen:if is="{$post.position} == 0">
    <img src="{xen:link attachments, $attachment}" style="width: 100%; height: 200px; />
</xen:if>

Trong EXTRA.CSS
thêm

.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;
}

 

[KenLilBoiz]

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é

 

[PVS]

đẹp ^^

 

[phucdinh997]

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.

 

[KenLilBoiz]

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.

cái ảnh đầu tiên là responsive mà thím

 

[phucdinh997]

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]

Ý 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.

à 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à

 

[chubexinh12]

@KenLilBoiz co cach nao lây thumbnail của bai viêt luôn ko bác