Liquid asset_img_url How to Get Asset Image URL in Shopify
Drive 20-40% of your revenue with Avada
The previous tutorial instructs you how to track the location of a folder, but what if your file contains a picture and you want to find the address of that image. You still use the URL yet a new type: asset_img_url. This tutorial give you essential knowledge about Liquid, URL and samples to get asset image URL in Shopify.
Table of content
- General information about Liquid and URL filter
- Key information about asset_img_url
- Sample code to get asset image URL in Shopify
General information about Liquid and URL filter
Liquid has been accessed to users for more than a decade and becomes a trustworthy source to upload dynamic content on the front page. Not only is it used by Shopify but Liquid is also applied on Jekyll.
Five main types of filters in Liquid are string, number, boolean, array and URL. Number includes floats and integers. Boolean response to true or false value. Nil is a special empty value that is returned when Liquid code has no results. Our main topic is URL filter.
URL filters outputs links to have access to Shopify’s content network as well as links to edit blogs or articles. Moreover, URL uses numbers, letters flash and a question mark.
Key information about asset_img_url
URL or uniform resource locator is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it. A URL contains the following information: the protocol used to access a resource, the location of the server, the location of the resource in the directory structure, a fragment identifier.
All URLs are presented in the following order: scheme name, colon and two slashes, location of server, the location of the resource on the server, fragment identifier.
asset_img_url returns the asset of URL of an image in the folder of a theme. Besides, asset_img_url accepts size parameters. An image’s width and height is 5760 x 5760 px. The image’s original aspect ratio will be preserved unless you crop the image.
No matter what size you specify, an image can never be resized to be larger than its original dimensions.
For example:
{{ product | img_url: '450x450' }}
Sample code to get asset image URL in Shopify
Take a look at the sample to see how URL link is generated when you use the URL filer.
Input:
{{ 'logo.png' | asset_img_url: '300x' }}
Output:
//cdn.shopify.com/s/files/1/0000/0001/t/1/assets/logo_300x.png?42
Conclusion
Briefly, you can track the location of an image by using asset_img_url in Liquid. You do not need much time to find each file manually, just insert this code like sample, you find what you need. Thank you for your support on this tutorial. Let’s us know your difficulties by commenting under the post.
Liquid
