How to reference a figure with its number?

Hello,

How can I refer to a figure in my text with its automatically generated number? I can't seem to find this in any documentation.

For example I have an image

[[SystemOverview]]
.System overview
image::SystemOverview.png[, id="SystemOverview", align="center", scale="65"]

In HTML the figure caption is rendered as
Figure 1. System overview

In another part of my document I want to refer to this figure as "Figure 1":
"As can be seen in Figure 1 ..."

Is that possible?

Hi Little Panda,

This is possible if you include the reference of your ID between these tags << and >>
More info here : http://asciidoctor.org/docs/user-manual/#cross-references

Example

[source, ad]
== Image
[[id_of_hyla_picture]]
.Title of the picture displayed under the picture
image::image/hyla_arborea.jpg[width="40%"]

Link to Figure Image : <<id_of_hyla_picture>>

[html]
<div id="id_of_hyla_picture" class="imageblock">
<div class="content">
<img src="data:image/hyla_arborea.jpg"/>
<div class="title">Figure 1. Title of the picture displayed under the picture</div>
</div>
<div class="paragraph">
<p>Link to Figure Image : Title of the picture displayed under the picture</p>
</div>

Regards,

Charles
Twiter : @cmoulliard

Thank you Charles.

I have tried this method, but it displays the caption of the image as link text and I want "Figure" + number.

In HTML displaying the caption makes sense as the user can click on it. But in general, especially in printed documents (PDF) it is much more convenient for the reader to look up the figure by number than by text. Moreover, as the caption describes the figure and that information is already provided in the text that refers to the figure it makes no sense to repeat it.

For example, I would rather write
"The overall architecture of the system is shown in Figure 1."
than
"The overall architecture of the system is shown in "System overview".

So, is there a way to display the figure number only in the link text?

Until now, what you tried to do is not supported like also center the Image Title (https://github.com/asciidoctor/asciidoctor/issues/857). I suggest that you open a Git Issue to take care about this feature.

Thanks Charles. I will open an issue for this.
By the way, for the issue you mentioned I have also asked the same on this forum (http://discuss.asciidoctor.org/How-to-center-image-caption-when-the-image-is-centered-td901.html). For now I'm using my own css as all our images and captions are centered.

+1

I am also interested in the feature.

If I do a comparison with LaTeX, what Asciidoctor supports is \refname{id_of_hyla_picture}.
And what we are looking for is \ref{id_of_hyla_picture}.

In LaTeX we were using "Figure~\ref{img-sunset}".
(we even had a custom "figref" command: corresponding to "Figure~\ref{#1}")

If the caption is 1 line (about 10-15 words), then the option with the image number is much better than the text version.
I had a close look at issue #857. This has nothing to do with having such output:

<p>Link to Figure Image : <a href="#id_of_hyla_picture">Figure 1</a></p>

Is this tracked somewhere?

I needed a workaround for this issue.

My solution works directly on the HTML output (post-processing after the Asciidoctor toolchain).
I am manipulating the HTML-DOM with JSoup. Code shared in this Gist.

I have no clue of the Asciidoctor code, I cannot help in this domain.

I can imagine it could also be solved with a macro manipulating the Asciidoc AST before the final output. But the macro topic is too advanced for me for the moment.

By the way, I have also discovered that it is possible to provide a text when the anchor is defined: [[id,xreflabel]]

My images declaration looks like this:

 [Source, Asciidoc]
----
[[system_overview, Figure 000]]
.System Overview
image::system-overview.png[]

Check <<system_overview>>
----

This way I have a decent preview on GitHub or in Chrome.
And with my workaround, I have the desired final output.

Of course this is not working for the PDF output.