galerie de photos/photos (grille) avec rails?

Question

Je voudrais créer une galerie de photos avec une vue de la grille (style facebook) et je voudrais savoir si cela est réalisable avec des rails seulement ou si je devrais utiliser jquery pour le faire. J'utilise un trombone et je suis coincé en essayant d'afficher les photos en tant que grille.

Je serais très heureux si quelqu'un a un lien tutoriel ou un point de départ pour cela. (Je l'ai déjà mon point de vue de l'index affichant toutes les photos)

index.html.erb

<% title "All Photos" %> 

<table> 
    <% for photo in @photos %> 
    <tr> 
    <td><%= link_to image_tag(photo.image.url), photo %></td> 
     <td><%= link_to photo.name, photo %></td> 
    </tr> 
    <% end %> 
</table> 

Merci!

Answer 1

Cela ne dépend pas de Rails, car ce que vous avez à faire est simplement une question de balisage HTML.

Une table est probablement la mauvaise solution à ce problème - au moins de la façon dont vous l'avez exposé. Les lignes de table (<tr>) ne peuvent pas être représentées l'une à côté de l'autre en tant que colonnes. La solution courante ici est d'utiliser des divs flottants pour afficher votre contenu dans n'importe quel nombre de colonnes que vous désirez. Le code suivant est le même que ci-dessus, sauf en utilisant divs:

<div id="gallery"> 
    <% for photo in @photos %> 
    <div class="photo"> 
     <%= link_to image_tag(photo.image.url), photo %> 
     <%= link_to photo.name, photo %> 
    </div> 
    <% end %> 
</div> 

Puis, en utilisant simplement CSS, vous pouvez mettre vos images comme une grille. Un exemple est ici: http://www.alistapart.com/articles/practicalcss/

De là, vous pouvez améliorer l'implémentation de base avec JQuery ou d'autres CSS à goûter.

Answer 2

Voilà comment je l'ai fait ...

J'utilise Paperclip à la taille d'une vignette d'image, dans ce cas, la taille minuscule est 128x128, ainsi que le grand poste de CSSBakery. J'ai également les images définies pour avoir un lien vers l'image originale.

http://www.cssbakery.com/2010/07/image-grid-using-css-floats_6950.html https://github.com/thoughtbot/paperclip

À mon avis:

<div id="gallery"> 
    <ul id="grid"> 
    <% @images.each do |image| %> 
    <li><%= link_to image_tag(image.photo.url(:tiny)), image %></li> 
    <% end %> 
    </ul> 
</div> 

Im mon app/assets/stylesheets fichier CSS (lire le post www.cssbakery.com sur la grille css)

/* ------------------------------------------ 
     Grid 
--------------------------------------------- */ 

ul#grid { 
    padding: 0; 
    list-style: none; 
    margin: 20px auto 0; 
    width: 700px; 
    } 

#grid li { 
    float: left; 
    padding: 0; 
    margin: 0 5px 10px 5px; 
    } 

#grid li a { 
    display: block; 
    } 

#grid li img { 
    background-color: #64666a; 
    padding: 7px; margin: 0; 
    border: 1px dotted #58595b; 
    width: 128px; 
    height: 128px; 
    } 

#grid li a:hover img { 
opacity:0.3; filter:alpha(opacity=30); 
    } 

.grid_display { 
    padding: 20px; 
    margin-left: auto; margin-right: auto; margin-top:50px; margin-bottom:0; 
    /*background-color: #ffd7ce;*/ 
    width: 513px; 

    /*these two properties will be inherited by .grid_display h2 and .grid_display p */ 
    font-family: 'GraublauWeb', arial, serif; 
    text-align: center; 
    } 

div.grid_display h2 { 
    padding: 0; margin: 0; 
    clear: both; 
    font-size: 35px; 
    font-weight: normal; 
    color: #58595b; 
    background: none; 
    font-family: 'GraublauWeb', arial, serif; 

    /* reset for cascade effects that are trickling down from other h2's */ 
    text-transform: none; 
    letter-spacing: normal; 
    } 

.grid_display p { 
    margin:0; padding: 0; 
    font-size: 15px; 
    color: #58595b; 
    }