1

I am trying to address my paths to the assets (css & img) folders but it errors out or doesn't find the paths totally in my markdown files and base.ejs files...

Please help me out guys, I know it's an issue with my config or something I don't know well...

Github repo: https://github.com/MikeTeddyOmondi/crypto-blogs

4015.alt
  • 63
  • 8
Mike Teddy Omondi
  • 11
  • 2

2 Answers2

4

The issue:

assets/ not accessible form posts inside .src/blogs/ (eg. .src/blogs/blockchain-technology.md)

TL;DR

You need ../../assets/ instead of ../assets/

in the template used by posts inside blogs/ folder.

Explanation

This is the structure of your project:

➜  crypto-blogs-master tree -aI 'node_*' -L 3
.
├── .eleventy.js
├── ...
└── src
    ├── assets
    │   ├── css
    │   └── img
    ├── blogs
    │   ├── blockchain-technology.md
    │   ├── blogs.json
    │   └── ...
    ├── _includes
    │   └── base.ejs
    ├── blogs.md
    ├── index.md
    ├── projects.md
    ├── ...

When trying to access assets resources from blogs/index.html or projects/index.html it works as expected. because , in base.ejs, you have :

    <link href="../assets/css/..." /> <!-- line 16 -->
    <img src="../assets/img/... " /> <!-- line 24 -->

But it doesn't work for the posts inside blogs/ folder.

To fix the issue, you need to change the path to the assets

  # from
  ../asstes/
  # to
  ../../asstes/

To do so, you can:

  1. define a variable relative_path in the Front Matter of your template base.ejs.
---
relative_path: '..'
---
// base.ejs

  1. replace all the occurrences of : ../assets/

    with: <%= relative_path %>/assets/ in base.ejs

  2. for each file (post) inside blog folder, you need to redefine relative_path,

either:

3.1. on their respective Front Matter :

---
  relative_path: '../..'
---
// blockchain-technology.md + ... post-n.md

3.2. or using eleventyComputed, for all of them at once, by creating a file blogs.11tydata.js inside blogs folder, that has this code

  module.exports = function () {
    return {
      eleventyComputed: {
        relative_path: "../.."
      }
    }
  }

Note 1 defining relative_path in /blogs/blogs.json will not work. because of the merging order of cascading data in 11ty (as of the current version).

Note 2 the correct relative_path for index.md is "." instead of "..", but since it is in the input directory, it's fine.

Note 3 A quicker solution is to duplicate base.ejs, rename it (eg. post.ejs), edit it, and call from blog.json.

4015.alt
  • 63
  • 8
0

For me, I always look at the output directory when things aren't working right. I downloaded your zip, ran eleventy to output the build, and I see your assets correctly copied. So for example, in public, I see an assets/css directory with styles.css in it. In your HTML, you would link to: /assets/css/styles.css. Did you try that?

Raymond Camden
  • 10,661
  • 3
  • 34
  • 68