Posted by tigregalis on Dec 04, 2018; 3:45pm
URL: https://discuss.asciidoctor.org/Output-to-another-folder-with-image-and-css-links-tp6593p6629.html

Hey, I wasn't really clear about what I was after, so I apologise for that. I have figured it out however.

I wasn't necessarily interested in moving the images. Rather, I intended to copy the entire folder over anyway:
root/

manual/
* images/
** image1.png
** image2.gif
* source/
** index.adoc (root file)
** overview.adoc (included into index.adoc)
** structure.adoc (included into index.adoc)
* styles
** custom.css
* output.html (output)

index.adoc

:stylesheet: ../styles/custom.css

include::overview.adoc[]

include::structure.adoc[]

overview.adoc

:stylesheet: ../styles/custom.css

image::../images/image1.png[]

structure.adoc

:stylesheet: ../styles/custom.css

image::../images/image2.gif[]

This gives me a working preview in VS Code for the images and styles, but when I export it using

...\root\manual\> asciidoctor ./source/index.adoc -o output.html

the image URLs and stylesheet references* are all broken.

Inspecting the output, the image URLs were attempting to resolve to for example

.../root/images/image1.png

, so I realised I needed to move one level down, so the solution was simply to override the attribute values when converting to HTML:

...\root\manual\> asciidoctor ./source/index.adoc -o output.html -a stylesheet=./styles/custom.css -a imagesdir=./images/

Relative to output.html, the stylesheet resolves correctly to

.../root/manual/styles/custom.css

In the case of images, the image URLs effectively "backtrack":

.../root/manual/images/../images/image1.png

 which effectively resolves to

.../root/manual/images/image1.png

Realistically, I could have used any value for imagesdir as long as it's one level below, e.g.:

...\root\manual\> asciidoctor ./source/index.adoc -o output.html -a stylesheet=./styles/custom.css -a imagesdir=./styles/

resolves from

.../root/manual/styles/../images/image1.png

 to

.../root/manual/images/image1.png

mojavelinux wrote

You could, of course, open a feature request to have the export feature of
the VS Code extension copy the related resources (e.g., images) to the
output folder. Another option is to enable data-uri so that the images get
embedded into the output document.

As far as I'm aware, the export feature of the VS Code extension doesn't export to HTML anyway, but copying the images (as an option) would be a great feature if it did.

What I will make a feature request for is setting parameters/attributes on the preview (and on the export if available), preferably read via some config file kept in the project root, so I can keep the *.adoc markup clean.