How to load css & assets from one directory above

I have an html file that correctly loads the css & assets when the html file is at the root like so:

├── ca.html
├── css
│   ├── bootstrap2.min.css
│   ├── style-print.css
│   └── style.css
├── fonts
│   ├── themefisher-font.eot
├── images
│   ├── 1_blue.png
│   ├── 1_green.png

However, I need to add an archive of separate page/html files that also uses the same rendering, so i’d rather not pollute with all these html files at the root. However when i do something like this:

├── ca.html
├── archive
│   ├── 2020-jan.html
├── css
│   ├── bootstrap2.min.css
│   ├── style-print.css
│   └── style.css
├── fonts
│   ├── themefisher-font.eot
├── images
│   ├── 1_blue.png
│   ├── 1_green.png

then 2020-jan.html can’t load any of the assets in the above directories. How can I make it point to it without simply duplicating all the assets or putting all the archive html files in the root?

You could use either absolute or relative URLs for href/src attributes. For example, 2020-jan.html could use:

<link rel="stylesheet" href="/css/style.css">
<!-- or -->
<link rel="stylesheet" href="../css/style.css">
2 Likes

Thanks @chuckhoupt that worked for the css but how can i adapt it for the images & fonts?

EDIT: The issue is my image paths are directly listed in the front matter of each file like:

data_icon_col1_row1: images/icon1.png
data_icon_col2_row1: images/icon2.png
data_icon_col3_row1: images/icon3.png

So ideally i write the global relative path in the layout html and somehow update these to refer to that rather than hardcoding each relative path for each image.

Absolute paths are probably better, since they can be used from any location. For example, you could add a / in front of the image URLs like this:

<img src="/{{ page.data_icon_col1_row1 }}">
2 Likes

@chuckhoupt should that line be put in the head or body of the html file? Or did you mean in another file?

The image element would be in the body of the HTML file, whose front matter defines data_icon_col1_row1.

2 Likes

That worked, thanks @chuckhoupt