Images should be placed in the assets/images directory of your project.
To include an image in your site via Tritium use the
asset() function. To specify an image, use the function as follows:
insert("img", src: asset("images/icon.png"))
(Replace “icon.png” with your image.)
Create a sprites folder in assets/images. Inside this folder, place all images you want to sprite.
When you reload the server, two files are generated:
The _sprites.scss stylesheet defines a series of classes, one for each image, in the format:
The stylesheet also contains mixins and variables with the same name assigned. Remember to use
@import to import your sprite stylesheet into _main.scss!
To use the sprite, either:
insert("div", class: "sprites-filename")
You can also use spriting to automatically implement retina images.
Since a sprite is a collection of images put into a single image, they often get rather large. This can impact website performance, especially first page loads. As a rule of thumb, once a sprite image file gets larger than 100KB, break it into multiple sprites.
If you require multiple sprite sheets, create subfolders inside the sprites folder to organize your sprites. In this case, two files (a stylesheet and a sprite) would be generated for each folder you have inside the sprites folder. The stylesheet and sprite would have the name of the subfolder you created, and your sprites would have classes in the format:
For example, the icon bar.png in the subfolder images/sprites/foo is assigned the class
You can also directly use images in the asset/images folder using the Sass function
Do not reference images by their paths relative to the stylesheet you are in. Depending on the Moovweb project you are running, the relative path will be different for different compiled stylesheets.
The following is the correct way to reference the image asset/images/icon.png: