How to structure the _posts directory to include media and cover images for each post?

[Voxybuns]

I very recently begun working on a blog project using Jekyll, but I have a question and I hoped the community could provide some help or guidance!

I'd like to include images and videos inside my posts, as well as giving each of them a cover picture that could appear in the post template, but also as a thumbnail when generating the list of posts.

I was thinking using a structure similar to this:

_posts/
├─ yy-mm-dd-post-name/
│  ├─ yy-mm-dd-post-name.md
│  ├─ cover.png
│  ├─ my_image.png
│  ├─ another_image.png
├─ yy-mm-dd-post-name-2/
│  ├─ yy-mm-dd-post-name-2.md
│  ├─ cover.png
│  ├─ yet_another_image.png
│  ├─ sample_video.webm
├─ .../

Each post would have its own folder, which could also contain the aforementioned media as well as the cover picture. Would that work? Is there anything I should watch out for when trying to integrate any of those assets in my post and index templates? Thanks in advance for your help!

[chmaynard]

I'm using this technique. Apparently, static files inside a collection are not included in the site.static_files array.

[julien-blanchon]

I'm also curious ? I'm looking for the same kind of structure in order to make my markdown file render well on github or in my preview, so paths must be relative from the markdown file

[mohits]

I follow a relatively simple approach - there may be a better way.

in the _posts directory, I have the posts as usual.

2022-08-06-lessons-from-24-japan-for-project-managers.textile
2022-08-19-uninstalling-ruby-on-windows.textile

Then, completely separately, in the images directory, I have a directory called posts and then I add sub-directories as relevant. There is not a 1-to-1 relation between the posts and the folder in images/posts but it could be more like images/posts/jekyll or images/posts/ruby/day1 and so on.

That way, the images are included by Jekyll when it collects them up. I just need to use the correct path to point to the images.

[hatamiarash7]

I have the same problem: Include images in Jekyll collection

[felipecrp]

It would.be a very useful feature to organize assets.

[Mohamed3nan]

It will make editing easier!

[RobertGauld]

Pleeeeease!

[ruttkowa]

I started to include the path to the images in the frontmatter / metadata on top like this
asset_path: /assets/images/blog/2023-09-20/

That way I can reference Images like {{ page.asset_path }}image.jpg

Bit cumbersome but works me - especially after writing a little script to generate this structure just like one would do with the HuGo static site generator (e.g. hugo new content posts/my-first-post.md)

[FlyersPh9]

I feel there has got to be a better way than this, but this is what I do currently:

<img
  srcset="/assets/img/posts/{{ page.title | slugify }}/{{ include.url | replace: '.', '@2x.' }} 2x"
  src="/assets/img/posts/{{ page.title | slugify }}/{{ include.url }}"
  alt="{{ include.description }}"
/>

{% include image.html url="my-photo.jpg" description="Lorem ipsum." %}

The reason I don't like this is that you need to create a post & a folder structure in a separate location:

• /_posts/2023-12-23-my-post.md
• /assets/img/my-post/my-photo.jpg

Ideally you would create one folder to place the post and related assets, then not need to reference that long path to make the image appear.

[yachting-earth]

jekyll-postfiles might solve what you are trying to accomplish https://nhoizey.github.io/jekyll-postfiles/

[PauloPhagula]

That has not been maintained for years and there are issues pilling on the issue tracker. Not something I'd recommend