[Middleman 3] Middleman: image tag はテンプレートヘルパを使おう
Middleman や Rails プロジェクトで img tag を書く場合は、テンプレートヘルパを使おう。
を忘れるので memo.
Contents
Haml 記法で書くと
Framework なしの状態で Haml を利用する場合、例えばこんな感じで書けます。
%img(src="img.png" alt="")
Emmet では、{} 書式で展開されますね。
%img{:src => "img.png", :alt => ""}/
テンプレートヘルパをつかう
Middleman や Rails のプロジェクトならば、アセットヘルパ image_tag で書こう。
= image_tag("img.png", alt: "")
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 … /> の / がいらないんです
なんかあると思うのですがまた後で調べます。
どなたかご存じの方がいたら教えてください。
一括で置換したい
ありがとうございます。