A theme can have resources associated with it; these are usually images, but can be any kind of resource you need. Some examples:
- Images
- Web fonts
- Video
Resources for a theme are managed by navigating to Customization -> Themes in the AdminCP, and selecting Manage Resources from the dropdown menu for the relevant theme.
You'll see a listing of all current resources in the theme.
Note: This only applies if you do not have Designer's Mode enabled. If you have it enabled, you can manage your resources using normal folders and you don't need to upload them through the AdminCP. However, note that the method of referencing a resource file at the end of this step still applies even if you use Designer's Mode.
Adding resources
To add a new resource file, click the Add Resource button. The form displayed is relatively self-explanatory, aside from:
-
Existing location
Choose the appropriate location for your resource. If it's for the public side of the site, choose front, if it's for both the public and admin sides, choose global. -
Folder
Files are grouped by type, much like you would structure files in a folder on a desktop. We recommend creating a new folder for your resources to keep them separate from the default resources we ship with the software.
Using resources
Because of the way uploaded files are stored by IPS4 (in that they could exist on a file system, or Amazon S3, or even in a database as a virtual file, and that's before introducing CDNs), there is no guaranteed URL for you to use to refer to your resource. Instead, you use a special template tag, which IPS4 replaces with the generated URL when the page is rendered. The format is:
{resource="<folder>/<filename>" app="<app>" location="<location>"}
<folder> is the folder name you created when uploading the image (or the existing folder name if you chose an existing folder). <filename> is the original filename of the file you uploaded, with extension. <app> is the associated application (almost always will be core), and <location> is one of front, admin or global.
You can also find the tag you need for your resource by locating it in the table of existing resources (see the start of this step).
The template tag can be used in both templates and CSS files, and is simply replaced with a URL. That means you would use it like so:
HTML:
<img src='{resource="myfolder/myfile.png" app="core" location="front"}' alt='My file'>
CSS:
body {
background: url( {resource="myfolder/myfile.png" app="core" location="front"} );
}
Report Guide