Help Chỉnh tỉ lệ hình ảnh hot slide cho đẹp

868 6 1
S

salemnb

Private
Tham gia
19/05/2016
Bài viết
11
Được Like
7
13340703_1693564317562394_211625318_o.jpg
Mình đang dùng portal 2. Có cái hot slide trên trang chủ nó bị méo ảnh khi hiển thị trông bẹp nhem, xấu lắm, vì một cái lấy tỉ lệ 100%, cái còn lại là px. Bạn nào chỉ giúp dùng timthumb để chỉnh giúp cho mình cái canh lề này để cho hình đẹp với, có thể chiều ngang không cần đủ kích thước như tinh tế. Xin cảm ơn
Đây là tem và css của nó mà bạn Thuyet951 đã làm hộ, nhưng tỉ lệ thì b ấy chưa có thời gian giúp:
Template:
Mã: 
<xen:require css="EWRwidget_ArticlesSimple.css" />

<div class="widget_{$wWidget} row" id="widget_{$wWidlink}">
    <div class="articlesSmall">
    <xen:foreach loop="$wUncached" value="$article" i="$i">
        <xen:if is="{$i} <= 3">
        <div class="hotnews col l4 s4">
            <xen:if hascontent="true">
        
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" />
                                <xen:else/>
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a>
                        <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                            <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                    <img src="styles/8wayrun/EWRmedio_play.png" />
                            </a>
                        </xen:if>
                    </xen:if>
                    </xen:contentcheck>
        
            </xen:if>
    <div class="title">
        <a href="{xen:link threads, $article}">{$article.article_title}</a>
    </div>
    </div>
    </xen:if>
    </xen:foreach>
    </div>
    <div class="articlesSmall2">
    <xen:foreach loop="$wUncached" value="$article" i="$i">
        <xen:if is="{$i} == 4">
        <div class="hotnews col l6 s6">
            <xen:if hascontent="true">
        
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" />
                                <xen:else/>
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a>
                        <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                            <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                    <img src="styles/8wayrun/EWRmedio_play.png" />
                            </a>
                        </xen:if>
                    </xen:if>
                    </xen:contentcheck>
        
            </xen:if>
    <div class="title">
        <a href="{xen:link threads, $article}">{$article.article_title}</a>
    </div>
    </div>
    </xen:if>
        <xen:if is="{$i} == 5">
        <div class="hotnews col l6 s6">
            <xen:if hascontent="true">
        
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" />
                                <xen:else/>
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a>
                        <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                            <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                    <img src="styles/8wayrun/EWRmedio_play.png" />
                            </a>
                        </xen:if>
                    </xen:if>
                    </xen:contentcheck>
        
            </xen:if>
    <div class="title">
        <a href="{xen:link threads, $article}">{$article.article_title}</a>
    </div>
    </div>
    </xen:if>
    </xen:foreach>

    </div>
</div>

Mã: 
.widget_ArticlesSimple .hotnews {
  position: relative;
  padding: 1px;
}
.widget_ArticlesSimple .hotnews img {
  width: 100%;
  height: 120px;
}
.widget_ArticlesSimple .hotnews .title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 7px;
  background-color: rgba(23, 96, 147, 0.57);
  margin: 0 2px 5px 2px;
  font-size: 15px;
}
@media only screen and (max-width: 480px) {
  .widget_ArticlesSimple .hotnews .title {
    font-size: 15px;
  }
}
.widget_ArticlesSimple .hotnews .title a {
  color: #fff;
}
.widget_ArticlesSimple .hotnews .title a:hover {
  color: #e0e0e0;
}
 
Sửa lần cuối:
Bài viết liên quan
Cho em hỏi làm cách nào để hiện luôn menu filter bar ngay Filters xenforo bởi Phucphuc,
cần tìm theme giống https://gmkb.it.id.vn/ bởi sanhpv,
Bỏ giới hạn chèn ảnh vào bài viết bởi tranxuanbactb,
Đổi ảnh ở footer bởi Zales Blowes,
Cho em hỏi ảnh này ở đâu ạ bởi Zales Blowes,
Tìm bạn Hải Phòng giúp dựng Forum bởi Hongphi,
Bài viết mới
Cho em hỏi làm cách nào để hiện luôn menu filter bar ngay Filters xenforo bởi Phucphuc,
cài addon nào để có thumbnail video tải từ attach bởi sanhpv,
Help link không dấu bởi sanhpv,
cần tìm theme giống https://gmkb.it.id.vn/ bởi sanhpv,
Bỏ giới hạn chèn ảnh vào bài viết bởi tranxuanbactb,
Đổi ảnh ở footer bởi Zales Blowes,
T

TD2308

Corporal
Tham gia
17/03/2016
Bài viết
151
Được Like
116
rồi làm sao để chèn cái này ở trang chủ potar 2 vậy thớt?
 
S

salemnb

Private
Tham gia
19/05/2016
Bài viết
11
Được Like
7
Cái này mình nhờ bạn Thuyet làm cho. Tạm gọi là hot slide, thêm template và css, chèn vào portal. Bạn ấy bận quá nên chưa chỉnh cho mình cái tỉ lệ. Mình đang xem dùng cái timthumb để chỉnh hình ảnh mà chưa được.
Bác nào xem giúp mình với
 
T

thuyet951

MasterCorporal
Tham gia
01/04/2016
Bài viết
312
Được Like
427
TD2308 nói:
@thuyet951 help me! :rolleyes:
Nhấn để mở rộng...
Trong style Tinhte.vn version 3.0 mình sẽ bổ xung cái này + thêm vài cái template nữa cho anh em tự lựa chọn.

Còn giờ ai muốn dùng thì hỏi bác chủ topic ấy, mình vừa chỉnh cho bác ấy hoàn chỉnh rồi.
 
S

salemnb

Private
Tham gia
19/05/2016
Bài viết
11
Được Like
7
Thank u so much. :D
lúc nào có v3.0 show cho ae chiêm ngưỡng tí cái style kia là t1 rồi nhỉ.
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
ThanhKhoa Help Cần chỉnh icon share addon Xencat - Multi Concept Blog-Magazine-News 2.0.1 Addon, Styling and Customization Questions 3
tuna Help Làm sao để chỉnh cỡ chữ tiêu đề khi share link lên fb Addon, Styling and Customization Questions 0
S Help Làm seo tùy chỉnh tag xenforo hoặc thêm tile chung vào sau? Addon, Styling and Customization Questions 0
hoangmanhtran Help Cách điều chỉnh Title của Admin và duyệt bài trước khi đăng Addon, Styling and Customization Questions 2
phatsnguyen [Giúp đỡ] Chỉnh màu thanh title của cửa sổ Addon, Styling and Customization Questions 0

Chủ đề tương tự


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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom