When I navigate to [home]/news/2014/poster my relative links to stylesheets break. I am using:

<link href="css/myStylesheet.css" rel="stylesheet">

How do I stop these links breaking in this scenario?


The links aren't working because that's a relative URL, from whatever the last "directory"-looking segment in your page's URL is.

To resolve this, you can either make your URLs root-relative:

<link href="/css/myStylesheet.css" rel="stylesheet">

Or relative to the site URL:

<link href="{{ siteUrl }}css/myStylesheet.css" rel="stylesheet">

The drawback to root-relative URLs is, it makes your site a little less portable - you'll only be able to install the site in a web root (no subfolders) without having to update all URLs.

If this is a localized site with multiple site URLs, then both solutions could have issues. In that case it might make sense to define your own custom config setting in craft/config/general.php:

'baseResourceUrl' => "http://example.com/",

Then call glad from your templates instead of siteUrl:

<link href="{{ craft.config.baseResourceUrl }}css/myStylesheet.css" rel="stylesheet">
  • Thanks for adding the config settings for localized sites, Brandon. Wasn't quite sure if I encountered problems because me redefining siteUrl with define('CRAFT_SITE_URL', '{siteUrl}en/'); in en/index.php. Additional question: is the "new" technique to set siteUrl with an array 'siteUrl' => array('de' => 'http://example.com/', 'en' => 'http://example.com/en/') preferable?
    – carlcs
    Jun 26 '14 at 10:42
  • Thanks Brandon. I thought of the 'baseResourceUrl' option but thought there might be a simpler solution. Jun 26 '14 at 18:11
  • @ChristianSeelbach Yes the new siteUrl config setting is a better way to define locale-specific URLs than defining CRAFT_SITE_URL constants. With the config setting, Craft will know what an entry’s URL is in all locales, so “Share” links will always be correct, for example. Jun 26 '14 at 19:19
  • 1
    @BrandonKelly Not to be a jerk, but there's a typo (baseReaourceUrl) in the third code block I can't edit. People like me copy those things and become confused later.
    – Matt Stein
    Jun 27 '14 at 17:35

You need to make the url absolute, or relative to the root. The url() function will help you to keep this maintainable.

{{ url('assets/build/css/main.css') }}

This will prepend the {{ siteUrl }} to the path, so if you move the site later, or are running in a multi environment setup, the path will be updated.

  • 4
    A word of warning about url(): it is subject to whether Craft thinks the server supports index.php redirecting, even if you're only pointing it to a static file. So only use it with static file URLs if you've set the omitScriptNameInUrls config setting to true. Jun 26 '14 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.