Pretty Pinterest Pins Masonry layout patch

masonry.patch

Index: pretty-pinterest-pins.php
===================================================================
--- pretty-pinterest-pins.php	(revision 1172836)
+++ pretty-pinterest-pins.php	(working copy)
@@ -4,7 +4,7 @@
  * @version 1.3
  */
 /*
-Plugin Name: Pretty Pinterest Pins
+Plugin Name: Pretty Pinterest Pins Custom
 Description: Display your latest pins from Pinterest in your sidebar.
 Author: Jodi Wilkinson
 Plugin URI: http://wordpress.org/extend/plugins/pretty-pinterest-pins/
@@ -12,6 +12,10 @@
 Author URI: http://jodiwilkinson.com
 */
 
+add_action('wp_enqueue_scripts', function() {
+  wp_enqueue_script('jquery-masonry');
+});
+
 defined('ABSPATH') or die("Cannot access pages directly.");
 defined("DS") or define("DS", DIRECTORY_SEPARATOR);
 add_action( 'widgets_init', create_function( '', 'register_widget("Pretty_Pinterest_Pins");' ) );
@@ -107,55 +111,38 @@
 			list-style-type: none;
 		}
 		
-		ul#pretty-pinterest-pins-widget li.pretty-pinterest-pin, ul#pretty-pinterest-pins-widget li.pretty-pinterest-follow-me{
-			position: relative;
-			margin: 0px 0px 10px 0px;
+		ul#pretty-pinterest-pins-widget li.pretty-pinterest-pin {
+  		width: 200px;
+			margin: 0px;
+			padding: 0px;
 			list-style-type: none;
 			list-style-image: none;
 			background: none;
+      /* where the magic happens */
+      margin-bottom: 10px;
+      background: red;
+			border:1px solid #C22E14;
 		}
 		
-		ul#pretty-pinterest-pins-widget li.pretty-pinterest-pin div.pretty-pinterest-image{
-			background-color: #FFFFFF;
-			box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
-			font-size: 11px;
-			text-align: center;
-			margin: 0px;
-			max-width: 100%;
-			width: 150px;			
-		}		
-		
-		ul#pretty-pinterest-pins-widget li.pretty-pinterest-pin div.pretty-pinterest-image img{
-			width: 100%;
-			text-align: left;
-			margin: 0px;
-		}		
-		
-		ul#pretty-pinterest-pins-widget li.pretty-pinterest-pin div.pretty-pinterest-image a{
-			display: block;
-			background: none;
-			padding: 15px 15px 13px 15px;
-			margin: 0px;
-		}
-		
-		ul#pretty-pinterest-pins-widget li.pretty-pinterest-pin span{
-			display: block;
-			padding: 0px;
-			margin: 0px;
-			text-align: left;
-			line-height: 16px;
-			background-color: #F2F0F0;
-		}
-		
-		ul#pretty-pinterest-pins-widget li.pretty-pinterest-pin span p{
-			padding: 4px;
-			margin: 0px;
-			text-align: center;
-			line-height: 14px;
-			background-color: #F2F0F0;
-			color: #333;
-		}
-		</style>		
+		</style>
+		<script>
+  		(function($) {
+    		$(function() {
+      		var $grid = $('#pretty-pinterest-pins-widget').masonry({
+        		itemSelector: '.pretty-pinterest-pin',
+        		gutter: 10,
+        		isInitLayout: false,
+      		});
+      		$grid.masonry('on', 'layoutComplete', function() {
+        		$('#pretty-pinterest-pins-widget img').each(function(idx,e) {
+          		var e = $(e);
+          		e.height(parseInt(e.height()));
+        		})
+      		});
+      		$grid.masonry();
+    		});
+  		})(jQuery);
+		</script>
 		<ul id="pretty-pinterest-pins-widget">			
 		<?php 
 			if(!empty( $latest_pins ) ){
@@ -174,13 +161,11 @@
 				</li>
 				<?php endforeach; 
 			}
-			if( $instance['show_follow_button'] ){
-			?>
-			<li class="pretty-pinterest-follow-me"><a href="https://pinterest.com/<?php echo $instance['pinterest_username'];?>/" target="_blank"><img src="https://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" width="156" height="26" alt="Follow Me on Pinterest" /></a></li>
-			<?php
-			}
-			?>		
+		?>
 		</ul>				
+		<?php if( $instance['show_follow_button'] ): ?>
+  		<div><a href="https://pinterest.com/<?php echo $instance['pinterest_username'];?>/" target="_blank"><img src="https://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" width="156" height="26" alt="Follow Me on Pinterest" /></a></div>
+		<?php endif; ?>
 		<?php		
 		}		
 		echo $after_widget;