Linked style sheet woes with Zend Framework

One of the first frustrations I ran into with Zend framework was with linking images and style sheets to a web site. In my pre-Zend days of web programming, I’d just use a relative link, such as the following:

<link rel='stylesheet' href='theme/style.css' type='text/css' media='all' />

This link works fine within the default controller and action. However, when a different controller and/or action is specified, the URL changes, and the relative link breaks.  In search for an answer, some programmers suggested that the solution is to simply add a slash at the beginning of the href to make the link absolute, like so:

<link rel='stylesheet' href='/theme/style.css' type='text/css' media='all' />

Although this may work, it still breaks if you ever store the website in a sub-directory as opposed to the root of the webserver’s public directory.  In my case, this solution was a non-starter, as my development site uses sub-directories for each project.  I use a symbolic link to link a particular sub-directory on my development site to each of the Zend projects “public” directories.    (sym-linked to /zendapps/project1/public)    (sym-linked to /zendapps/project2/public)   (sym-linked to /zendapps/project3/public)

Using a non-changing absolute link would cause the code to break as soon as it is copied to my production server, where each project resides by itself in the webserver’s root directory.

The real solution to this problem is to use Zend’s built-in baseUrl() view helper.  Then your code will look like this:

<link rel='stylesheet' href='<?php echo $this->baseUrl(); ?>/theme/style.css' type='text/css' media='all' />

Doing it this way makes your code work without modification regardless of where your project ends up.  I use this anytime I’m linking to a resource (image, javascript file, or CSS file) in my Zend project’s public directory.