Linking to images and CSS with ExpressionEngine

Working with ExpressionEngine is intuitive once you understand the idea of templates and weblogs, soon to be called channels. For my first EE site, I quickly translated a static HTML page into a template. Creating a template for the CSS files was easy enough, but I could not figure out where to put the images that the design required.

I eventually figured out the images didn’t need to exist as entries in the database for any reason, but can be uploaded to the root level of the site. Since there is already a folder called images, I added a new subfolder called site and put all the design-related images there.

Linking to an image from a template is easy with the {site_url} tag:

<img src=”{site_url}images/site/logo.png”>

Now I use the same method for CSS files by creating a css folder. I link to CSS files instead of creating templates so that I can import the style sheets from one master file:

<link href=”{site_url}css/screen.css”>

Here’s a related discussion about importing style sheets. (broken link)

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: