GeckoGrafix
7/12/2017 - 1:58 PM

Masonry Layout-Genesis

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();
} );