Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    imgtagpublic

    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="" />

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

    install

    npm i imgtag

    Downloadsweekly downloads

    3

    version

    0.1.3

    license

    MIT

    homepage

    github.com

    last publish

    collaborators

    • avatar