Catalogo de imagenes a 3 columnas

[Gabriel Rodriguez]

Hola gente,

Estoy mostrando un catallogo de fotos en una aplicación Sinatra actualmente en 1 sola columna

Queria mostrarlo a 3 columnas (tipo Amazon) y se me esta complicando

el codigo de la vista .erb es el siguiente :

                    <% @cat.db.each do |item| %>  
                        <tr id="ItemsCatalogo">                                                           
                            <td>
                                <img src="/<%= item.imagen %>" >
                            </td>
                         </tr>
                    <% end %>

probe algo muy basico como lo siguiente :
                               
                    <% @cat.db.each do |item| %>  
                        <tr id="ItemsCatalogo">                                                           
                            <td>
                                <img src="/<%= item.imagen %>" >
                                <% next %>
                            </td>
                            <td>
                                <img src="/<%= item.imagen %>" >
                                <% next %>
                            </td>
                            <td>
                                <img src="/<%= item.imagen %>" >
                                <% next %>
                            </td>
                         </tr>
                    <% end %>

Pero me sigue mostrando las imagenes una debajo de la otra

Gracias por los aportes

Gabriel

[Hernan Fernandez]

Hola

algo asi debería andar

<% @cat.db.in_groups_of(3).each do |group| &>

  <tr>

  <% group.each do |item| %>

    <td><%= img_tag item.image %></td>

  <% end %>

  </tr>

<% end %>

Saludos

Hernan

2013/5/23 Gabriel Rodriguez <prologic...@gmail.com>

Gabriel

--
Has recibido este mensaje porque estás suscrito al grupo "rubysur" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus correos electrónicos, envía un correo electrónico a rubysur+u...@googlegroups.com.
Para obtener más opciones, visita https://groups.google.com/groups/opt_out.
 
 

[Alfonso]

Hola, me parece que el "<% next %>" te pasa al siguiente ciclo del loop, así que el resto del código que viene después no se ejecuta, así que está saliendo algo como:
  <tr id="ItemsCatalogo">
    <td>
      <img src="imagen_1">
  <tr id="ItemsCatalogo">
    <td>
      <img src="imagen_2">
....
y por eso se ve en una sola columna. Fijate en el html generado, a ver si es algo así.

Por lo que estuve viendo, 'in_groups_of' es de Rails. En 'plain' Ruby podrías hacer algo así:
    <table>
      <% @cat.db.each_slice(3) do |row_items| %>
        <tr>
          <% row_items.each do |item| %>

            <td>
              <%= img_tag item.image %>
            </td>
          <% end %>
        </tr>
      <% end %>

    </table>

Lo que me parece un poco desprolijo en este caso es usar una tabla, porque las filas no representan 'entidades' y las columnas no son 'atributos', y está por una cuestión de diseño. Para estos casos, me parece preferible usar 'divs'. Quedaría algo así:

    <div class='gallery'>
      <% n_columns = 3 %>
      <% column_height = @cat.db.count/n_columns + 1 %>
      <% @cat.db.each_slice(column_height) do |column_items| %>
        <div class='gallery-column'>
          <ul class='unstyled'>                                                                                                                     
            <% column_items.each do |item| %>
              <li>
                <%= img_tag item.image %>
              </li>
            <% end %>
          </ul>
        </div>
      <% end %>
    </div>

Si usás algún framework, no necesitas editar el css, es cuestión de agregar algunas clases nomás.

Saludos, Alfonso.

[@cbertelegni]

Hola, como decia chubako , el usar una tabla en este caso no suma a la semántica del HTML ya que no son datos tabulados los que estas mostrando.

Proba con esto:

<style>

ul#listado { display: block; overflow: hidden; list-style: none;  }

ul li { width: 30%; float: left; margin: 10px 1.5%;/* height: 300px */} /* el heigth descomentalo y pone el que necesites */

ul li img { width: 90%; margin: 0 auto; display: block;}

</style>

<ul id="listado">                                                                                                                      

   <% @cat.db.each do |item| %>   

        <li>

        <!-- aca podes poner un <h2> como title de la img -->

        <%= img_tag item.image %>

        </li>

   <% end %>

</ul>

las tres filas estan con un ancho dinamico asi que se te va a ajustar a cualquier contexto.

Espero te sirva.

Saludos!

[Gabriel Rodriguez]

Gracias chicos,

Tal como ejemplificó chubako el slice(3) anda joya

Ahora voy a probar la opción usando el style como dice @cbertelegni

Muchas gracias.
Gabriel

El jueves, 23 de mayo de 2013 10:59:01 UTC-3, Gabriel Rodriguez escribió:

[@gr-sinatra]

La opción dell <style> anda muy bien, el codigo se reduce notablemente y se ajusta al contexto tal como dice @cbertelegni, sin duda tendré que investigar CSS mas a fondo.

Muchas Gracias.

El jueves, 23 de mayo de 2013 10:59:01 UTC-3, Gabriel Rodriguez escribió:

[@cbertelegni]

Buenisimo!
Saludos.