Search code examples
hugoasciidocasciidoctor

Path Predicament: Navigating Image Rendering Discrepancies Between AsciiDoctor PDF and Hugo


I write my documentation with AsciiDoctor PDF. The same .adoc file is also to be processed by Hugo for the internal company website. However Hugo and Asciidoctor understand the path to the images differently.

The images are in the same path as the adoc file.

:imagedir: without a value renders the images correctly in the PDF created with asciidoctor-pdf, but not as a web page in Hugo.

:imagedir: ../ renders the images correctly in the Hugo website, but no longer in the PDF.

The URL is http://localhost:1313/.../2024-04/protokoll-04-2024/ The last part of the URL is the name of the adoc file. So perhaps it makes sense that the path of the images is one level higher: <img src="../image01">. But that doesn't fit with the creation of the PDF.

What am I not understanding correctly? Setting the :imagedir: value for Hugo or PDF each time is very tedious.

Is it possible to pass an argument to AsciiDoctor PDF when calling it, so that the value for :imagedir: would be adjusted accordingly?

I have not yet found a solution. The same problem occurs when I save the images in a subdirectory. Hugo and AsciiDoctor interpret the path differently. Hugo always needs a directory level higher.


Solution

  • AsciiDoc includes intrinsic attributes that define which backend processor was invoked to process the file. Hugo will use the html5 backend.

    You could use a conditional statement in your .adoc file to define the imagesdir attribute when using the html5 backend.

    For example:

    ifdef::backend-html5[]
    :imagesdir: ../
    endif::[]