HowToDisplayAnImage

From Shopify Wiki

Displaying an Image in Your Template

You may have created a web page using standard tools and want to import the layout into liquid for your store layout on Shopify. You will soon run into the problem that any images that you displayed on your page using the <img src="./image.gif"> method won't show up. That is because your template could exist anywhere later on, most likely in a database. You have to use code to tell your template where to find the images, unless you embed all your image lookups into your CSS and put the images in the same folder.

The simple answer to the problem of displaying images on your pages is this:

{{"image.gif" | asset_url | img_tag, "alt text here" }}

This is a simple use of filters. Refer to use of filters and Tags in previous sections. Basically what is happening is that liquid is reading each tag (there are three in this filter) and building up an output by passing the result of previous tag as input for the next tag. Here is what is happening behind the scenes:

# "image.gif" >> "image.gif"
# asset_url >> asset_url + "image.gif" = "http://path/to/your/assets/folder/image.gif"
# img_tag >> img_tag + "http://path/to/your/assets/folder/image.gif" = <img src="http://path/to/your/assets/folder/image.gif" alt_text="alt text here">

An example of how the end result: <img src="http://www.yourdomain.com/dir/image.gif" alt_text="Hello World">

Displaying an Image in Your Blogs, Pages, and Product Description

From the Textile Reference: http://hobix.com/textile/

Find the URL of the image you would like to add, then do the following.

!http://jadedpixel.stikipad.com/attachment/asset/3280/shopify-powers-234x60.gif(Here is my image)!

which will show up like this: (Here is my image)!

The text in parentheses is the image's alt tag.

Unfortunately I don't think there is a way to specify the image's dimensions using this method.