Images in source (page) directory

Help
1

I’m having a crash-course in Jekyll et al. I am generating HTML from DITA, and using that as the source for my Jekyll generated site. It is going smoothly but one problem I am stumped on is the handling of images. My DITA source has the images in subdirectories of the source pages. The result is an structure like this:

project/
        folder1/
            _media/
                image1.png
            topicA.html
        folder2/
            topicB.html

In the generated HTML, the hrefs are relative. In topicA, the path to the image is _media/image1.png. If topicB references the same image, it is ../folder1/_media/image1.png.

Everything I read about Jekyll says I need to treat the images as “assets” (maintained in a separate folder). When I build a project, the image links are all broken because the images are not copied to the subfolders along with the rendered pages (in the _site folder).

Any suggestions as to how I might solve this problem? I dread the thought of trying to separate out the images from the generated HTML. And I don’t yet understand enough about Jekyll to do this in the rendering process.

2

By convention, Jekyll never copies files or folders that start with an underscore (_), so the _media folder will not be copied into _site.

1 Like
3

you could try to include it using the include config option:

4

Indeed as above you have to use include in your config.

include:
  - _media

If that doesn’t work you might have to do */_media or foo/_media and bar/_media.

Also as per the original post yes the pattern in Jekyll is to have assets directory (no underscore).

Which could optionally have directories in it like js or css or img.

Then you reference like this

<img src="{{ 'assets/foo.jpg' | relative_url }}" />

I don’t think you need a leading forwardslash as the filter will sort that out.

Or if you want an error at build time that your path is invalid. Note lack of quotes

<img src="{{ site.baseurl }}{% link assets/foo.jpg %}" />

And the path is always from the root directory regardless of the path of the HTML page.

5

Or just make _media as media everywhere but that is not a typical Jekyll way

6

From Jekyll 4.0 onwards, the relative_url is baked into the link tag. So with those versions of Jekyll, the following is sufficient:

<img src="{% link assets/foo.jpg %}" />
7

Indeed. I am assuming most devs or at least beginners are using Jekyll 3 if GH Pages is the main platform for Jekyll. And that this difference is clear in the 3 to 4 guide.

8

That worked exactly as wanted. Thank you!

1 Like