7

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?

carlcs
  • 36,220
  • 5
  • 62
  • 139
blairrorani
  • 413
  • 3
  • 11

2 Answers2

11

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">
Lindsey D
  • 23,974
  • 5
  • 53
  • 110
Brandon Kelly
  • 34,307
  • 2
  • 71
  • 137
  • 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. – blairrorani 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. – Brandon Kelly 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
4

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.

André Elvan
  • 7,288
  • 22
  • 34
  • 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. – Brandon Kelly Jun 26 '14 at 09:49