GuidesDiscussionSupport us!v2
Guides

Assets

Suggest Edits

You will see how to add assets to your website: images, stylesheets, javascripts and fonts. These are different from the assets that end-users will upload from the back-office.

Images

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

🚧

Using 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...). Moreover, the filters are in charge of putting the right checksum at the end of the url which is needed in case you put a CDN in front of your assets. So use theme_image_url.

In your page, add:

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

Note that your image path is simpler, 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="" />

📘

In your stylesheets, images paths in the url() function will be automatically changed to the theme image url.

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 }}

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' }}

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 developing, and automatically pushed to a Locomotive Engine when deploying.

The wagon deploy task will precompile and push only the files not beginning with an underscore (_), so prefix with _ the SASS partials that you @include.

📘

All CSS is vendor prefixed by autoprefixer

Autoprefixer automatically takes care of the vendor prefixing in your CSS (SCSS or SASS) files. When deploying you wagon site to the engine it will run Autoprefixer. So no more worrying about different browser mismatches.

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

Updated less than a minute ago