refs #20 タグ一覧: 画像のアスペクト比を修正

app/assets/stylesheets/tags.css.scss.erb

@@ -48,38 +48,59 @@ li.group_box {
       cursor: pointer;
 
       img {
-        height: 100%;
+        max-width: none;
       }
     }
   }
 
   .sub_image_boxes {
+    $width: $group_box_width;
+    $height: $group_box_height / 3 - 1;
+
     display: inline-block;
-    width: $group_box_width;
-    height: $group_box_height / 3 - 1;
+    width: $width;
+    height: $height;
     overflow: hidden;
-    background-color: #ccc;
     border-top: 1px solid #aaa;
-    position: relative;
-    bottom: $group_box_width / 3;
+    position: absolute;
+    top: $width - $height;
 
-    a {
+    li {
       display: inline-block;
       width: $group_box_width / 3;
       height: 100%;
-      position: relative;
-      cursor: pointer;
+      overflow: hidden;
+
+      &:first-child {
+        @include border-bottom-left-radius(5px);
+      }
+
+      &:last-child {
+        @include border-bottom-right-radius(5px);
+      }
 
       &:nth-child(even) {
         width: $group_box_width / 3 - 2;
         border-left: 1px solid #aaa;
         border-right: 1px solid #aaa;
       }
+    }
+
+    a {
+      display: block;
+      width: $group_box_width / 3;
+      height: 100%;
+      cursor: pointer;
+      background-color: #fff;
 
       img {
-        width: 100%;
+        max-width: none;
         @include border-radius(0);
       }
+
+      &:hover {
+        background-color: #fff;
+      }
     }
   }
 }

app/models/clip.rb

@@ -84,9 +84,7 @@ def url
     self.image.try(:url) || @url
   end
 
-  def thumb_size_for_style_sheet
-    self.image.thumb_size_for_style_sheet
-  end
+  delegate :thumb_size_for_style_sheet, to: :image
 
   def create_html_only_images
     images = [ @url ] if @url

app/models/image.rb

@@ -25,17 +25,44 @@ def create_thumb_cache_file
     image.write self.thumb_path
   end
 
-  def thumb_width
-    Settings.thumb_width
+  def thumb_width(size_type=nil)
+    case size_type
+    when :tag
+      return Settings.thumb_width if self.thumb_width < self.thumb_height
+      (self.width * (Settings.thumb_width / self.height.to_f)).floor
+    else
+      Settings.thumb_width
+    end
   end
 
-  def thumb_height
+  def thumb_height(size_type=nil)
     return 0 if self.width.zero? || self.height.zero? # for 下位互換
-    (self.height * (self.thumb_width / self.width.to_f)).floor
+    case size_type
+    when :tag
+      return self.thumb_height if self.thumb_width < self.thumb_height
+      Settings.thumb_width
+    else
+      (self.height * (self.thumb_width / self.width.to_f)).floor
+    end
   end
 
-  def thumb_size_for_style_sheet
+  def thumb_size_for_style_sheet(size_type=nil)
     return "width: #{self.thumb_width}px;" if self.thumb_height.zero? # for 下位互換
-    "width: #{self.thumb_width}px; height: #{self.thumb_height}px;"
+    case size_type
+    when :tag, :tag_small
+      width = self.thumb_width(:tag)
+      height = self.thumb_height(:tag)
+      box_size = Settings.thumb_width
+      if size_type == :tag_small
+        width = (width / 3.0).floor
+        height = (height / 3.0).floor
+        box_size = (box_size / 3.0).floor
+      end
+      width_offset = width - box_size
+      height_offset = height - box_size
+      "width: #{width}px; height: #{height}px; margin-left: -#{width_offset / 2}px; margin-top: -#{height_offset / 2}px;"
+    else
+      "width: #{self.thumb_width}px; height: #{self.thumb_height}px;"
+    end
   end
 end

app/views/base/_tag_wall.html.slim

@@ -12,11 +12,17 @@
             | クリップ
         .image_box
           - clip = tags.shift.clip
-          = link_to image_tag(image_path(clip.image), alt: clip.title), tag_path(user_id: @user, name: tag_name)
+          = link_to image_tag(image_path(clip.image), alt: clip.title, style: clip.thumb_size_for_style_sheet(:tag)), tag_path(user_id: @user, name: tag_name)
           - if tags.size.nonzero?
-            .sub_image_boxes
-              - tags.take(3).map(&:clip).each do |clip|
-                = link_to image_tag(image_path(clip.image), alt: clip.title), tag_path(user_id: @user, name: tag_name)
+            ul.sub_image_boxes
+              - clips = tags.take(3).map(&:clip)
+              - clips += [ nil ] * 3
+              - clips.take(3).each do |clip|
+                li
+                  - if clip
+                    = link_to image_tag(image_path(clip.image), alt: clip.title, style: clip.thumb_size_for_style_sheet(:tag_small)), tag_path(user_id: @user, name: tag_name)
+                  - else
+                    = link_to '', tag_path(user_id: @user, name: tag_name)
 
   #page-nav
     = link_to 'next', page: @tags.next_page if @tags.respond_to?(:next_page) && @tags.next_page.present?