Writing attributes to images

HTML attributes for images in rehype-image-salt is represented by its own notation.

It is to avoid situations such as "HTML attributes cannot be described" with "images in Markdown" and "images in CMS editor"

Basic

Enclose attribute in {}. Embed it in a place that can be handled by "images in Markdown" and "images CMS editor".

{width="600" height="400" class="light-img"}

Embed to alt

In many cases, alt can be freely written even in a Wisywig editor, so use this to embed it.

![大き目の花瓶{width="600" height="400" class="light-img"}](/path/to/large_flower_vase.jpg)

![{width="600" height="400" class="dark-img"}すき焼き](/path/to/sukiyaki.jpg)

<p><img src="/path/to/large_flower_vase.jpg" alt="大き目の花瓶{width=&#x22;600&#x22; height=&#x22;400&#x22; class=&#x22;light-img&#x22;}"></p>
<p><img src="/path/to/sukiyaki.jpg" alt="{width=&#x22;600&#x22; height=&#x22;400&#x22; class=&#x22;dark-img&#x22;}すき焼き"></p>

Embed as block

The {...} block can also be written at after the image, such as remark-attr.

![大き目の花瓶](/path/to/large_flower_vase.jpg){width="600" height="400" class="light-img"}

![すき焼き](/path/to/sukiyaki.jpg)
{
  width="600"
  height="400"
  class="dark-img"
}

![たい焼き](/path/to/taiyaki.jpg)

{
  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>

Internal attributes

Some attributes are handled within rehype-image-salt.

modifiers

Query parameters described as modifiers values are expanded to :modifiers as JSON objects. It also supports the Bae64 Variants format of imgix.

example

![林道](https://...image.jpg){
  modifiers="blur64=NzA"
}

result

<img src="https://...image.jpg" :modifiers="{&#x22;blur&#x22;: &#x22;70&#x22;}">

data-salt-q , data-salt-qm

Add the value as a query parameter for the image URL. If the image URL has query parameters, add them as follows:

• data-salt-q - replace parameters
• data-salt-qm - merge parameters(overwrite the same key)

example

![林道](https://...image.jpg?w=600&h=400){
  data-sat-q="blur64=NzA"
}

![林道](https://...image.jpg?w=600&h=400){
  data-salt-qm="blur64=NzA"
}

result

<p><img src="https://...image.jpg?blur64=NzA"></p>
<p><img src="https://...image.jpg?w=600&#x26;h=400&#x26;blur64=NzA"></p>

data-salt-thumb

Add a link(<a>) to the image file(without the query parameters). If the attribute is written, it will be added to the href as a query parameter.

example

![林道](https://...image.jpg?w=600&h=400&blur=70){
  data-salt-thumb
}

![林道](https://...image.jpg?w=600&h=400&blur=70){
  data-salt-thumb="blur=70"
}

result

<p><a href="https://...image.jpg" target="_blank" rel="noopener noreferrer"><img src="https://...image.jpg?w=600&#x26;h=400&#x26;blur=70"></a></p>
<p><a href="https://...image.jpg?blur=70" target="_blank" rel="noopener noreferrer"><img src="https://...image.jpg?w=600&#x26;h=400&#x26;blur=70""></a></p>

data-salt-max-w data-salt-max-h

Apply max size to width height

example(data-salt-max-w="1200")

![林道](https://...image.jpg){
  width="4000" height="2000"
}

result

<p><img src="https://...image.jpg" alt="林道" width="1200" height="600"></p>

data-salt-zenn-cap

Append the text surrounded <em> as Zenn style image captions

example

![林道](https://...image.jpg){
  data-salt-zenn-cap="caption"
}

result

<p><img src="https://...image.jpg><em>caption</em></p>