Assets
The Assets module allows you to manage the images, CSS, and javascript for your sites. You must set the asset folders you want managed to have writable permissions. Because assets are saved on the file system and not in a database, you can use an FTP client to manage the assets as well.
Uploading Assets
To upload assets through the CMS, you can use the Upload button in the Assets module. The upload page provides the following upload options:
- File: The selected file(s) to upload
- Asset Folder: The asset folder to upload to
- New file name: The file name you want to assign to the uploaded file. The default is it's current name
- Subfolder: A subfolder name within the selected asset folder to upload to. It will automatically create the folder if it doesn't exist
- Overwrite: Determines whether to overwrite an image or create a new one
- Create thumb: Creates a thumbnail of the uploaded image (Image Specific)
- Maintain ratio: Determines whether to maintain the aspect ratio of the image if resized (Image Specific)
- Width: The thumbnails width (Image Specific)
- Height: The thumbnails height (Image Specific)
- Master dimension: The master dimension to use when creating the thumbnail (Image Specific)
Incorporating Into Your Own Module
You can incorporate assets into your own modules by specifying a field type of asset in your model's form_fields method. This will actually open up the assets module in a window for you to upload one or more files. This field type provides a couple parameters to control things including:
- folder: The asset folder to upload to
- file_name: The file name you want to assign to the uploaded file. The default is it's current name
- subfolder: A subfolder name within the selected asset folder to upload to. It will automatically create the folder if it doesn't exist
- overwrite: Determines whether to overwrite an image or create a new one
- create_thumb: Creates a thumbnail of the uploaded image (Image Specific)
- maintain_ratio: Determines whether to maintain the aspect ratio of the image if resized (Image Specific)
- width: The resized image width. If "create_thumb" is set, then this will only effect the thumbnail (Image Specific)
- height: The resized image height. If "create_thumb" is set, then this will only effect the thumbnail (Image Specific)
- master_dim: The master dimension to use when creating the thumbnail (Image Specific)
function form_fields($values = array(), $related = array())
{
$fields = parent::form_fields($values, $related);
$fields['image_field'] = array('type' => 'asset', 'folder' => 'my_folder', 'overwrite' => FALSE);
return $fields;
}
Field names that end with "img" or "image" will automatically be assigned a field type of asset.
Using Assets in Pages
To incorporate assets in your pages, use one of the asset_helper functions like js(), css() or img_path. Below are some examples:
// using normal PHP syntax if used in a static view file
<img src="<?php echo img_path('my_img.jpg')?>" alt="My Image" />
// using the templating syntax if used in field in the CMS
<img src="{img_path('my_img.jpg')}" alt="My Image" />
Optimizing Assets
FUEL provides a way to optimize JS and CSS files by condensing their output into a single file. This can be done "on the fly" by changing the assets_output configuration parameter to TRUE (or one of the other values listed in the configuration parameters comment). This will combine all the files called in a single js() and css() function call and optimize them by removing whitespace and adding gzip compression.
Must have the assets/cache/ folder writable for the assets_output compression to work "on the fly".
Alternatively, you can generate these files via command line by using FUEL's "build" functionality like so:
// js >php index.php fuel/build/app/js/plugins:plugins // css >php index.php fuel/build/app/css/plugins:plugins
The above will grab all the javascript files located in the main assets/js/plugins folder (the segment "app" refers to the main assets directory) and create a file called plugins.js in the assets/js folder. The file name is denoted after the colon. If no file name is provided then it will default to main.min.js or main.min.css respectively.