Instantly share code, notes, and snippets.

Embed
What would you like to do?
Masonry image size randomizer (with PHP, LESS and isotope.js)
$('.grid').isotope({
itemSelector: '.grid-item',
//percentPosition: true,
masonry: {
columnWidth: 100
}
})
@base_size: 200;
@unit:px;
.grid {margin:0 auto;
&:after {content: ''; display:block; clear: both;}
.grid-item, .grid-sizer {width:(unit(@base_size, @unit)); }
.grid-item {float:left; height:(unit(@base_size, @unit)); background-repeat: no-repeat;}
.double_w { width:(unit(@base_size * 2, @unit)); }
.double_h { height:(unit(@base_size * 2, @unit)); }
.double_all { width:(unit(@base_size * 2, @unit)); height:(unit(@base_size * 2, @unit));}
}
<?php
/* -------------------------------------------------
This script uses the following libraries:
https://github.com/metafizzy/isotope
https://github.com/Jany-M/wp-imager
The example is done with WordPress but can be
used in any PHP script.
--------------------------------------------------- */
$base_size = 200; // Set the base size
$unit = 'px'; // Set the unit - You could switch to % but that would require converting base_size to px for bg size
$none = ''; // 1 x 1
$double_w = 'double_w'; // 2 x 1
$double_h = 'double_h'; // 1 x 2
$double_all = 'double_all'; // 2 x 2
$isotope_classes = array($none, $double_w, $double_h, $double_all);
if (have_posts() ) : while (have_posts() ) : the_post();
$the_winner = $isotope_classes[mt_rand(0, count($isotope_classes) - 1)];
switch ($the_winner) {
case "double_w":
$width = $base_size * 2;
$height = $base_size;
break;
case "double_h":
$width = $base_size;
$height = $base_size * 2;
break;
case "double_all":
$width = $base_size * 2;
$height = $base_size * 2;
break;
default :
$width = $base_size;
$height = $base_size;
break;
}
?>
<div class="grid-item <?php echo $the_winner; ?>" style="background-image:url('<?php echo wp_imager($width, $height, 1, '', false, '', true); ?>');"></div>
<?php endwhile; endif;
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment