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