not good but great

プログラミング、アート、映画・本の感想について書きます。

html.erbで<li>画像リンク</li>の作り方

htmlにrubyを埋め込んで、面倒な処理を簡単にするコードを書いた。<% %>で囲むのがめんどくさいが、いろいろ調べながらやってみた。

タグの生成

これはcontent_tagを使えばおk

content_tag :p, "Hellow world"

出力結果

<p>Hellow world</p>

リンクの生成

これはlink_toを使えばおk

<%= link_to "ほげほげ", "http://hogehoge.org/" %>

出力結果

<a href="http://hogehoge.org">ほげほげ</a>

イメージタグの生成

これはimage_tagを使えばおk

<%= image_tag("/images/hogehoge.png", :class => "sample") %>

出力結果

<img class="sample" src="/images/hogehoge.png" />

応用例

応用すると、画像リンクを生成、さらにはそれをliで囲むといったことができる。 以下は最近作ったWebページのサンプルである。画像をliで囲って表示させている。

<% file = "design/d_" %>
<% i = 1 %>
<% name = ["fabzine DM","Open Campus DM","ケーキ屋 DM","展覧会 DM","イベント DM","名刺"] %>
<% for n in name %>
   <%= content_tag :li,(link_to image_tag(file+i.to_s+".jpg",:width => "150",:height => "212",:alt => n),file+i.to_s+".jpg",:rel => "example2",:title => n) %>
   <% i = i + 1 %>
<% end %>

出力結果

<li><a href="design/d_1.jpg" rel="example2" title="fabzine DM"><img alt="fabzine DM" height="212" src="/assets/design/d_1.jpg" width="150" /></a></li>
<li><a href="design/d_2.jpg" rel="example2" title="Open Campus DM"><img alt="Open Campus DM" height="212" src="/assets/design/d_2.jpg" width="150" /></a></li>
<li><a href="design/d_3.jpg" rel="example2" title="ケーキ屋 DM"><img alt="ケーキ屋 DM" height="212" src="/assets/design/d_3.jpg" width="150" /></a></li>
<li><a href="design/d_4.jpg" rel="example2" title="展覧会 DM"><img alt="展覧会 DM" height="212" src="/assets/design/d_4.jpg" width="150" /></a></li>
<li><a href="design/d_5.jpg" rel="example2" title="イベント DM"><img alt="イベント DM" height="212" src="/assets/design/d_5.jpg" width="150" /></a></li>
<li><a href="design/d_6.jpg" rel="example2" title="名刺"><img alt="名刺" height="212" src="/assets/design/d_6.jpg" width="150" /></a></li>
広告を非表示にする