0

画像ギャラリーのレイアウトを設定する方法を理解しようとしています。ギャラリーには、個々の写真にリンクするサムネイルが含まれています。画像は縦向きまたは横向きの場合があります。両方の可能なレイアウトに対応するようにサムネイル ギャラリーをセットアップする方法を理解するのに苦労しています。

私は探していて、それぞれが私が望むものの半分を得る2つのアプローチを見つけました. 今の問題は、どうすれば欲しいものをすべて手に入れることができるかということです。

したがって、これはリンクを取得するために機能します。

マークアップ:

<% @pics.each do |pic| %>
  <div class="thumbnail">
     <%= link_to (image_tag pic.url), pics_path(pic: single_image(pic)) %> 
  </div>
<% end %>

CSS:

.thumbnail {
  margin: 30px;
}

これは、横向きと縦向きの両方の画像を表示する場合に機能します。

マークアップで:

<div style="width:200px; 
            height:200px;
             background: url(<%= single_image(pic) %>) no-repeat center;">

(このスタイリングをマークアップから外したいと思っています。そこにあると汚い気がしますが、動的に生成されるコンテンツがあります)

4

1 に答える 1

1

幅と高さを css ファイルに簡単に配置できます。これを行うには、画像に id またはクラスを追加して、次のようにします。 

<%= link_to (image_tag pic.url), pics_path(pic: single_image(pic)), class: "class-name" %>

css は次のようになります。

.class-name {
     width: 200px;
     height: 200px;
 }

または、div がサムネイル div の場合、css は次のようになります。

.thumbnail {
   margin: 30px;
   width: 200px;
   height: 200px;
}

問題は背景画像に付属しています。スタイルシートのような動的コードを配置することはできません<% sing_image(pic) %>。この SO 投稿をご覧になることをお勧めします: Pulling CSS assets (like background images) from the database in a Rails app? .

または、背景画像にしないことを検討することもできます。代わりに、マークアップを (上記と同じ css を使用して) 次のように変更します。

<% @pics.each do |pic| %>
  <div class="thumbnail">
     <%= link_to pic do %>
        <%= image_tag pics_path(pic: single_image(pic), :class => 'img-styling') %> 
     <% end %>
  </div>
<% end %>

css に次を追加できます。

.img-styling {
   your styling here
}

それは役に立ちますか？

于 2013-04-14T02:09:11.997 に答える