Output to another folder, with image and css links

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Output to another folder, with image and css links

tigregalis
First up, great project. I've been following it for a while and only starting to use it to any serious degree.

I'm using VS Code with the extension to edit and preview my document. Within VS Code, the preview works perfectly. When exporting, however, due to the output location (one directory up), the images try to resolve to one directory further up.

I'm just wondering how I can output to a HTML file at a different level, without breaking the links to images and the styles (i.e. the links adapting).

My structure is as follows:

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

In each of the source files, when I reference an image, I use:
// go one folder up to "manual", then down to "images", then get "image1.png"
image::../images/image1.png[]

This is what I have at the top of index.adoc:
= Title
:toc: left
:experimental: true
:sectlinks:
// even though the stylesheet follows the same structure, the stylesheet works
:stylesheet: ../styles/custom.css
:linkcss:
// :imagesdir: ../images/
// I've tried this attribute but it doesn't appear to help, and I probably don't understand it very well

I've tried a number of commands and attributes, and from different locations:

... manual\source> asciidoctor -n index.adoc -o ../output.html
from within the source folder, grab index.adoc, and output one folder up into output.html
... manual> asciidoctor -n ./source/index.adoc -o output.html
from the manual folder, go down one and grab index.adoc, and output into output.html

Additionally, this is a separate but maybe related query, but I'm still unsure how, if the included files as well as the root file have attributes set, how the processor deals with this.
Reply | Threaded
Open this post in threaded view
|

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

mojavelinux
Administrator
The processor only converts AsciiDoc to HTML. It does not copy other files around. That's typically left up to a build tool like Gradle, Maven, or Antora.

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.

In short, when the target directory is different from the source directory, you (or the tool) have to take on the responsibliity of copying the related resources to that the the HTML file can be viewed properly.

Cheers,

-Dan

On Thu, Nov 22, 2018 at 9:18 PM tigregalis [via Asciidoctor :: Discussion] <[hidden email]> wrote:
First up, great project. I've been following it for a while and only starting to use it to any serious degree.

I'm using VS Code with the extension to edit and preview my document. Within VS Code, the preview works perfectly. When exporting, however, due to the output location (one directory up), the images try to resolve to one directory further up.

I'm just wondering how I can output to a HTML file at a different level, without breaking the links to images and the styles (i.e. the links adapting).

My structure is as follows:

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

In each of the source files, when I reference an image, I use:
// go one folder up to "manual", then down to "images", then get "image1.png"
image::../images/image1.png[]

This is what I have at the top of index.adoc:
= Title
:toc: left
:experimental: true
:sectlinks:
// even though the stylesheet follows the same structure, the stylesheet works
:stylesheet: ../styles/custom.css
:linkcss:
// :imagesdir: ../images/
// I've tried this attribute but it doesn't appear to help, and I probably don't understand it very well

I've tried a number of commands and attributes, and from different locations:

... manual\source> asciidoctor -n index.adoc -o ../output.html
from within the source folder, grab index.adoc, and output one folder up into output.html
... manual> asciidoctor -n ./source/index.adoc -o output.html
from the manual folder, go down one and grab index.adoc, and output into output.html

Additionally, this is a separate but maybe related query, but I'm still unsure how, if the included files as well as the root file have attributes set, how the processor deals with this.


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-tp6593.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
Reply | Threaded
Open this post in threaded view
|

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

tigregalis
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.
Reply | Threaded
Open this post in threaded view
|

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

mojavelinux
Administrator
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