Andy-set-studio / hylia

Hylia is a lightweight Eleventy starter kit to help you to create your own blog or personal website.
https://hylia.website
MIT License
905 stars 230 forks source link

Question: Year / Month / Post Pathing #129

Open thnk2wn opened 4 years ago

thnk2wn commented 4 years ago

I'm new to Eleventy and trying Hylia for the first time. I am wondering how to best do relative image links with image subdirectories per post?

I have imported from Wordpress similar to this post.

I have the following structure with blog posts organized by year/month/post and images in a subfolder of each post.

image-structure

I copied the images over with this in eleventy.js:

// for now - this is mostly to keep images nested with their posts
config.addPassthroughCopy('src/posts/**/images/*');

The post collections in the same file:

  // Custom collections
  const livePosts = post => post.date <= now && !post.data.draft;
  config.addCollection('posts', collection => {
    return [
      ...collection.getFilteredByGlob('./src/posts/**/*.md').filter(livePosts)
    ].reverse();
  });

  config.addCollection('postFeed', collection => {
    return [...collection.getFilteredByGlob('./src/posts/**/*.md').filter(livePosts)]
      .reverse()
      .slice(0, site.maxPostsPerPage);
  });

The markdown posts have relative image links like:

![Open PowerShell here](images/OpenPowerShellHere.png)

When running the generation I see errors like:

`TemplateWriterWriteError` was thrown
> ENOENT: no such file or directory,
open '/Users/hudgeo/Projects/blog/03-hylia/srcimages/OpenPowerShellHere.png'

Related issue with posts being in their own folder and url expecting prefixed file:

image

My repo is here

I'm just trying to figure out what configuration or layout changes to make for this structure or whether its easier to go with a different structure?

Thanks in advance