Thủ thuật

Tự động hiển thị hình ảnh thumbnai trong bài viết

Quang cao vnpmart.com.vn

Mặc định Category trong joomla được sắp xếp khác lộn xộn và không hề đẹp mắt chút nào. Nếu trong bài viết bạn không chọn ảnh mô tả (hoặc khi viết bài hình ảnh không nằm trong thẻ Read more) thì khi đăng bài hình ảnh không tự hiển thị. Đây một phần là điểm yếu trong quá trình soạn thảo nội dung cho joomla.

Bạn muốn sửa lại Category cho nó đẹp mắt, mang phong cách báo chí, không phải chèn hình ảnh mô tả . Giờ đây khi đăng bài, hình ảnh đầu tiên xuất hiện trong bài viết sẽ tự động được lấy ra làm ảnh mô tả, không cần phải thêm thẻ Read More một cách thủ công nữa.

sua_catagory_joomla_tu_dong_hien_thi_anh_trong_bai_vie_2

Bạn muốn sửa như này?

Mình sẽ chia sẻ với bạn thủ thuật này, giúp bạn tối ưu hóa thời gian quản trị, giúp trang web của bạn đẹp mắt và chuyên nghiệp hơn.
Đầu tiên bạn tài file đính kèm về sau đó upload theo đường dẫn sau:

public_html/templates/teamplate/html.

Bước tiếp theo bạn mở file teamplate.css của teamplate bạn đang dùng lên và thêm code css này vào:

.cols-1 {
display: block;
float: none !important;
margin: 0 !important;
}
.items-row {
margin-bottom: 10px !important;
overflow: hidden;
}
.items-row {
padding-left: 10px !important;
padding-right: 10px !important;
margin-bottom: 10px !important;
overflow: hidden;
}
.row-separator {
border: 0 none;
clear: both;
display: block;
height: 1px;
margin: 0;
}
div.intro-catimgitem {
float: left;
width: 160px;
}
div.intro-catimgitem img {
border: 1px solid #CCCCCC;
height: 94px;
padding: 2px;
width: 146px;
}
.blog-featured .items-row {
padding-top: 0 !important;
border: none !important;
}
.blog-featured .items-row .item h2 {
margin: 0 !important;
font-size: 17px;
color: #100f0d;
font-weight: lighter;
}
.blog-featured .items-row .item h2 a:hover, .blog-featured .items-row .item h2:active {
text-decoration: none;
}
.blog-featured .items-row .item p {
margin: 5px 0px !important;
color: #000000;
}
.blog-featured .items-row .item p.readmore {
text-indent: 10px;
color: #fe0000;
float: right;
}
.blog-featured .items-row .item p.readmore a {
color: #fe0000;
font-weight: normal;
text-transform: none;
}
.blog-featured .items-row .item p.readmore a:hover {
text-decoration: none;
font-weight: bold;
}
dl.article-info {
float: none !important;
margin: 0;
padding: 0;
text-transform: none;
width: 100%;
}

Tiếp theo bạn vào Menu Manager/menus/chọn menu hiển thị theo Category.

Nhìn bên phải bạn sẽ thấy mục: Blog Layout Options, mở mục này ra chỉnh sửa như sau:

Leading Articles (bài viết nổi bật): Bạn để là 0.

Intro Articles (số lượng bài viết hiển thị trong catelgory): bạn để tùy ý theo bố cục site của mình.

Columns (số cột category): bạn để là 1.

Rồi ok, bây giờ bạn có thể f5 xem.

 

Bạn tự cấu hình nhé, rất dễ thôi

vnpmart-camera-hanh-trinh

Viết bình luận