askdesign
1/8/2016 - 12:29 AM

Using Masonry in Genesis for a Pinterest like layout

September 15, 2013 by Sridhar Katakam

Set the width of .masonry-page .content .entry to width of each post as calculated from the formula earlier.
Regenerate Thumbnails

Install activate and run Regenerate Thumbnails.

That’s it!

References:
http://surefirewebservices.com/development/genesis-framework/using-the-genesis-featured-image

http://designsbynickthegeek.com/tutorials/genesis-explained-image-functions
/****************************************************************
    Pinterest-like Masonry layout for Posts page and Archives
****************************************************************/

.masonry-page .content .entry {
	padding: 0;
	border-radius: 0;
	width: 255px;
	overflow: hidden;
}

.masonry-page .content .one-half,
.masonry-page .content .one-third,
.masonry-page .content .one-fourth,
.masonry-page .content .one-sixth {
	margin-left: 0;
}

.masonry-page .content .title-content {
	padding: 2rem;
}

.masonry-page .content .entry-title {
	font-size: 1.6rem;
	line-height: 1.4;
}

.masonry-page .content .entry-content a {
	border-bottom: none;
}

.masonry-page .content .entry-content p {
	margin-bottom: 0;
}

.masonry-page .content .entry-content p.entry-permalink {
	padding-left: 2rem;
	padding-right: 2rem;
}

.masonry-page .content .entry-content a.more-link {
	font-size: 1.4rem;
}

.masonry-page .content .entry-footer {
	padding: 1rem 2rem;
	border-top: 1px dashed #F5F5F5;
}

.masonry-page .content .entry-footer .entry-meta {
	margin: 0;
	padding: 0 0 1rem 0;
	border-top: none;
}

.masonry-page .content .entry-pagination {
	padding-left: 2rem;
	padding-right: 2rem;
}

/*Image hover*/
.masonry-page .content img.post-image {
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */
    filter: alpha(opacity=100); /* IE 4, 5, 6 and 7 */
    zoom:1 /* so the element "hasLayout" or, to trigger "hasLayout" set a width or height */
	-webkit-transition:  all .2s linear;
	-moz-transition:  all .2s linear;
	-o-transition:  all .2s linear;
	transition:  all .2s linear;
}
.masonry-page .content img.post-image:hover {
    -khtml-opacity: 0.7;
    -moz-opacity: 0.7;
    opacity: 0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=70)"; /* IE 8 */
    filter: alpha(opacity=70); /* IE 4, 5, 6 and 7 */
    zoom:1; /* so the element "hasLayout" or, to trigger "hasLayout" set a width or height */
}

/*Comment this out if infinite scrolling is NOT being used*/
.masonry-page .archive-pagination {
	display: none;
}

/* Infinite Scroll loader */
#infscr-loading {
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  width: 200px;
  padding: 10px;
  background: #000;
  opacity: 0.8;
  color: #FFF;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

/*Media Queries*/

@media only screen and (max-width: 1023px) {
	body.masonry-page {
		background: #F5F5F5;
	}
}

/*For .site-inner width of 1140px, 4-columns*/
@media only screen and (max-width: 768px) {
	.masonry-page .content .entry {
		width: 325px;
	}
}
/*For .site-inner width of 1140px, 3-columns*/
@media only screen and (max-width: 768px) {
	.masonry-page .content .entry {
		width: 690px;
	}
}

@media only screen and (max-width: 480px) {
	.masonry-page .content .entry {
		width: 430px;
	}
}

@media only screen and (max-width: 320px) {
	.masonry-page .content .entry {
		width: 287px;
	}
}
If you do not wish to use Infinite scroll, comment out or delete the two enqueue lines under //* Infinite Scroll.

In

[php]
add_image_size( ‘masonry-brick-image’, 255, 0, TRUE );
[/php]

change 255 to width of each post (which is dependent on how many columns you want in the available space).

Here’s the formula to calculate the width of each post:

((no. of columns) * x) + ((no. of columns – 1) * gutter width) = “.site-inner” width

Ex.: Let’s say you want 4 columns and you’ve set the gutter width to 40px and the available space of .site-inner div is 1140px (can be obtained from Firebug), then

4x + (3*40) = 1140

i.e., x = (1140 – 120)/4 = 255.

Note: This step is not mandatory. If 0 is entered when defining the “masonry-brick-image” custom image size handle, full width of the image will be used. The benefit of setting the post thumbnail image width to only how much is actually needed (that is the container in which it is shown) is faster page loading time due to decreased image file sizes.
<?php
//* Enqueue the scripts and set up the layout

//* Add this in child theme’s functions.php:

