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

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

Haml 記法で書くと

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

%img(src="img.png" alt="")

Emmet では、{} 書式で展開されますね。

%img{:src => "img.png", :alt => ""}/

File: REFERENCE — Haml Documentation

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

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

= image_tag("img.png", alt: "")

image_tag (ActionView::Helpers::AssetTagHelper) – APIdock

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

= link_to image_tag("img.png", alt: ""), "/about.html"

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

パスの変更

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

config.rb
config[:images_dir] = 'images/foo/bar/'

相対パスへ変更

このような絶対パスを

<img class="thumbnails" alt="写真 サムネイル" src="/images/img.png" />

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

config.rb
  # Use relative URLs
  activate :relative_assets

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

<img class="thumbnails" alt="写真 サムネイル" src="images/img.png" />

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

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

一括で置換したい

ありがとうございます。

Rubyのワンライナーを使って、HAMLの%img{ }をimage_tagに置換する方法 – Qiita

補遺