0

I'm trying to figure out how to setup the layout for a picture gallery. The gallery contains thumbnails that link to the individual pictures. Images might be portrait or landscape. I'm struggling to figure out how I can setup the thumbnail gallery to accommodate both possible layouts.

I've been searching and have found two approaches that each get me half of what I want. The problem now is: how do I get everything I want.

So, this works for getting the links.

Markup:

<% @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;
}

This works for displaying both landscape and portrait images.

In the markup:

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

(I'd love to get this styling out of the markup. Feels dirty having it there, but I've got content generating dynamically)

Cœur
  • 37,241
  • 25
  • 195
  • 267
Ben Downey
  • 2,575
  • 4
  • 37
  • 57
  • Which div have you added styling to? It's not the thumbnail div, right? Does it surround each image? I've done something similar to this recently and I think I can help if you could show me where your div is at exactly. – lflores Apr 14 '13 at 01:55
  • Yes, I need it to surround each image. Right now it's the thumbnail div, but I'm up for changing it around as needed. – Ben Downey Apr 14 '13 at 02:04
  • I've updated my answer to show you a couple options as well as how to use the thumbnail div for styling the width and height. – lflores Apr 14 '13 at 02:24

1 Answers1

1

You can easily place the width and height into the css file. To do that you would want to add an id or class to your image so it would like something like this: 

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

With the css looking like this:

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

Or, if your div is the thumbnail div your css would look like this: 

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

The issue comes with the background image. You can't place dynamic code like <% sing_image(pic) %> into the stylesheet. You may want to look at this SO post: Pulling CSS assets (like background images) from the database in a Rails app?.

Or you could consider not making it a background image. Instead changing the markup (with the same css as mentioned above) to look like this: 

<% @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 %>

In the css you could add:

.img-styling {
   your styling here
}

Does that help you?

Community
  • 1
  • 1
lflores
  • 3,770
  • 3
  • 19
  • 24
  • Thanks for your help on this. This approach is new to me and I totally dig it: ` <%= link_to pic do %>` . Thanks for sharing! – Ben Downey Apr 14 '13 at 14:05
  • I'm so glad it was helpful! – lflores Apr 15 '13 at 17:36
  • Can I ask how you styled your thumbnails? I ended up setting the size in the image_tag, but it tends to distort the landscape pics. I haven't been able to find a good solution for displaying both landscape and portrait pics. – Ben Downey Apr 20 '13 at 20:46
  • I would love to help. How are you pulling in your images? Are you using a gem like paperclip or carrierwave? Or some other way? – lflores Apr 22 '13 at 04:28
  • Right now I'm pulling images from a Picasa album. I get some help from this gem, which is a wrapper for the Picasa API: https://github.com/morgoth/picasa – Ben Downey Apr 22 '13 at 16:16
  • 1
    I'm not familiar with this gem. When you pull them into your app is there a way to constrain it to a certain size without distorting it? I looked at the documentation to see if I could see anything but it was pretty sparse. That is typically the easiest way. Here's another great solution using html/css: http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped?rq=1 – lflores Apr 28 '13 at 22:31
  • I'm so glad that you got it to work! Thanks for letting me know! – lflores May 08 '13 at 04:35