imgtag

Making html image tags.

imgtag

HTML(もしくは Jade )のimgタグをジェネレートしてくれる Node モジュール。

$ npm install -g imgtag
  1. ジェネレートしたい画像群があるディレクトリにコマンドラインから移動(cd)する。
  2. imgtag とコマンドを入力すると、下記のようなタグがCLI上にジェネレートされる。
<img src="img/blk1_pic1.png" width="190" height="190" alt="" />
<img src="img/blk1_pic2.png" width="190" height="190" alt="" />
<img src="img/blk1_pic3.png" width="190" height="190" alt="" />
引数内容
-p (--path)ジェネレートされるimgタグに記載されるパス デフォルトは img/
-t (--type)ジェネレートされるタグタイプをHTMLかJadeか選択。html / jade デフォルトは html
-r (--isRetina)Retina用に画像サイズを1/2にする。true/false デフォルトは false
-h (--isHeight)height属性なしで、width属性をMath.roundした状態で出力(おもにRetinaサイズ用) 。 true/false デフォルトはfalse
-f (--isFile)外部ファイル出力。true/false デフォルトはfalse。trueの場合はimg.txtに出力される

1.現在デスクトップにいて、hogehoge/common/img ディレクトリ内の画像のHTMLタグをhogehoge/index.htmlから参照されるパスでジェネレートしたい。

$ cd hogehoge/common/img
$ imgtag -p common/img

ジェネレート結果

<img src="common/img/blk1_pic1.png" width="190" height="190" alt="" />
<img src="common/img/blk1_pic2.png" width="190" height="190" alt="" />
<img src="common/img/blk1_pic3.png" width="190" height="190" alt="" />

2.現在デスクトップにいて、hogehoge/common/img ディレクトリ内の画像のJadeタグをhogehoge/index.htmlから参照されるパスでジェネレートしたい。

$ cd hogehoge/common/img
$ imgtag -p common/img -t jade

ジェネレート結果

img(src="common/img/blk1_pic1.png" width="190" height="190" alt="")
img(src="common/img/blk1_pic2.png" width="190" height="190" alt="")
img(src="common/img/blk1_pic3.png" width="190" height="190" alt="")

3.現在デスクトップにいて、hogehoge/common/img ディレクトリ内の画像のHTMLタグをhogehoge/index.htmlから参照されるパスで、サイズは Retinaディスプレイに対応するよう半分のサイズでジェネレートしたい。

$ cd hogehoge/common/img
$ imgtag -p common/img -r true

ジェネレート結果

<img src="common/img/blk1_pic1.png" width="95" height="95" alt="" />
<img src="common/img/blk1_pic2.png" width="95" height="95" alt="" />
<img src="common/img/blk1_pic3.png" width="95" height="95" alt="" />

※ Retinaモードで、元々の画像サイズが奇数だと小数点になってしまいます。このへんのテクニックを使って事前に画像サイズを偶数化することをおすすめします。

HTML - 画像が奇数ピクセルだとスマホ表示でにじむので、偶数に変更するnodeスクリプト - Qiita

4.3の条件で、Retina用に画像を偶数にするのが面倒なのでheight属性なしでwidth属性も整数で出力したい。

$ cd hogehoge/common/img
$ imgtag -p common/img -r true -h true

ジェネレート結果

<img src="common/img/blk1_pic1.png" "width="95" "alt="" />
<img src="common/img/blk1_pic2.png" "width="95" "alt="" />
<img src="common/img/blk1_pic3.png" "width="95" "alt="" />

※ 少数値は四捨五入されます。