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

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.