Masonry Layout-Genesis
.masonry .entry {
padding: 1px;
margin: 7px;
width: 100%;
overflow: hidden;
}
.masonry .entry h2 {
font-size: 15px;
font-size: 1.5rem;
position: absolute;;
top: 0;
text-align: center;
padding: 30px 10px;
background: rgba(255,255,255,0.8);
opacity: 0;
height: 100%;
text-transform: uppercase;
}
.masonry .entry a {
text-align: center;
}
.masonry article:hover h2 {
opacity: 1;
}
@media only screen and (min-width: 768px) {
.masonry .entry {
width: 32%;
}
}
<?php
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );
//* Reposition Archive Pagination
remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
add_action( 'genesis_after_content', 'genesis_posts_nav' );
add_action( 'wp_enqueue_scripts', 'hp_enqueue_scripts_styles' );
function hp_enqueue_scripts_styles() {
/**** Masonry load scripts ****/
if ( is_home() || is_archive() ) {
wp_enqueue_script ( 'jquery-masonry');
wp_enqueue_script ( 'masonry-init' , get_stylesheet_directory_uri() . '/js/masonry-init.js', array('jquery-masonry'), '1', true );
}
/**** Masonry CSS ****/
wp_enqueue_style( 'hp-front-styles', get_stylesheet_directory_uri() . '/masonry.css' );
}
/**** Add an extra body class ****/
add_filter( 'body_class', 'hp_body_class' );
function hp_body_class( $classes ) {
$classes[] = 'masonry';
return $classes;
}
genesis();
//add this to your page template that you wish to use for your masonry layout
jQuery( document ).ready( function( $ ) {
jQuery( '.content' ).masonry();
} );
jQuery( 'img' ).load(function() {
jQuery( '.content' ).masonry();
} );