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"]
参考
Author And Source
この問題について(Asciidoctorの画像関連 Tips - imageで別ウインドウにリンクを表示する、とか), 我々は、より多くの情報をここで見つけました https://qiita.com/syuuu/items/57b1b4654720a1b6faf0著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .