0

I am trying to update a site built using Jekyll but I am having an issue with links in the HTML not working. Here is the start of the header for the header.html file:

<div id="primary-header" class="{{include.class_name}}">
<div class="container">
<div class="row">
  <div class="logo-wrap">
    <a href="/">
      <img src="/img/logos/header-logo.png" alt="Logo">
    </a>
  </div>

The project resides in /Volumes/Holder/Work/Projects/c4 The header-logo.png resides in /Volumes/Holder/Work/Projects/c4/img/logos/header-logo.png The file I am loading in my browser is /Volumes/Holder/Work/Projects/c4/index.html

For some reason when I display this file on my computer (OSX 10.9.4) it will not recognize files indicated by the "/img". If I remove the "/" it will find the file with no issue but this isn't an effective solution as there are a hundred or so of the leading "/" through out several files.

I know that if I remove the "/" it will find the correct file and display properly but how do I get it to find the indicated file without removing the leading "/" ?

Huangism
  • 16,278
  • 7
  • 48
  • 74
user1488639
  • 115
  • 2
  • 3
  • 11
  • change your domain to point to the directory where img folder is in :D – Sunand Sep 15 '14 at 12:42
  • try using the escape character / in front of each of them - it should look like //img//logos etc. So make them double // should work. Also, you might be better to do Logo , adding the "~" in front of your img – jbutler483 Sep 15 '14 at 12:46
  • 1
    A forward slash at the start of a path indicates that it is from the root folder, is this the intention? – Luke Sep 15 '14 at 12:48
  • The project resides in /Volumes/Holder/Work/Projects/c4 The header-logo.png resides in /Volumes/Holder/Work/Projects/c4/img/logos/ The file I am loading in my browser is /Volumes/Holder/Work/Projects/c4/index.html Doesn’t this mean the img folder is in the root ? – user1488639 Sep 15 '14 at 13:11

3 Answers3

1

That's what baseurl is made for.

In your _config.yml :

baseurl: '/Volumes/Holder/Work/Projects/c4'

Now when you call an asset (css, jss or image) just prepend your base url to it.

<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" >

<script src="{{ site.baseurl }}/assets/javascripts/scripts.js"></script>

<img src="{{ site.baseurl }}/img/logos/header-logo.png">
David Jacquel
  • 51,670
  • 6
  • 121
  • 147
  • 1
    While that may be true, I generally use relative paths, so I can test the files directly from the harddisk, without server, and they can be FTPed unmodified to the server (not GitHub, in my case). – Rudy Velthuis Sep 15 '14 at 15:29
  • But if a relative path **/img/image.jpg** from index.html works well, it will break in **folder/page.html** that's why the **baseurl** is helpful. It's allows you to standardize access to your assets even if you site is not hosted at the root of a domain. – David Jacquel Sep 15 '14 at 15:46
  • I don't have relative paths that begin with `/`. Mine are relative to the directory in which the html file is situated. So I also have paths like `../images/photo.jpg`, etc. It works. – Rudy Velthuis Sep 16 '14 at 06:05
0

You have a couple of different options, including using the ~ in front of your img path, so it will look like:

 <img src="~/img/logos/header-logo.png" alt="Logo">

the ~ means that there is part of the file path not included, and may be inside a folder which isn't mentioned in this path, for example:

your image location = MyComputer/MyStuff/img/logos/header-logo.png

which can be referenced using:

~/img/logos/header-logo.png

which will find it for you.

You may also benefit to look into escape characters, which may or may not help you in the future.

EDIT

For clarification of when to use tilde Slash (over just Slash) , please refer to: https://stackoverflow.com/a/6424147/3436942

Community
  • 1
  • 1
jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • The tilde is supposed to be a unreserved character, this mean with no special purpose ([see rfc 3986](http://tools.ietf.org/html/rfc3986#section-2.3)). This works on some Microsoft servers or Apache with mod_userdir. But this is not a standard way to resolve path on a web server. Definitely a bad advice. – David Jacquel Sep 15 '14 at 15:52
  • Looking at the link I had posted in my edit, it seems pretty standard practise tbh for most people. I'm not a pro, however, and yes, of course there are going to be different solutions (of which i'm sure could be discussed at length), but from what I understand/know, this is the solution i've been taught. – jbutler483 Sep 15 '14 at 16:00
  • The link posted in your edit refers to ASP and IIS technologies that are far from standards. And this tilde will have no effect on url parsing on regular Apache or Nginx servers. – David Jacquel Sep 15 '14 at 17:03
0

put your img folder at the root path

Yogesh Khatri
  • 1,180
  • 8
  • 11
  • The project resides in /Volumes/Holder/Work/Projects/c4 The header-logo.png resides in /Volumes/Holder/Work/Projects/c4/img/logos/ The file I am loading in my browser is /Volumes/Holder/Work/Projects/c4/index.html Doesn’t this mean the img folder is in the root ? – user1488639 Sep 15 '14 at 13:12
  • 1
    ok, looks like your img folder is at the correct place and you are loading index.html using file protocol. You have to load index.html using a server (apache, nginx..) with /Volumes/Holder/Work/Projects/c4/ as your root path. – Yogesh Khatri Sep 15 '14 at 13:17
  • I think better is to remove '/' to make the path relative. Which will work regardless of the path of the website. – Yogesh Khatri Sep 15 '14 at 13:18
  • Yogesh, I installed MAMP Pro and set the host correctly. The site now functions properly without changes to the leading "/". Thank you! – user1488639 Sep 15 '14 at 14:36