#187847 gửi bởi itpkc
Ngày 31 Tháng 01 2018 , 17:58
Nhờ các bác hướng dẫn em cách resize ảnh sản phẩm trong module shop ngoài trang chủ, hiện tại trong admin/ Quản lý file / Cấu hình ảnh thumbnail em đang để:
- resize theo phương án: resize ảnh theo hai chiều
- Kích thước thumbnail của hình ảnh: 190 x 200
- Chất lượng hình ảnh resize: 99
Site của em đang để Responsive sản phẩm thành 2 cột khi truy cập qua điện thoại nhưng hình ảnh thì chưa xử lý responsive được nên để hiển thị ảnh sp theo cấu hình như trên và phát sinh bất cập. Nếu để nguyên cho nó tự động gọi ảnh ra theo kích thước ảnh thumbnail của module shop thì rất không ổn:
1- khi sử dụng ĐT truy cập vào site ảnh sẽ bị tràn khung rất xấu do hình ảnh không tự Responsive theo độ rộng màn hình điện thoại.
2- nếu điều chỉnh lại thông số ảnh thumbnail trong module shop cho vừa với thiết bị di động thì ảnh hiển thị trên shop khi truy cập bằng PC lại nhỏ quá nhìn không rõ sản phẩm nên rất bất tiện.

Xin nhờ các bác hướng dẫn giúp em cách thêm code Responsive tự động điều chỉnh hình ảnh theo độ rộng màn hình của thiết bị với ạ. Đây là site của em : https://www.shoptoday.vn
Sửa lần cuối bởi itpkc vào Ngày 31 Tháng 01 2018 , 18:29, với tổng số 1 lần sửa.
#187848 gửi bởi anhyeuviolet
Ngày 31 Tháng 01 2018 , 19:30
Bên diễn đàn bên kia mình có hướng dẫn rồi.Cách làm thì nó chỉ có vậy thôi mà bạn.
Xoá các style height và weight trong tpl đi. Thêm class cho nó là img-thumbnail.

Còn ảnh muốn đều, đẹp thì bản phải xử lý trước khi upload lên website.

Cổng nhôm đúc Nhật Bản
http://www.asuzac-acm.com.vn/vi/acm/cong-nhom-duc/
#187859 gửi bởi itpkc
Ngày 01 Tháng 02 2018 , 08:22
anhyeuviolet đã viết Bên diễn đàn bên kia mình có hướng dẫn rồi.Cách làm thì nó chỉ có vậy thôi mà bạn.
Xoá các style height và weight trong tpl đi. Thêm class cho nó là img-thumbnail.

Còn ảnh muốn đều, đẹp thì bản phải xử lý trước khi upload lên website.

Em đã bỏ

