Jekyll - "include" Reference File Not Found Outside "_includes" Directory

Question

I have an _includes directory in my Jekyll project and one of the .html files in that directory needs to reference images from a icons directory outside of _includes, e.g.,

{% include img/icons/facebook.svg %}

Jekyll fails to compile, indicating it can't find the directory. I could add the images to the _includes directory, but I'd rather not if possible. Does anyone know if this can be done?

Thanks!

Answer 1

To include images inside an include, we can refer to them directly with HTML, there is no need to make use of the include tag, so in the include code you just use:

<img src="/img/icons/facebook.svg">

or if you want a full path:

<img src={{"/img/icons/facebook.svg"|absolute_url}}>

update

Problem here is in the include tag usage, it is meant to:

include the content from another file

not to include files.

Answer 2

I actually put my SVG files to the _include/svg folder to achieve exactly what you want. In this case you would save a couple of HTTP-requests which speeds your site up significantly (at least my page speed values were awesome).

That sad, with newer Jekyll versions you are not longer required to put includes into the include folder.

You can use the include_relative tag:

{% include_relative svgs/facebook.svg %}

The docs say:

...the inclusion is specifically relative to the file where the tag is being used. For example, if _posts/2014-09-03-my-file.markdown uses the include_relative tag, the included file must be within the _posts directory or one of its subdirectories.

Unfortunately you cannot use the .. operator to i.e. move out of _posts. For me this a serious drawback. But if you use it in your layouts it might work well for you.

Here are the docs.