3

I feel this a simple problem to fix, but I can't find an answer anywhere.

I am developing locally on using MAMP.

Everything on my site is working great until I call up page using a template inside a folder inside the templates directory. At that point the paths are broken to any and all assets (CSS, images, etc.)

For example, if I set the Entry Template for a section in Craft to say news/_entry and then view a news article page... I get an un-styled page.

I am including the CSS like this:

<link rel="stylesheet" href="../public/assets/css/nav.css">

and the images like:

<img src="../public/assets/images/swf_logo.png" alt="" />
  • Can you share how you are including your css as well as how you are setting the src in your img tags? – Natetronn Oct 22 '14 at 19:54
  • 1
    Could you post the code for your layout template and the _entry template? – Alec Ritson Oct 22 '14 at 19:56
  • Yes Natetronn... in my _layouts.html I am including the CSS like <link rel="stylesheet" href="../public/assets/css/nav.css"> and the images like <img src="../public/assets/images/swf_logo.png" alt="" /> – James Ledford Oct 22 '14 at 19:59
  • @alec-ritson here is my _entry template code... {% extends "_layout" %} {% block content %} <article class="newsarticles"> <h2>{{ entry.title }}</h2> <p class="newsdate">Posted on {{ entry.postDate.format('F d, Y') }}</p> {{ entry.body }} </article> {% endblock %} – James Ledford Oct 22 '14 at 20:04
  • @JamesLedford Can you edit your original question with the template code? Difficult to read code in comments. – Brad Bell Oct 22 '14 at 20:10
5

Your image/CSS/JS URLs should be either absolute, protocol-relative, or root-relative:

<!-- absolute -->
<link rel="stylesheet" href="http://example.com/assets/css/nav.css">
<img src="http://example.com/assets/images/swf_logo.png" alt="" />

<!-- protocol-relative -->
<link rel="stylesheet" href="//example.com/assets/css/nav.css">
<img src="//example.com/assets/images/swf_logo.png" alt="" />

<!-- root-relative -->
<link rel="stylesheet" href="/assets/css/nav.css">
<img src="/assets/images/swf_logo.png" alt="" />

Relative URLs (which start with either ./, ../, or no slash at all) are generally a bad idea, since the URL will need to vary depending on the number of segments in your URI.

For example if you were to access http://example.com/, the relative path to your nav.css would be assets/css/nav.css, but if you were to access http://example.com/about/ (with a trailing slash), then the proper relative URL would be ../assets/css/nav.css.

That’s not to say that relative URLs are impossible. The main issue with your URLs is not that they’re relative, it’s that you’re treating them as relative from the physical template file location. Keep in mind that these front-end resource URLs are resolved by the browser, not by the server, and browsers have no idea how the resulting HTML gets generated, let alone that it came from a template that happened to live a couple directories up from your web root, and in a craft/templates/... subfolder. So they need to be relative based an the apparent location of the webpage, as defined by its URI (e.g. “/news/some-slug”).

| improve this answer | |
  • The difference between Brandon's answer and mine is that I'm just telling you how to get the job done. He on the other hand is trying to educate you. I give you examples of both absolute (via Craft Tags & Vars) as well as root-relative paths though, I didn't explain the why; just the how. Point being is that you should consider reading Brandon's answer before you read mine :-) – Natetronn Oct 22 '14 at 20:24
  • Thanks so much guys! I knew I was letting the paths get away from me somehow. Brandon did clear this up by his education. Again, thanks! – James Ledford Oct 22 '14 at 20:27
1

I would suggest using the includeCssFile Tag for your CSS files (there is another for js files for what ever it's worth)

So for example in your case you'd have:

{% includeCssFile "/assets/css/nav.css" %}

Note: I think that is correct though you might need to play with the path a bit. Specifically the first slash.

For the img tags you can probably get way with this:

<img src="/assets/images/swf_logo.png" alt="" />

or if you want you could add the siteUrl Global Variable to the mix as well

<img src="{{ siteUrl }}assets/images/swf_logo.png" alt="" />

Note: again you might need to play with the starting slash depending on your config setup and siteUrl ending with a slash or not:

{{ siteUrl }}/assets/images/swf_logo.png

| improve this answer | |

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.