You will see how to add assets to your website: images, stylesheets, javascripts and fonts.

Images

Let's say you want to add logo.jpg on your index page. Add logo.jpg to

public/images

Important: Using <img src="/images/logo.jpg" /> will work when using the Wagon webserver, but it won't in LocomotiveCMS after deploying to your site. Liquid filters are used to get public urls (images, javascripts, stylesheets...).

In your page, add:

<img src="{{ 'logo.jpg' | theme_image_url }}" alt="" />

Note that your image path is simplier, you don't need to specify the "image" folder. Still, you can create subfolders:

public/images/icons/ajax-loader.gif

will be refered this way:

<img src="{{ 'icons/ajax-loader.gif' | theme_image_url }}" alt="" />

The theme_image_tag can also be used to generate the html img tag:

{{ 'icons/ajax-loader.gif' | theme_image_tag }}

Javascripts

Put your javascripts in the public/javascripts folder then use the javascript_tag:

{{ 'libs/jquery-1.8.2.min' | javascript_tag }}

Note: You can also use the javascript_url tag.

Stylesheets

Put your stylesheets in the public/stylesheets folder then use the stylesheet_tag:

{{ 'styles.css' | stylesheet_tag: 'screen, projection' }}

Note: You can also use the stylesheet_url tag.

Wagon automatically understands the Sass language to manage your stylesheets.

In the public/stylesheets folder, you can write .scss and .sass files. It will be automatically compiled to css when developping or pushing your assets to a Locomotive Engine.

Fonts

Put your fonts in the public/fonts folder. Call them directly in your css.

However, if you host your website on Heroku / Amazon S3, you need to do the following steps to make it work.

• Store all your fonts in the public/fonts folder
• Create a public/fonts/all.css and declare your fonts in it

• Load your fonts/all.css

  {{ '/fonts/all' | stylesheet_tag }}

Learn more

• theme_image_tag and theme_image_url documentation
• javascript_tag and javascript_url documentation
• stylesheet_tag and stylesheet_url documentation