How are URLs handled inside the CSS file in CakePHP so they reference the correct location?

Question

I am designing a website using CSS Files a lot, but I have several occurrences of background images, images for bullets in lists and I will probably find another need for the css url() function.

But, in cake, all URL should be handled by the Route::url() function, in several ways, being most common the $html->url()

But my problem is that CSS Files are not interpreted by PHP. How I can create a CSS File containing something like:

div.coolbg {
  background-image: url('<?= $html->url("/img/coolbg.jpg") ?>');
}

See, my last option is to import the css file inline on the layout so it can be interpreted. But I highly prefer to use a more "Cake" approach.

Thanks!

Answer 1

You don't need to use $html->url() in your css file, consequently you don't need to parse the CSS files through PHP or create a CssController.

If your cake app is installed in your virtual hosts DocumentRoot, just make all the paths to images absolute from the webroot. e.g.

div.coolbg {
  background-image: url(/img/coolbg.jpg);
}

This will apply the image at app/webroot/img/coolbg.jpg to your

If your cake app is not installed in the virtual hosts DocumentRoot, i.e. you access your cake app via a URL like http://www.domain.com/myapp/, then you make the path to the image relative to the css file. Check out the style rules in app/webroot/css/cake.generic.css e.g.

#header h1 {
background:#003D4C url(../img/cake.icon.gif) no-repeat scroll left center;
color:#FFFFFF;
padding:0 30px;
}

This works because style sheets live in the app/webroot/css/ directory, and image live in the app/webroot/img/ directory, so the path "../img/cake.icon.gif" comes up out of the css directory, then back down into the img directory.

Answer 2

I would definately go for the solution suggested by zam3858. And if you don't like to have your images in two distinct locations, create a symbolic link in the css directory that points to the images. Like this:

$ cd app/webroot/css 
$ ln -s ../img .

Now, the image paths will be resolved correctly for both the html helper and style sheets:

// css:
url(img/image.png);

// view.ctp
echo $html->image('image.png');

It may not be the cakiest solution, but it doesn't look like cakephp provides one.

Answer 3

Change the line with background to

background:url(../img/menu_027_l.jpg) no-repeat left;

Answer 4

You can add CSS to be processed through PHP by editing your .htaccess file in Apache. Processing it, as opposed to just spitting it out does have a slight performance hit.

AddType application/x-httpd-php .css

Also, see: http://www.webmasterworld.com/forum88/5648.htm

Answer 5

This won't help too much with the Cake stuff unless you first instantiate the Cake objects. If you want to use the html helper, you'll probably want to figure out how the first Cake object is instantiated, then mimic that in your CSS stuff. Not sure exactly how I'd do this -- I think having an entire CSSController would be overkill, but I think you might have to instantiate an app controller (after all, you want the rewritten css url to reflect you app's settings, right?). So I guess you may have to create a CSSController anyways.

Answer 6

A whole bunch of cakephp experts are probably going to hate me for suggesting this one.. :)

The easiest solution for me was to just include the image file in the css folder. Something like this

/app/webroot/css/css_images/mypic.jpg

So in the css file I would just put in:

background-image: url(css_images/mypic.jpg);

The bad thing is obviously it's not the cakiest thing to do. The good thing is that it will work regardless if you are using fancy url or not since css finds the image relative to the css file.

Answer 7

I found that relative urls in CSS fall apart when embedding CSS in a helper for CakePHP. It is due to the router being able to map different urls to the same page so then the relative url needs to be different. For example if you have a url like localhost/myapp/parts/index or localhost/myapp/parts/ or localhost/myapp/parts then a relative url of ../img/image.gif will only work for one of them.

In my helper the only way I found to get around it was to make my css like this

.jquery-dialog-spinner {
    display:    none;
    position:   fixed;
    z-index:    1010;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 0, 0, 0, .1 ) 
            url('__loader_image__') 
            50% 50% 
            no-repeat;

}

and then replace the tag with a generated url in the code before output the css.

  $map = array(
      '__loader_image__' => $this->Html->assetUrl('ajax-loader.gif', array('pathPrefix' => IMAGES_URL))
  );
  $formatted_css = strtr($this->css, $map);
  $response .= "<style type=\"text/css\">" . $formatted_css . "</style>";

If there is an easier way to do this I would appreciate a comment.