Dev:Referencing External Files in Themes

From Habari Project

Jump to: navigation, search

If your theme uses images or you want to reference files that are within your theme directory, you should avoid hard-coded file paths. Instead, reference the URIs with <?php Site::out_url( 'theme' ); ?>

A general page:

<img src="<?php Site::out_url( 'theme' ); ?>/images/image.png" alt="alt description">


<link rel="stylesheet" type="text/css" media="screen" href="<?php Site::out_url( 'theme' ); ?>/css/screen.css">

A good idea would be creating different folders for specific file types. This will keep things more organized:


URIs in the stylesheet are relative to the page that references the stylesheet. For example, if you include an /images/ directory in your theme, the CSS is:

body {
	background: #FFFFFF url( '../images/background.png' ) top left repeat;

You can also add Javascript and CSS using Stacks. By doing this you can take advantage of plugins for performance improvement, such as concatenating files to minimize HTTP requests or providing minimization.

Personal tools