Include images in Jekyll collection

Question

I have custom collections for my Jekyll project:

collections_dir: events
collections:
  event1:
    output: true
    permalink: /:collection/:title
    sort_by: date
  event2:
    output: true
    permalink: /:collection/:title
    sort_by: date

And it's my directory structure:

project
├── _config.yml
└── events
    ├── _event1
    │   ├── images
    │   │   ├── title1.jpg
    │   │   └── title2.jpg
    │   ├── title1.md
    │   └── title2.md
    └── _event2
        ├── images
        │   ├── title3.jpg
        │   └── title4.jpg
        ├── title3.md
        └── title4.md

• I have two events collection
• Every collection has some docs
• Every doc needs an image

Problem

Currently, I should manually put all images in the assets folder so I can use them like this /assets/img/event1/title1.jpg :

project
├── _config.yml
├── events
└── assets
    └── img
        └── event1
            ├── title1.jpg
            ├── title2.jpg
            ├── ...
            └── ...

It's very hard to manage image assets for every collection because I have many of them. Is there any solution that every collection has its own asset folder ( Like the first directory tree ) and Jekyll's build process copies them in the final _site directory?

Unfortunately, this doesn't work. Jekyll will pick one image of every extension from every collection, rename it to the collection's name ( event1.jpg / event1.png ) and copy that to the site's root and return an error message for other ones:

Conflict: The following destination is shared by multiple files.
          The written file may end up with unexpected contents.
          /<project>/_site/event1.jpg
           - /<project>/events/_event1/images/title2.jpg
           - /<project>/events/_event1/images/title3.jpg
           - /<project>/events/_event1/images/title4.jpg

I don't understand this behavior. Do you have any idea how to do this?

Answer 1

I managed to get your scenario running but without using the assets folder and without any file copy actions.

Version: jekyll 4.2.2

Here's a page:

You can see the relative path value for the image key in the front matter.

---
layout: page
title: event 2 page 1
image: "images/emmet.png"
---

event 2 page 1

![{{ page.image }}]( {{ page.image }} )

I have used your _config.yml:

collections_dir: events
collections:
  event1:
    output: true
    permalink: /:collection/:title
    sort_by: date
  event2:
    output: true
    permalink: /:collection/:title
    sort_by: date

Result and file your structure in editor tree view:

There is a nice solution for Jekyll liquid in the front matter using a plugin. This might be helpful to add a number or similar to the image in the front matter, see http://acegik.net/blog/ruby/jekyll/plugins/howto-nest-liquid-template-variables-inside-yaml-front-matter-block.html.

I think you could also use a convention for the page and image name and add a fix asset path as a collection default and then add the image tag with a leading slash to your files, maybe also using a default.

Answer 2

Maybe default scopes will help you. You can set front matter defaults in the _config.yml. Define a path + image or a path only per collection. You can overwrite the default in the front matter of each doc if needed.

Example:

collections:
  - event2

defaults:
  - scope:
      type: event2
    values:
      image: /assets/img/event2/image1.jpg
      ... or
      image_path: /assets/img/event2/

Now, you can access the default path or image in each doc using liquid in your links:

• full path to fixed image: {{ page.image}}
• path with flexible image: {{ page.image_path}}/image1.jpg

You could also add an array of images pointing to a different asset path and loop across images.

Example:

collections:
  - event2

defaults:
  - scope:
      type: event2
    values:
      images: 
        - /assets/img/event2/image1.jpg
        - /assets/img/event2/image2.jpg
        - /assets/img/event2/image3.jpg

Not 100% about your goal, but some code or details about your idea may help.

The roadmap for Jekyll 5 is out. The question may also be worth being asked in an issue on https://github.com/jekyll/jekyll.