internationalizationmarkdownhugodocsy

Hugo Docsy image path referencing with multiple languages


I am the static site generator Hugo with the theme Docsy, but I am having difficulty providing the correct path so Hugo can find my images?

I read Hugo's content organization will search for an image either in the Page Bundle or in the project's static directory. See Hugo Directory Structure: static.

I am using the Page Bundle organization for the images in my project.
The path to my images is: My_Hugo_Docsy_Project/content/en/docs/My_Page_Bundle/assets/image_file.jpg

I am using regular markdown to include the images, but this does not work:

![Image1](/assets/image_file.jpg)

I believe Docsy's multiple language feature (internationalization) is causing the hangup, which nests the content directory structure by language.


Solution

  • Docsy's default config.toml, sets contentDir = "content/en".

    Setting contentDir effectively changes the "site root" for Page Bundled resources like images. The "site root" directory is where Hugo would start to look for image_file.jpg.

    #Hugo root directory when contentDir = "content/en"
    `My_Hugo_Docsy_Project/content/en/
    
    #Hugo root directory when contentDir = “content”
    My_Hugo_Docsy_Project/content
    

    So the image path in the markdown would be:

    ![Image1](/docs/My_Page_Bundle/assets/image_file.jpg)