style="max-height:{height}px;max-width:{width}px;" trong main_procate.tpl nhưng hình ảnh sp và theme bị vỡ lung tung nên nhờ hỗ trợ thêm bác ạ. Đây là toàn bộ đoạn code gốc của nó, đoạn code em bỏ đi làm nó bị vỡ theme, bác xem em sửa có đúng không thì giúp em nhé :
 <!-- BEGIN: main --> <div id="category"> <!-- BEGIN: catalogs --> <div class="panel-n panel-default"> <div class="panel-heading-n"> <a class="heading-parent pull-left" href="{LINK_CATALOG}" title="{TITLE_CATALOG}">{TITLE_CATALOG} ({NUM_PRO} {LANG.title_products})</a> <span class="heading-child pull-left"> <!-- BEGIN: subcatloop --> <a href="{SUBCAT.link}" title="{SUBCAT.title}"><i class="bullet"></i>&nbsp;&nbsp;&nbsp;{SUBCAT.title}</a>&nbsp;&nbsp;&nbsp; <!-- END: subcatloop --> </span> <div class="clear"></div> </div> <div class="xem-them pull-right"> <a href="{LINK_CATALOG}" title="Xem thêm các sản phẩm " ><span>Xem thêm các sản phẩm&nbsp;&nbsp;⟩</span></a> </div> <div class="panel-body rmv-padding"> <!-- BEGIN: items --> <div class="col-xs-12 col-sm-12 col-md-{num} col-lg-{num}"> <div class="thumbnail"> <div style="height: {height}px"> <a href="{LINK}" title="{TITLE}"><img src="{IMG_SRC}" class="img-responsive" alt="{TITLE}" <!-- BEGIN: tooltip_js -->data-content='{hometext}' data-rel="tooltip" data-img="{IMG_SRC}"<!-- END: tooltip_js -->class="img-thumbnail" style="max-height:{height}px;max-width:{width}px;"></a> </div> <div class="info_pro"> <!-- BEGIN: new --> <span class="label label-success newday">{LANG.newday}</span> <!-- END: new --> <!-- BEGIN: discounts --> <span class="label label-danger">-{PRICE.discount_percent}{PRICE.discount_unit}</span> <!-- END: discounts --> <!-- BEGIN: point --> <span class="label label-info" title="{point_note}">+{point}</span> <!-- END: point --> <!-- BEGIN: gift --> <span class="label label-success">+<em class="fa fa-gift fa-lg">&nbsp;</em></span> <!-- END: gift --> </div> <div class="caption text-center"> <h3><a href="{LINK}" title="{TITLE}">{TITLE0}</a></h3> <!-- BEGIN: product_code --> <p class="label label-default">{PRODUCT_CODE}</p> <!-- END: product_code --> <!-- BEGIN: adminlink --> <p>{ADMINLINK}</p> <!-- END: adminlink --> <!-- BEGIN: price --> <p class="price"> <!-- BEGIN: discounts --> <span class="money">{PRICE.sale_format} {PRICE.unit}</span> <span class="discounts_money">{PRICE.price_format} {PRICE.unit}</span> <!-- END: discounts --> <!-- BEGIN: no_discounts --> <span class="money">{PRICE.price_format} {PRICE.unit}</span> <!-- END: no_discounts --> </p> <!-- END: price --> <!-- BEGIN: contact --> <p class="price">{LANG.detail_pro_price}: <span class="money">{LANG.price_contact}</span></p> <!-- END: contact --> <!-- BEGIN: compare --> <p><input type="checkbox" value="{ID}"{ch} onclick="nv_compare({ID});" id="compare_{ID}"/><a href="#" onclick="nv_compare_click();" >&nbsp;{LANG.compare}</a></p> <!-- END: compare --> <div class="clearfix"> <!-- BEGIN: order --> <a href="javascript:void(0)" id="{ID}" title="{TITLE}" onclick="cartorder(this, {GROUP_REQUIE}, '{LINK}')"><button type="button" class="btn btn-primary btn-xs"><i class="fa fa-shopping-cart"></i>&nbsp;&nbsp;&nbsp;{LANG.add_product}</button></a> <!-- END: order --> <!-- BEGIN: product_empty --> <button class="btn btn-danger disabled btn-xs">{LANG.product_empty}</button> <!-- END: product_empty --> <!-- BEGIN: wishlist --> <a href="javascript:void(0)" title="Sản phẩm ưa thích" ><button type="button" onclick="wishlist({ID}, this)" class="btn btn-icon btn-xs <!-- BEGIN: disabled -->disabled<!-- END: disabled -->"><i class="fa fa-heart"></i></button></a> <!-- END: wishlist --> </div> </div> </div> </div> <!-- END: items --> </div> </div> <!-- END: catalogs --> </div> <!-- BEGIN: modal_loaded --> <div class="modal fade" id="idmodals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">{LANG.add_product}</h4> </div> <div class="modal-body"> <em class="fa fa-spinner fa-spin">&nbsp;</em> </div> </div> </div> </div> <!-- END: modal_loaded --> <div class="msgshow" id="msgshow">&nbsp;</div> <!-- END: main --> 
Sửa lần cuối bởi itpkc vào Ngày 01 Tháng 02 2018 , 08:24, với tổng số 2 lần sửa.