1

So, I have 'thumbnails' of images on a page. The images are resized via CSS, hence the quotes on 'thumbnails'. Sometimes the images are tall, and sometimes they're wide. Obvious, right?

Right now, I'm handling this, but it's slow. Tell me there's a better way.

_photo.html.erb (partial to call <%= render '@photos' %>)

<% image_size = FastImage.size(photo.image_url) %>
<% if image_size[0] > image_size[1] %>
  <%= link_to image_tag(photo.image_url, class: 'wide'), photo if photo.image_url %>
<% else %>
  <%= link_to image_tag(photo.image_url, class: 'tall'), photo if photo.image_url %>
<% end %>

and in the CSS...

img {
  &.tall {
    max-width: 220px;
    min-width: 220px;
    position: relative;
    top: -20%;
    left: -10px;
  }
  &.wide {
    max-height: 220px;
    min-height: 220px;
    position: relative;
    left: -20%;
    top: -10px;
  }
}

I already said, it works. When I call that page, though, it has to think about it, and there are only 3 photos. Obviously not a good solution. I'd also like to center the image in it's little 200px containter. My way just feels so... crude.

Thoughts?

Dudo
  • 4,002
  • 8
  • 32
  • 57
  • what are the filesize of the images? – ragnika Aug 29 '13 at 03:38
  • depends... 200k to 3mb? – Dudo Aug 29 '13 at 03:43
  • Ignore my other comments, didn't read your code properly. In the above case, I'd instead store the image filesizes with the model, then use: `photo.filesize`. Speaking on quanity/size of images on the page, be sure to create appropriate versions of your files on upload/processing. It is wasteful to downsize the dimensions of a 3mb image using CSS - that will not reduce the transfer size. – Damien Roche Aug 29 '13 at 03:54
  • What Damien said, the image is still 3mb even if you resize it with css. As for centering image in its container. The following style works `{margin-left: auto; margin-right: auto; display: block; }` – ragnika Aug 29 '13 at 03:58
  • So, I wasn't creating the thumnail version. Bottom line, I'm gonna have to do that. That still leaves the question of positioning the image. When I talk about size, I'm talking dimensions. A wide image i'm going to want to move to the left. A Tall image, I'm going to want to move up. – Dudo Aug 29 '13 at 04:03
  • anything handy for vertical centering, @Neet324? – Dudo Aug 29 '13 at 04:13
  • [try one of the answers from this one](http://stackoverflow.com/questions/8665798/vertical-center-an-image-without-knowing-dimensions) – ragnika Aug 29 '13 at 04:49

1 Answers1

0

Maybe you can try to use javascript DOM :

Set Class

document.getElementById("img").className = "tall";

Add Class

document.getElementById("img").className += "wide";

Remove Class

document.getElementById("img").className = "";
Martin Yang
  • 11
  • 1