-
-
Save srikat/575683188b96a5739525 to your computer and use it in GitHub Desktop.
Genesis Page Template for displaying Posts in Masonry.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Add new image size | |
| add_image_size( 'masonry-thumb', 270, 0, true ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var container = document.querySelector('.content'); | |
| var msnry; | |
| // initialize Masonry after all images have loaded | |
| imagesLoaded( container, function() { | |
| msnry = new Masonry( container, { | |
| itemSelector: '.entry', | |
| gutter: 40 | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* | |
| Template Name: Posts in Masonry Grid | |
| */ | |
| /* | |
| * @author Sridhar Katakam | |
| * @link http://sridharkatakam.com/genesis-page-template-displaying-posts-masonry/ | |
| */ | |
| # Force full width content | |
| add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); | |
| # Reposition the breadcrumb | |
| // remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); | |
| // add_action( 'genesis_before_content', 'genesis_do_breadcrumbs' ); | |
| //* Enqueue Masonry | |
| wp_enqueue_script( 'masonry' ); | |
| //* Initialize Masonry | |
| wp_enqueue_script( 'masonry-init', get_bloginfo( 'stylesheet_directory' ) . '/js/masonry-init.js', '', '', true ); | |
| //* Load the jQuery for placing archive pagination below the Posts list | |
| wp_enqueue_script( 'reposition-pagination', get_bloginfo( 'stylesheet_directory' ) . '/js/reposition-pagination.js', array( 'jquery' ), '1.0.0', true ); | |
| //* Add custom body class to the head | |
| add_filter( 'body_class', 'sk_body_class' ); | |
| function sk_body_class( $classes ) { | |
| $classes[] = 'masonry-page'; | |
| return $classes; | |
| } | |
| remove_action( 'genesis_loop', 'genesis_do_loop' ); | |
| add_action( 'genesis_loop', 'sk_masonry_loop' ); | |
| /** | |
| * Outputs a custom loop | |
| * | |
| * @global mixed $paged current page number if paginated | |
| * @return void | |
| */ | |
| function sk_masonry_loop() { | |
| $include = genesis_get_option( 'blog_cat' ); | |
| $exclude = genesis_get_option( 'blog_cat_exclude' ) ? explode( ',', str_replace( ' ', '', genesis_get_option( 'blog_cat_exclude' ) ) ) : ''; | |
| $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1; | |
| //* Easter Egg | |
| $query_args = wp_parse_args( | |
| genesis_get_custom_field( 'query_args' ), | |
| array( | |
| 'cat' => $include, | |
| 'category__not_in' => $exclude, | |
| 'showposts' => genesis_get_option( 'blog_cat_num' ), | |
| 'paged' => $paged, | |
| ) | |
| ); | |
| genesis_custom_loop( $query_args ); | |
| } | |
| //* Force Content Limit regardless of Content Archive theme settings | |
| add_filter( 'genesis_pre_get_option_content_archive', 'sk_show_full_content' ); | |
| add_filter( 'genesis_pre_get_option_content_archive_limit', 'sk_content_limit' ); | |
| function sk_show_full_content() { | |
| return 'full'; | |
| } | |
| function sk_content_limit() { | |
| return '100'; // Limit content to 100 characters | |
| } | |
| //* Remove author and comment link in entry header's entry meta | |
| add_filter( 'genesis_post_info', 'sp_post_info_filter' ); | |
| function sp_post_info_filter($post_info) { | |
| $post_info = '[post_date] [post_edit]'; | |
| return $post_info; | |
| } | |
| //* Display Featured image linking to entry | |
| add_action( 'genesis_entry_header', 'sk_image', 9 ); | |
| function sk_image() { | |
| $image_args = array( | |
| 'size' => 'masonry-thumb' | |
| ); | |
| // Get the featured image HTML | |
| $image = genesis_get_image( $image_args ); | |
| echo '<a rel="bookmark" href="'. get_permalink() .'">'. $image .'</a>'; | |
| } | |
| genesis(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(function( $ ){ | |
| var $element_to_be_moved = $('.archive-pagination'); | |
| $element_to_be_moved.insertAfter($element_to_be_moved.parent()); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Masonry | |
| --------------------------------------------- */ | |
| body { | |
| background: url(images/body-bg1.png); | |
| } | |
| .masonry-page .content .entry { | |
| border-radius: 0; | |
| /* ((no. of columns) * x) + ((no. of columns - 1) * gutter width) = available width */ | |
| /* width: 373px; */ /* 3 columns */ | |
| width: 270px; /* 4 columns */ | |
| overflow: hidden; | |
| } | |
| .masonry-page .entry-title { | |
| word-wrap: break-word; | |
| } | |
| .masonry-page article { | |
| box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4); | |
| border-radius: 3px; | |
| padding: 15px; | |
| } | |
| .masonry-page article .entry-title { | |
| font-size: 25px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment