# Filters
Filters allow us to modify the output of certain data. To use a filter, enclose it in double curly braces and separate multiple filters with a pipe | character. Filters are applied sequentially from left to right.
{{ data | filter_name | filter_name2 }}
# asset_url
string | asset_url - string return value
The CDN URL address for the minified CSS file located under the assets folder.
| Code: | Output: |
| |
It can be combined with the stylesheet_tag filter.
# color_contrast
string | color_contrast(string) - number return value
It calculates the contrast ratio between two colors and returns this ratio. The order of providing the colors does not matter.
It works with the provided string of hexadecimal color codes.
| Code: | Output: |
| |
| |
# currency_format
number | currency_format - string return value
It formats a given price according to the currency settings of the online store.
| Code: | Output: |
| |
| |
# global_asset_url
string | global_asset_url - string return value
It returns the CDN URLs of system JS and CSS files.
| Code: | Output: |
| |
It can be combined with the stylesheet_tag and script_tag filters.
# Available assets:
| bootstrap-touchspin/4.3.0/js/jquery.bootstrap-touchspin.min.js |
| fancybox/3.5.7/css/jquery.fancybox.min.css |
| fancybox/3.5.7/js/jquery.fancybox.min.js |
| headroom/0.12.0/js/headroom.min.js |
| jquery/3.7.1/js/jquery.min.js |
| mmenu/9.3.0/css/mmenu.min.css |
| mmenu/9.3.0/js/mmenu.min.js |
| popperjs/2.11.8/js/popper.min.js |
| slick/1.9.0/js/slick.min.js |
| splidejs/4.1.4/css/splide.min.css |
| splidejs/4.1.4/js/splide.min.js |
| tippyjs/6.3.7/js/tippy.min.js |
# image_url
string | image_url(width, height, watermark) - string return value
The image_url filter creates a CDN path for an image, optionally including specified width, height, and watermark parameters. Displaying the watermark requires enabling it in the admin interface.
🔴 IMPORTANT: If the "Serve WebP images automatically" setting is enabled in the admin interface under the Labs menu, image_url returns the value in WebP format.
# Parameters:
| width | number | The width of the image. Its value can be between 1 and 5760. |
| height | number | The height of the image. Its value can be between 1 and 5760. |
| watermark | boolean | If true, it returns the path of the image containing a watermark. |
# Error handling:
- If the value of width or height is not between 1 and 5760, it returns an error message: "Image url error: Width and height must be between 1 and 5760"
# Examples:
| Code: | Output: |
| |
| |
| |
| |
# image_tag
string | image_tag(width, height, widths, alt, class, loading, sizes) - string return value
Az image_tag filter egy HTML <img> címkét generál az adott image_url alapján. Az attribútumokat az opcionális Parameters segítségével állíthatjuk be.
# Parameters:
| width | number | The image width. If not provided, it takes the value set in the image_url filter as the default. Its value can be between 1 and 5760. |
| height | number | The image height. If not provided, it takes the value set in the image_url filter as the default. Its value can be between 1 and 5760. |
| widths | array | The array of different widths from which to generate a srcset attribute. The values of the array cannot be 0. |
| alt | string | Alternative text for the image. If not specified, it will be entered in the HTML with an empty value. |
| class | string | The CSS classes of the image. If not specified, the attribute is not included in the output. |
| loading | string | The loading attribute of the image (e.g. lazy). If not specified, the attribute is not included in the output. |
| sizes | string | The sizes attribute of the image. If not specified, the attribute is omitted from the output. |
# Error handling
- If the value of width or height does not fall into the range between 1 and 5760, it gives an error message: "Image tag error: Width and height must be between 1 and 5760"
- If the widths array contains a value of 0, it gives an error message.
# Example
Code:
|
Output:
|
# placeholder_svg
string | placeholder_svg_tag - string return value
The placeholder_svg filter can be used to generate SVG-format placeholder images.
# Example
| Code: | Output: |
|
# stylesheet_tag
string | stylesheet_tag - string return value
The stylesheet_tag filter facilitates the loading of stylesheets with various options such as preload and lazy load. It creates a <link> element to load the specified CSS file. The return value is a minified version.
# Parameters:
| preload | boolean | If true, we set a `Link` request header. This setting allows the stylesheet to be preloaded, thereby improving website speed and performance. Default value is false. |
| lazy | boolean | If true, the stylesheet is loaded later. Default value: false. |
# Példák:
| Code: | Output: |
| |
| |
| Request header: |
# script_tag
string | script_tag - string return value
The script_tag filter facilitates the loading of system-provided JS files with various options such as preload, defer, and async. It creates a <script> element to load the specified JS file. It can be combined with the global_asset_url filter.
# Parameters:
| preload | boolean | If `true`, sets a `Link` request header. This allows the script to be preloaded, improving website speed and performance. Default value: `false`. |
| defer | boolean | If `true`, the script will be executed after the document parsing is complete. Default value: `false`. |
| async | boolean | If `true`, the script will be executed asynchronously as soon as it becomes available. Default value: `false`. |
# Examples:
| Code: | Output: |
| |
| |
| Request header: |