Login  Register

Re: Output to another folder, with image and css links

Posted by mojavelinux on Dec 05, 2018; 7:47am
URL: https://discuss.asciidoctor.org/Output-to-another-folder-with-image-and-css-links-tp6593p6631.html

I think you've figured out that how the references are made depends on the attributes you pass when converting. In your case, those attributes are imagesdir and stylesheet (which is also impacted by stylesdir). Oftentimes, you need to use different values for different publishing scenarios. The preview may have different requires than viewing the document in a browser or publishing it on a website. And that's exactly why these attributes exists. I'll admit it takes some thinking, but once you figure out the values, the references will come out the way you need them to.

Cheers,

-Dan

On Tue, Dec 4, 2018 at 8:45 AM tigregalis [via Asciidoctor :: Discussion] <[hidden email]> wrote:
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.


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Output-to-another-folder-with-image-and-css-links-tp6593p6629.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML


--
Dan Allen | @mojavelinux | https://twitter.com/mojavelinux