MERGED

app/helpers/application_helper.rb

@@ -1,12 +1,13 @@
 # encoding: UTF-8
 module ApplicationHelper
   
-  def validate_img_url image, size
+  def validate_img_url image, type, size
     image.each do |img|
       if img["size"] == size.to_s
         if img["#text"].empty?
-           return "/images/placeholder/artist.png"
+          return "/images/placeholder/#{type.to_s}.png"
         end
+
         return img["#text"]
       end
     end

app/views/search/index.html.haml

@@ -14,7 +14,7 @@
           - break if i >= 6
           %li
             = link_to "LINK" do
-              = image_tag validate_img_url(artist.image, :large)
+              = image_tag validate_img_url(artist.image, :artist, :large), :alt => artist.name
               %p
                 = trimString(artist.name, 22)
       %br.clean
@@ -37,7 +37,7 @@
           - break if i == 6
           %li
             .img
-              = image_tag validate_img_url(album.image, :medium)
+              = image_tag validate_img_url(album.image, :album, :medium)
             %p
               %span
                 = trimString(album.name, 38)
@@ -50,7 +50,7 @@
         - break if i >= 12
         %li
           = link_to "LINK" do
-            = image_tag validate_img_url(artist.image, :large)
+            = image_tag validate_img_url(artist.image, :artist, :large)
             %p
               = trimString(artist.name, 22)
     %br.clean
@@ -62,7 +62,7 @@
         - break if i == 16
         %li
           .img
-            = image_tag validate_img_url(album.image, :medium)
+            = image_tag validate_img_url(album.image, :album, :medium)
           %p
             %span
               = trimString(album.name, 38)

config/application.rb

@@ -13,7 +13,7 @@ module Nineminutes
     # -- all .rb files in that directory are automatically loaded.
 
     # Custom directories with classes and modules you want to be autoloadable.
-    # config.autoload_paths += %W(#{config.root}/lib)
+    config.autoload_paths += %W(#{config.root}/lib)
     # config.autoload_paths += Dir["#{config.root}/lib/LastFM/"]
     # config.autoload_paths << config.root.join('lib')
     

public/javascripts/application.js

@@ -12,6 +12,7 @@ $(document).ready(function(){
 
 $(window).load(function() {
   initSearchDropdown(); // dropdown for the search input
+	fitArtistImages(); // resize and resposition images (artists, album)
 });
 
 
@@ -22,7 +23,39 @@ $(window).load(function() {
 
 
 
+function fitArtistImages() {
+	$("ul.artists img").each(function() {
+		$(this).wrap("<div />");
+		divWidth = 147, divHeight = 94;
+		
+		// use this instead of $(this).width(); because .width() of hidden images is zero!
+		width = this.width;
+		height = this.height;
 
+		if( width < divWidth ) {
+			scaleRatio = width / divWidth;
+			width = divWidth;
+			height /= scaleRatio;
+		}
+		
+		if ( height < divHeight ) {
+			scaleRatio = height / divHeight;
+			height = divHeight;
+			width /= scaleRatio;
+		}
+				
+		posX = - (width - divWidth) / 2;
+		posY = - (height - divHeight) / 8;
+				
+		$(this).css({
+			"position" : "absolute",
+			"width" : width,
+			"height" : height,
+			"top" : posY,
+			"left" : posX
+		});
+	});
+}
 
 
 // search dropdown

public/stylesheets/layout.css

@@ -214,6 +214,7 @@ a { text-decoration: none; color: #7d8791; }
   float: left;
   margin: 0 13px 20px 0;
 }
+.artists div { position: relative; width: 147px; height: 94px; overflow: hidden; }
 .artists img { float: left; }
 .artists p
 {