//* Do NOT include the opening php tag
// =================================================================
// = Pinterest-like Masonry layout for Posts page and Archives =
// =================================================================
//* Enqueue and initialize jQuery Masonry script
function sk_masonry_script() {
	if (is_home() || is_archive()) {
		wp_enqueue_script( 'masonry-init', get_stylesheet_directory_uri().'/js/masonry-init.js' , array( 'jquery-masonry' ), '1.0', true );
    	//* Infinite Scroll
    	wp_enqueue_script( 'infinite-scroll', get_stylesheet_directory_uri().'/js/jquery.infinitescroll.min.js' , array('jquery'), '1.0', true );
    	wp_enqueue_script( 'infinite-scroll-init', get_stylesheet_directory_uri().'/js/infinitescroll-init.js' , array('jquery'), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'sk_masonry_script' );
//* Add custom body class to the head
add_filter( 'body_class', 'sk_body_class' );
function sk_body_class( $classes ) {
	if (is_home()||is_archive())
		$classes[] = 'masonry-page';
		return $classes;
}
//* Display Post thumbnail, Post title, Post content/excerpt, Post info and Post meta in masonry brick
add_action('genesis_meta','sk_masonry_layout');
function sk_masonry_layout() {
	if (is_home()||is_archive()) {
		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
		remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
		remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
		remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
		remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
		remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
		remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
		remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
		add_action( 'genesis_entry_content', 'sk_masonry_block_post_image', 8 ) ;
		add_action( 'genesis_entry_content', 'sk_masonry_title_content', 9 );
		add_action( 'genesis_entry_footer', 'sk_masonry_entry_footer' );
		remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
		add_action( 'genesis_before_content', 'genesis_do_breadcrumbs' );
		remove_action( 'genesis_before_loop', 'genesis_do_taxonomy_title_description', 15 );
		add_action( 'genesis_before_content', 'genesis_do_taxonomy_title_description', 15 );
		remove_action( 'genesis_before_loop', 'genesis_do_author_title_description', 15 );
		add_action( 'genesis_before_content', 'genesis_do_author_title_description', 15 );
		remove_action( 'genesis_before_loop', 'genesis_do_author_box_archive', 15 );
		add_action( 'genesis_before_content', 'genesis_do_author_box_archive', 15 );
		remove_action( 'genesis_before_loop', 'genesis_do_cpt_archive_title_description' );
		add_action( 'genesis_before_content', 'genesis_do_cpt_archive_title_description' );
		remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
		add_action( 'genesis_after_content', 'genesis_posts_nav' );
	}
}
//* Helper function to display Post title and Post content/excerpt wrapped in a custom div
function sk_masonry_title_content() {
	echo '<div class="title-content">';
		genesis_do_post_title();
		genesis_do_post_content();
	echo '</div>';
}
//* Helper function to display Post info and Post meta
function sk_masonry_entry_footer() {
		genesis_post_info();
		genesis_post_meta();
}
//* Set the second parameter to width of your masonry brick (.home .entry, .archive .entry)
add_image_size( 'masonry-brick-image', 255, 0, TRUE );
//* Helper function to display featured image
//* Source: http://surefirewebservices.com/development/genesis-framework/using-the-genesis-featured-image
function sk_masonry_block_post_image() {
		$img = genesis_get_image( array( 'format' => 'html', 'size' => 'masonry-brick-image', 'attr' => array( 'class' => 'post-image' ) ) );
		printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
}
//* Add more link when using excerpts
function sk_excerpt_more($more) {
    return '<a class="more-link" href="'. get_permalink() . '">&nbsp;&nbsp;[Continue Reading]</a>';
}
add_filter('excerpt_more', 'sk_excerpt_more');
//* Modify the length of post excerpts
add_filter( 'excerpt_length', 'sk_excerpt_length' );
function sk_excerpt_length( $length ) {
	return 10; // pull first 10 words
}
[Optional] Infinite Scroll

If you would like next set of Posts to load automatically as the visitor scrolls down, download jquery.infinitescroll.min.js from here. Upload it to /js directory under the child theme. Also create a file named say, infinitescroll-init.js under child theme’s /js having this code:
jQuery(function($){
	var $container = $('.content');

	$container.infinitescroll({
        navSelector  : '.archive-pagination',    // selector for the paged navigation
        nextSelector : '.archive-pagination .pagination-next a',  // selector for the NEXT link (to page 2)
        itemSelector : '.content .entry',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: "<em>No more posts to load.</em>",
            img: 'http://websitesetuppro.com/demos/genesis-masonry/wp-content/themes/genesis-sample/js/images/loader.gif',
	        msgText: "<em>Loading the next set of posts...</em>",
	        speed: 'fast'
        },
    },

        // trigger Masonry as a callback
        function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
            });
        }
    );
});

// In the above the only value that may want to change is the URL of loading indicator image, loader.gif. Download it, upload to your server and use that URL.
Set excerpts to be shown

At Genesis > Theme Settings > Content Archives select Display post excerpts.
// Prepare for jQuery Masonry initialization

// Place the following in a file named say, masonry-init.js under js (create, if it does not exist) directory in active theme:

jQuery(function($) {
	var $container = $('.content');

	$container.imagesLoaded( function(){
		$container.masonry({
			itemSelector: '.entry',
			isAnimated: true,
			gutterWidth: 40
		});
	});
});

// In the above we are specifying .content div as the masonry container and .entry as each masonry brick. gutterWidth is the value in pixels of the horizontal gap between the Post blocks.