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" />
