Added text overlays to the portfolio pieces

app/controllers/projects_controller.rb

@@ -7,5 +7,10 @@ def homepage
     @projects = Project.all
     @posts = Tumblr.feed[0..1]
   end
-
+
+  private
+
+    def resource
+      @project = Project.find_by_slug(params[:id])
+    end
 end

app/helpers/application_helper.rb

@@ -39,4 +39,28 @@ def render_tech_list(tags)
     end
   end
 
+  def portfolio_rollover_link(object, options={})
+    default_options = { :image_type => :project_thumb, 
+                        :cycle_array => ['first', 'second', 'third'], 
+                        :url => project_path(object),
+                        :title => object.title}
+    options = default_options.update(options)
+    # End Config merge
+
+    return unless object.is_a? Project
+    xhtml = Builder::XmlMarkup.new :target => out=(''), :indent => 2
+    xhtml.li(:class => cycle(*options[:cycle_array])) do |x|
+      x << render_portfolio_link(object.attachments.first.asset.url(options[:image_type]), options[:url])
+      x.div(:class => 'overlay') do |overlay| 
+        overlay << content_tag(:h4, link_to(options[:title], options[:url]))
+        overlay << content_tag(:p, link_to(options[:subtitle], options[:url])) unless options[:subtitle].blank?
+      end
+    end
+
+  end
+
+  def render_portfolio_link(attachment, url)
+    link_to(image_tag(attachment), url)
+  end
+
 end

app/models/project.rb

@@ -18,7 +18,8 @@ def setup_slug
   end
 
   def to_param
-    "#{id}-#{self.to_slug}"
+    title.to_url
   end
 
+
 end

app/stylesheets/screen.sass

@@ -278,6 +278,9 @@ section#projects
 
 			&:first-child
 				margin-left: 0px
+
+			&:hover
+				@include box-shadow(#666666, 0px, 0px, 20px)
 
 section#feed
 	display: block
@@ -376,6 +379,47 @@ section#projects-index
 
 			&:hover
 				@include box-shadow(#666666, 0px, 0px, 20px)
+
+ul 
+	li 
+		div.overlay
+			position: absolute
+			left: 10px
+			bottom: 30px
+
+			p
+				a
+					float: left
+					clear: both
+					background-color: #ffffff
+					padding:
+						top: 5px
+						right: 5px
+						bottom: 5px
+					font:
+						family: Georgia, serif
+						size: 12px
+					color: #9b9e8d
+					text-decoration: none
+
+			h4
+				a
+					font-size: 18px
+					font-weight: bold
+					padding:
+						top: 5px
+						right: 5px
+					margin:
+						bottom: -5px
+					letter-spacing: -1px
+					color: #a38056
+					background-color: #ffffff
+					float: left
+					clear: both
+
+					&:hover
+						text-decoration: none
+
 
 
 

app/views/projects/_project.html.erb

@@ -1,3 +1 @@
-<li>
-	<%= link_to image_tag(project.attachments.first.asset.url(:project_thumb)), project_path(project) %>
-</li>
+<%= raw portfolio_rollover_link(project) %>

app/views/projects/index.html.erb

@@ -1,7 +1,7 @@
 <section id="projects-index">
 	<ul>
 	<% collection.each do |project| %>
-		<%= content_tag(:li, link_to(image_tag(project.attachments.first.asset.url(:project_widethumb)), resource_path(project)), :class => cycle('first', ''))%>
+		<%= raw portfolio_rollover_link(project, :image_type => :project_widethumb, :cycle_array => ['first', 'second']) %>
 	<% end %>
 	</ul>
 </section>