Asset loading
From Snapp CMS Developer Documentation
Assets are static files such as CSS and images that are required to render a page correctly.
SnappCMS recognises two types of assets - site-wide and module-specific. This page demonstrates both types and explains how to make use of them.
Contents |
Site-wide Assets
Site-wide assets are used on across multiple pages using different modules. Examples of such assets are your website logo graphic and master CSS file responsible for laying out headers, footers and nav menus.
CSS
Default site-wide css assets are stored in:
DOCUMENT_ROOT/templates/default/css/
In order to access global CSS from within your templates, use $cms->getTemplateCSS().
e.g. the code to load DOCUMENT_ROOT/templates/default/css/default.css would look like:
<link rel="stylesheet" type="text/css" media="all" charset="utf-8" href="/<?php echo $cms->getTemplateCSS()?>" />
e.g. the code to load DOCUMENT_ROOT/templates/default/css/print.css would look like:
<link rel="stylesheet" type="text/css" media="print" charset="utf-8" href="/<?php echo $cms->getTemplateCSS('print')?>" />
Images
Default site-wide image assets are stored in:
DOCUMENT_ROOT/templates/default/images/
In order to access global asset images within your templates, use $cms->getTemplatePath()
to locate the assets base dir. e.g the code to load DOCUMENT_ROOT/templates/default/images/logo.png
would look like:
<img src="<?php echo $cms->getTemplatePath()?>/images/logo.png" alt="Logo"/>
Module-specific Assets
As the name implies, module-specific assets are used solely by individual modules. For example, the blog module may require specific CSS for laying out articles and comments, and images for various article status indicators. While in many cases the module-specific CSS can be so simple that for efficiency it makes more sense to embed them into the master CSS files, having them kept separate is a good way to keep your CSS organised according to its purpose.
CSS
Module-specific CSS is always stored in the file DOCUMENT_ROOT/templates/default/modules/MODULE_NAME/templates/TEMPLATE_NAME/default.css
This file is referenced with the method $cms->getModuleCSS().
You want to load your module-specific CSS after your site-wide CSS, so typically you would want the following lines in your master template header:
<!-- ************ CSS Style Sheet for Master Template ******************** -->
<link rel="stylesheet" type="text/css" media="all" charset="utf-8" href="/<?php echo $cms->getTemplateCSS()?>" />
<!-- ************ CSS Style Sheet Printing (optional) ******************** -->
<link rel="stylesheet" type="text/css" media="print" charset="utf-8" href="/<?php echo $cms->getTemplateCSS('print')?>" />
<!-- ************ CSS Style Sheet for Module Template ******************** -->
<link rel="stylesheet" type="text/css" media="screen, projection" charset="utf-8" href="/<?php echo $cms->getModuleCSS()?>" />
Images
Module-specific images are stored in DOCUMENT_ROOT/templates/default/modules/MODULE_NAME/templates/TEMPLATE_NAME/images/
To access these images, use $cms->getModulePath(). e.g. to load DOCUMENT_ROOT/templates/default/modules/MODULE_NAME/templates/TEMPLATE_NAME/images/heading.png
you would call:
<img src="/<?php echo $cms->getModulePath()?>/images/heading.png?>" alt="Heading" />
