Tổng đài hỗ trợ miễn phí - 
1800 6750
( 8:00 - 22:00 )

Bộ lọc HTML - HTML filters

Bộ lọc HTML sẽ tạo các thẻ HTML dựa trên các asset có sẵn

img_tag

Tạo thẻ chèn hình ảnh.

Ví dụ

{{ 'logo.png' | asset_url | img_tag }}

Kết quả

<img src="//bizweb.dktcdn.net/100/000/006/themes/1118/assets/logo.png?v=132322871" alt="" />

img_tag có thể sử dụn thêm các tham số để thêm vào thẻ alt, cũng như class. Tham số đầu tiên sẽ được xuất ra như alt text, tham số tiếp theo sẽ là các class trong css.

Ví dụ

{{ 'logo.png' | asset_url | img_tag: 'Sapo', 'logo new-version' }}

Kết quả

<img src="//bizweb.dktcdn.net/100/000/006/themes/1118/assets/logo.png?v=132322871" alt="Sapo" class="logo new-version" />

Bộ lọc img_tag có thể áp dụng lên các đối tượng:

Ví dụ

{{ product | img_tag }}
{{ variant | img_tag: 'alternate text' }}
{{ line_item | img_tag: 'alternate text', 'css-class' }}
{{ image | img_tag: 'alternate text', 'css-class', 'small' }}
{{ collection | img_tag: 'alternate text', 'css-class', 'large' }}

Kết quả

<img src="//bizweb.dktcdn.net/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="Red Shirt Small" />
<img src="//bizweb.dktcdn.net/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="alternate text" />
<img src="//bizweb.dktcdn.net/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="alternate text" class="css-class" />
<img src="//bizweb.dktcdn.net/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="alternate text" class="css-class" />
<img src="//bizweb.dktcdn.net/s/files/1/0159/3350/products/shirts_collection_large.jpg?v=1338563745" alt="alternate text" class="css-class" />

script_tag

Tạo thẻ script.

Ví dụ

{{ 'addons.js' | asset_url | script_tag }}

Kết quả

<script src="//bizweb.dktcdn.net/s/files/1/0087/0462/t/394/assets/addons.js?28178" type="text/javascript"></script>

stylesheet_tag

Tạo thẻ chèn file css.

Ví dụ

{{ 'style.css' | asset_url | stylesheet_tag }}

Kết quả

<link href="//bizweb.dktcdn.net/s/files/1/0087/0462/t/394/assets/style.css?28178" rel="stylesheet" type="text/css" media="all" />

Bài viết trên có hữu ích cho bạn không? Hữu ích Không hữu ích Số lượt đánh giá hữu ích: