[Middleman 3] Middleman: image tag はテンプレートヘルパを使おう

Middleman や Rails プロジェクトで img tag を書く場合は、テンプレートヘルパを使おう。
を忘れるので memo.

[markdown]
## Haml 記法で書くと

Framework なしの状態で Haml を利用する場合、例えばこんな感じで書けます。

“`haml
%img(src=”img.png” alt=””)
“`

[Emmet](http://emmet.io/) では、`{}` 書式で展開されますね。

“`haml
%img{:src => “img.png”, :alt => “”}/
“`

> [File: REFERENCE — Haml Documentation](http://haml.info/docs/yardoc/file.REFERENCE.html#attributes)

## テンプレートヘルパをつかう

Middleman や Rails のプロジェクトならば、アセットヘルパ `image_tag` で書こう。

“`haml
= image_tag(“img.png”, alt: “”)
“`

> [image_tag (ActionView::Helpers::AssetTagHelper) – APIdock](http://apidock.com/rails/v4.1.8/ActionView/Helpers/AssetTagHelper/image_tag)

`image_tag` は `()` なしでも書けますが、`link_to` とセットで使うことが多いので、`()` 付きで書くのが一般的なようです。

“`haml
= link_to image_tag(“img.png”, alt: “”), “/about.html”
“`

リンクヘルパについては、別途まとめます。

### パスの変更

config.rb の `:images_dir` 設定が活かせるので、パスが変わってもかんたんに対応できます。

“`ruby:config.rb
config[:images_dir] = ‘images/foo/bar/’
“`

### 相対パスへ変更

このような絶対パスを

“`html

“`

config.rb に以下の設定を加えることで、

“`ruby:config.rb
# Use relative URLs
activate :relative_assets
“`

相対パスに一括で変更できます。

“`html

“`

## <img … /> の / がいらないんです

なんかあると思うのですがまた後で調べます。
どなたかご存じの方がいたら教えてください。

## 一括で置換したい

ありがとうございます。

> [Rubyのワンライナーを使って、HAMLの%img{ }をimage_tagに置換する方法 – Qiita](http://qiita.com/jnchito/items/0c59c9c0ff01a2dbf47e)

## 補遺

> * [Middleman: テンプレートヘルパ](http://middlemanapp.com/jp/basics/helpers/)
> * [Middleman: 公式サイトで紹介されている機能を確認する | deadwood](https://www.d-wood.com/blog/2014/02/25_5601.html#i-4)
> * [HAML Best Practices | The Rivalfox Competitor Intelligence Blog](http://blog.rivalfox.com/haml-best-practices/)
[/markdown]