Getting your paths right (Articles) | The Bakery, Everything CakePHP

Getting your paths right

By Iharizaka Rahaingoson (ihari)

The CakePHP manual is quite clear about the fact that images, style sheets and javascript files should commonly be put into respectively webroot/img, webroot/css and webroot/js. However, it is not clear for someone who is new to CakePHP what is the general rule for giving the correct path to these ressources. Routinely the designer who has to work with CakePHP may wonder why using routes, static pages and controller/actions do not yeld the same results as to path correctness.

While testing the framework, the newbie is suggested that helpers be used to correctly output some familiar HTML tags. One then comes to transform all tags into $html->image() method calls. But what about background images ? and what about type="image" inputs ?

Using the webroot property in the html helper

After trying the various CakePHP global constants (ROOT, WEBROOT_DIR, WWW_ROOT, CSS, etc.) with no results, the general solution seems to be found in the $this->webroot property that returns the path to the application webroot. Thus for the various cases above we may have in our layouts, views or elements:

A simple image tag:
Download code




<img src="<?php echo $this->webroot; ?>img/foo.gif" .../ >

A background image within a table cell the old way:
Download code




<td background="<?php echo $this->webroot; ?>img/foo.gif">

A background image within a table cell, the styled way (illustrating external CSS case as well):
Download code




<td style="{ background-image: url(<?php echo $this->webroot; ?>img/foo.gif) }">

An input of type="image":
Download code




<input type="image" src="<?php echo $this->webroot; ?>img/go_btn.gif" ... />

Coding consistently

For consistency's sake, one may even use exclusively this property for all paths and links inside the application. Instead of replacing img tags everywhere while leaving backgrounds and image inputs with a different syntax (applies also to CSS paths, Javascript paths and links), one may bypass the use of some of the helper methods altogether (such as $html->css(), $javascript->link()) and use only the sole webroot helper property.

Comments

CakePHP Team Comments Author Comments

Comment

1 HTML URL function

Although it effectively does the same thing you can also use $html->url('/img/foo.gif').

Comment

2 urls in css

What is the best practice way to put a url in a css file (for a backrgound style for example). The html helper or the controller don't seem to be available in the css.

Comment

3 Reply to urls in css

Use this to set image paths in the css file.
Instead of having something like:
background: url(img/img6.gif) repeat-x;
use
background: url(../img/img6.gif) repeat-x;

Bug

4 Error

I just get an error when i use this in the view..

Fatal error: Call to undefined method View::webroot() in E:\xampp\htdocs\portfolio\app\views\items\text.thtml on line 8

Comment

5 It's really useful shortcut access of webroot in view

Thanks dude.

It is useful shortcut for access of webroot in view

The Bakery Everything CakePHP