Images squares

app/assets/javascripts/application.js

@@ -13,7 +13,7 @@
 //= require jquery
 //= require jquery_ujs
 
-//= require ./shared/jquery.masonry.min.js
+
 
 
 
@@ -48,15 +48,7 @@ $(document).ready(function(){
 	
 	
 
-	var $container = $('#index_images');
 	
-	$container.imagesLoaded( function(){
-	  $container.masonry({
-	    itemSelector : '.box',
-  isAnimated: true,
-  isFitWidth: true
-	  });
-	});
 
 
 });

app/assets/stylesheets/application.css.scss

@@ -16,6 +16,24 @@ body{
 	font-family:Palatino, Georgia;
 	
 	
+	#index_images{
+	
+	margin:4px;
+	img{
+	padding:4px;
+	margin:0;
+	display:block;
+	float:left;
+	opacity:0.9;
+	&:hover{
+	opacity:1;
+	
+	}
+	}
+	
+	}
+	
+	
 	#admin_over{
 	
 	.ace_editor{

app/controllers/portfolios_controller.rb

@@ -5,7 +5,11 @@ class PortfoliosController < ApplicationController
   
   
   def index
-    @index_images = PortfolioImage.order("Created_at DESC").limit(20)
+    @index_images = PortfolioImage.order("Shoot_at DESC").limit(20)
+    
+    PortfolioImage.all.each do |user|
+      #user.photo.recreate_versions!(:square)
+    end
   end
   
   def show

app/uploaders/image_uploader.rb

@@ -57,6 +57,9 @@ class ImageUploader < CarrierWave::Uploader::Base
 	version :thumb do
 		process :resize_to_limit => [300, 300]
 	end
+	version :square do
+		process :resize_to_fill => [400, 400]
+	end
   
 
 

app/views/portfolios/index.html.haml

@@ -1,5 +1,25 @@
+%br
 %h2 Dernières images
 
-#index_images{:style => "margin:auto;"}
+#index_images
+
+	
+		
+		
 	-@index_images.each do |img|
-		.box=image_tag(img.photo.thumb.url, :style => "width:150px;float:left;padding:5px;")
+		=link_to image_tag(img.photo.square.url), img.portfolios.first.path
+	%p{:style => "clear:both;height:2px;"}
+	:javascript
+		function size_index_images(){
+			width = $('#index_images').width();
+			columns = Math.ceil(width/200 * 1);
+			max_width = Math.floor((width-(columns*8))/columns);
+		
+			$('#index_images img').css("width", max_width+"px");
+		};
+		size_index_images();
+		
+		$(window).bind('resize',function(){
+			size_index_images();
+		
+		});