Asciidoctorの画像関連 Tips - imageで別ウインドウにリンクを表示する、とか

概要

asciidoctor で image 関連でメモしていることを共有します。
いくつかは、ぐぐってもさっとは出てこない気はするので。

画像に関しては VS-Code だと PasteImage 拡張機能 があるとペタペタと張りやすくなります。なお、デフォルトの画像ファイル名が英語圏向けになっていて気持ち悪いので、気になる人は AsciiDoc 文書をVS-Codeの拡張機能でスクリーンショットを取り込むの記事を参考にしてください。

Tips

Asciidoctorのimageで別ウインドウにリンクを表示する

次のように書く。

[#img-sunset] 
.A mountain sunset 
[link=https://www.flickr.com/photos/javh/5448336655,window=_blank] 
image::sunset-500x332.jpg[Sunset,300,200]

または

[#img-sunset] 
.A mountain sunset
image::sunset-500x332.jpg[Sunset,300,200,link=https://www.flickr.com/photos/javh/5448336655,window=_blank]

表示例

補足

以下の理由で、前者の方がおすすめです。

• 理由は一行を短くできる
• リンク先は画像そのものとは無関係のこともあるので情報として別々の行にあったほうが良い

また、window 属性は link属性に従属する関係にあって windows 属性は不要なら省略しても良いから link=～,window=_blank の書き方は自然です。
ただ、リンクは長くなりがちなので window=_blank,link=～ としたほうが編集時の可読性は高くなります。

応用例とか
こんな風に使っています。

• メモした画像の参照元をリンクを張る
• 地理系のノートで地図画像に対して OpenStreetMap の地図座標にリンクを張る

箇条書き中に画像を表示する

前者がブロック指定で、後者がインライン指定です。

* block
+
image::https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[Tux,25,35]
+
image::https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[Tux,25,35,align=center]
+
image::https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[Tux,25,35,align=right]
* inline +
image:https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[Tux,25,35]
image:https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[Tux,25,35]

補足

• ブロック指定だと align が使えます
  箇条書き中だと center にしたいとかはあるかもしれません。

title属性

実験したところ、こんな感じです。

	block image	inline image
title	属性なし	属性を設定可能

インライン画像のtitleパラメーターの扱い

属性が設定可能なのはインライン画像なんで、そっちで有効になる書き方を貼ります。

image:sunset-500x332.jpg[Sunset(alt),300,400,title="Sunset(title)"]

title 属性をつけると ToolTip でます(Google Chromeで確認)。

imgタグ的にはこんな感じです。

<span class="image"><img src="images/sunset-500x332.jpg" alt="Sunset(alt)" width="300" height="400" title="Sunset(title)"></span>

ちなみに次の書き方では title属性はつきません。段落名として解釈されるみたいです。

[title="Sunset(title)"]
image:sunset-500x332.jpg[Sunset(alt),300,400]

<div class="paragraph">
<div class="title">Sunset(title)</div>
<p><span class="image"><img src="images/sunset-500x332.jpg" alt="Sunset(alt)" width="300" height="400"></span></p>
</div>

ブロック画像のtitleパラメーターの扱い

以下、同じように指定しても title属性は設定されません。

image::sunset-500x332.jpg[Sunset(alt),300,400,title="Sunset(title)"]

具体的には、こんな風に imageblock クラスのブロック中にテキストで表示されます。title属性があるとツールチップが出てくるんですが、その内容を表示しているからいらないという判断なのかもしれません。(見栄え上はそうなのですが、タグの意味的には違うので……ちょっとね。)

<div class="imageblock">
<div class="content">
<img src="images/sunset-500x332.jpg" alt="Sunset(alt)" width="300" height="400">
</div>
<div class="title">Figure 2. Sunset(title)</div>
</div>

download icon

icon:download[link="https://rubygems.org/downloads/asciidoctor-1.5.2.gem"]

表示例

YouTube動画を埋め込む

video::r18Gi8lSkfM[youtube, title="Fourier Transform, Fourier Series, and frequency spectrum", width=640, height=480]

表示例

音声を埋め込む

こんな感じです。
注意点としては imagesdir が音声ファイルにも適用されます。

audio::発音.mp3[options="controls"]

参考

• Images | Asciidoctor User Manual