画像の属性を記述する
rehype-image-salt では画像の HTML 属性を独自の記法で記述します。
これは「Markdown の画像表記」「CMS のエディター」のような「 HTML の属性を記述できない」状況を想定しているためです。
基本
属性の記述を {} で囲み「Markdown の画像表記」「CMS のエディター」でも扱える場所へ埋め込むことを基本としてます。
{width="600" height="400" class="light-img"}
alt へ埋め込む
Wisywig なエディターでもalt は自由に記述できることが多いので、これを利用して埋め込みます。
<p><img src="/path/to/large_flower_vase.jpg" alt="大き目の花瓶{width="600" height="400" class="light-img"}"></p>
<p><img src="/path/to/sukiyaki.jpg" alt="{width="600" height="400" class="dark-img"}すき焼き"></p>
HTML サンプルでは " をエスケープしていますが、通常は CMS のエディターが処理すると思います。
block として埋め込む
remark-attr のように画像の直後に {...} block をべた書きすることもできます。
{width="600" height="400" class="light-img"}
{
width="600"
height="400"
class="dark-img"
}
{
width="400"
height="600"
class="dark-img"
}
<p><img src="/path/to/large_flower_vase.jpg" alt="大き目の花瓶">{width="600" height="400" class="light-img"}</p>
<p><img src="/path/to/sukiyaki.jpg" alt="すき焼き"><br>{<br>width="600"<br>height="400"<br>class="dark-img"<br>}
<p><img src="/path/to/taiyaki.jpg" alt="たい焼き"><br><p>{<br>width="400"<br>height="600"<br>class="dark-img"<br>}
</p></p>
block は直後のパラグラフにも記述できます。
block を複数行にする場合は「改行がパラグラフの区切りにならない」ように注意してください。
内部属性
いくつかの属性は rehype-image-salt 内で処理されます。
modifiers
modifiers の値としてクエリーパラメーターを記述するとJSON オブジェクトとして :modifiers へ展開します。また、imgix の Bae64 Variants 形式にも対応しています。
例
{
modifiers="blur64=NzA"
}
結果
<img src="https://...image.jpg" :modifiers="{"blur": "70"}">
data-salt-q , data-salt-qm
値を画像 URL のクエリーパラメーターとして追加します。画像 URL にクエリーパラメーターが存在する場合は以下のようになります。
data-salt-q- 元のパラメータを完全に置き換えるdata-salt-qm- 元のパラメーターとマージ(同一キーは上書き)
例
{
data-sat-q="blur64=NzA"
}
{
data-salt-qm="blur64=NzA"
}
結果
<p><img src="https://...image.jpg?blur64=NzA"></p>
<p><img src="https://...image.jpg?w=600&h=400&blur64=NzA"></p>
data-salt-thumb
画像ファイル(クエリーパラメータを除去したもの)へのリンク(<a> )を追加します。属性に値が記述されていた場合は、href にクエリーパラメータとして追加されます。
例
{
data-salt-thumb
}
{
data-salt-thumb="blur=70"
}
結果
<p><a href="https://...image.jpg" target="_blank" rel="noopener noreferrer"><img src="https://...image.jpg?w=600&h=400&blur=70"></a></p>
<p><a href="https://...image.jpg?blur=70" target="_blank" rel="noopener noreferrer"><img src="https://...image.jpg?w=600&h=400&blur=70""></a></p>
data-salt-max-w data-salt-max-h
属性 width height の最大サイズを指定します。
例(data-salt-max-w="1200")
{
width="4000" height="2000"
}
結果
<p><img src="https://...image.jpg" alt="林道" width="1200" height="600"></p>
data-salt-zenn-cap
Zenn の画像キャプション用に <em> で装飾されたテキストを追加します。
例
{
data-salt-zenn-cap="caption"
}
結果
<p><img src="https://...image.jpg><em>caption</em></p>