Local assets with Jekyll

Question

I was wondering how other people organize their assets for individual posts when using Jekyll. For example, if a message has an image, do you simply upload it to the shared image folder? I don’t really like the idea of ​​doing this - this means that the image is completely separated from the message when I think they should be paired.

Answer 1

I prefer to think of images as standalone assets that are included in zero or more pages. In most cases, my images appear on one page. There are times when I want to have them on several pages, and in other cases I don’t snap the image at all. If your workflow is to put each image in a directory with a message, searching for them begins to require a significant amount of search, and you need to come up with something else for images that do not belong to a particular message.

The approach that I use is on the opposite side of the spectrum. I have one image directory (from "/ images") and 100% of my images are placed there. The advantages of this:

• When I add an image to a message, it’s easy for you to know which way to use. It is always:

  /images/{image-name} 

  For example: http://alanwsmith.com/i/aws-20111017-0906-02 . This allows you to write a plugin, so all you need to enter is the name of the image, and the rest of the known path will be automatically populated.

• With an application like Photo Mechanic , it's incredibly easy to browse through the local directory and see each image. If I want to include an image on another page, this will significantly reduce the time it takes to search.

• There is no separate location / process if I want to send an image to someone without actually including it on the page (i.e. send them a direct link to the image file). I just drop the image into the standard directory and send a direct link.

If you want to get a little more advanced, saving all your images in one directory can also make some interesting settings. For example, even if the URLs for my images start with "/ images", the images are actually stored in a directory outside of those used by jekyll. In my case, the top of my source tree is as follows:

 ./html ./source-files ./image-files 

All my images are stored in the "./image-files" directory. In my apache configuration, I configured an alias so that the url / image points to the "./image-files" directory. For example:

 Alias /images /webroot/image-files 

When I run jekyll, it processes everything in "./source-files" and transfers it to "./html". Since all images are outside of these two directories, jekyll never sees / touches them. As your image library grows, this will speed up the process and prevent a huge amount of unnecessary file copying.

Another tweak that I love about Apache is turning on:

 Options +MultiViews 

This allows you to call your images without using a file extension (for example, "no" .jpg ",". Png ", etc.). You can see this in the link above link. For performance it does not really matter. To me I just like the way it looks, and it saves me having to enter an extension every time I call the image.

MultiViews also allows you to replace an image in one format with another without having to re-encode anything else. For example, if you delete "some-image.gif" and replace it with "some-image.png", you do not need to touch any HTML. He will still be given the form "/ images / some-image". The need for such changes is probably extremely rare. I just find it interesting.

Finally, you can make one decision about whether to allow or disallow viewing the image catalog. Personally, I want my images to appear where I place them. So, I installed the .htaccess file in my images directory:

 Options -Indexes 

If you intend to work on a site with many thousands or tens of thousands of pages and images, this may not scale. For a regular personal site, I believe that this approach simplifies working with images.

Answer 2

I wrote a plugin so that I can easily organize resources in subdirectories:
https://github.com/samrayner/jekyll-asset-path-plugin

 {% asset_path my-image.png %} 

in post 2013-01-01-post-title will be displayed:

 /assets/posts/post-title/my-image.png 

the page my-first-page will display:

 /assets/my-first-page/my-image.png 

Answer 3

Just like you, I really do not like all the images in one shared folder.

Most, if not all, of my images are useful in a single message, and storing them with the Markdown file is really better for managing messages:

• I can leave a new post as one subfolder /_posts/ in one step without putting Markdown in one place and image (s) in another
• When I want to edit the image (s) of an existing message, I do not need to find the desired image in the huge folder /assets/ , it is next to the Markdown file
• In my Markdown, I can use the image file name directly, without any path
• If I want to use any Markdown editor with real-time preview, it works, there is no need to configure the configuration of certain assets.

I tried to use this for my blog ( sample post here ).

For responsive images, I used the Jekyll Picture Tag plugin , but I had to fork it because the Pull request to resolve such paths was not accepted.

Now that there is Jekyll 3, I would like it to be able to use images in both the AND mailbox and /assets/ , look for the image with ![alt](image-file-without-path.jpg) in both that order.

Answer 4

Now I managed to develop a Jekyll plugin that helps save posts resources along with the Markdown file: https://nhoizey.imtqy.com/jekyll-postfiles/

Answer 5

For JavaScript and CSS, you can consider the asset pipeline. You can achieve good performance improvements by linking and compressing. I also use CoffeeScript and Sass, so I need a preprocessor to convert my assets. I use the Jekyll Asset Pipeline to control this whole process automatically when I run the jekyll .

For images / videos, I recommend that you develop a folder naming convention in your project. Usually I have an “assets” folder, and then subfolders with the date of each message that contains the images associated with those messages. If you have several messages per day, you might consider including a message name.