diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 7423133..02da1cd 100644 --- a/app/helpers/application_helper.rb +++ b/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 diff --git a/app/views/search/index.html.haml b/app/views/search/index.html.haml index 066d163..8c506c5 100644 --- a/app/views/search/index.html.haml +++ b/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) diff --git a/config/application.rb b/config/application.rb index 657e629..7aaa421 100644 --- a/config/application.rb +++ b/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') diff --git a/public/javascripts/application.js b/public/javascripts/application.js index 748fa99..31f598e 100644 --- a/public/javascripts/application.js +++ b/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("
"); + 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 diff --git a/public/stylesheets/layout.css b/public/stylesheets/layout.css index 05904a2..ca06456 100644 --- a/public/stylesheets/layout.css +++ b/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 {