Last active
September 7, 2017 20:51
-
-
Save robincornett/6730357 to your computer and use it in GitHub Desktop.
Masonry layout for custom front page (using widgets), as seen on smtwo.org
This file contains 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 | |
//* Front page for smtwo | |
add_action( 'genesis_meta', 'rgc_fp_meta' ); | |
function rgc_fp_meta() { | |
if (is_active_sidebar( 'home-main') ) { | |
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); | |
remove_action( 'genesis_loop', 'genesis_do_loop' ); | |
add_action( 'genesis_loop', 'rgc_home_loop' ); | |
} | |
} | |
function rgc_home_loop() { | |
if ( is_active_sidebar( 'home-main' ) ) { | |
genesis_widget_area( 'home-main', array( | |
'before' => '<div class="home-main js-masonry">', | |
) ); | |
echo '</div>'; | |
} | |
} | |
genesis(); |
This file contains 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 | |
//* Add the masonry script to your functions.php file | |
add_action ( 'wp_enqueue_scripts', 'rgc_scripts' ); | |
function rgc_scripts() { | |
if ( is_front_page() ) { | |
wp_enqueue_script( 'rgc-masonry', get_stylesheet_directory_uri() . '/lib/js/rgc-mason.js', array( 'jquery-masonry' ) ); // Pinterest layout | |
} | |
} | |
//add image size for home page | |
add_image_size( 'big-photo', 330 ); // sets width but leaves height variable. no hard crop. | |
// Register Widget Areas | |
genesis_register_sidebar( array( | |
'id' => 'home-main', | |
'name' => __( 'Home Block', 'rgc' ), | |
'description' => __( 'This is the home page. One big block with masonry action.', 'rgc' ), | |
) ); |
This file contains 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
// thanks to Sridhar Katakam: http://sridharkatakam.com/using-masonry-genesis-pinterest-like-layout/ | |
jQuery(function($) { | |
var $container = $('.home-main'); | |
$container.imagesLoaded( function(){ | |
$container.masonry({ | |
itemSelector: 'section', | |
isAnimated: true, | |
gutterWidth: 0 | |
}); | |
}); | |
}); |
This file contains 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
/* | |
Home Page | |
------------------------------------------------------------------------------------- */ | |
.home .site-inner { | |
padding: 40px 0; | |
padding: 4rem 0; | |
} | |
.home-main.widget-area { | |
width: 100%; | |
} | |
.home-main input { | |
border: none; | |
} | |
.home-main section { /* probably could have done .home-main .widget*/ | |
background: #fff; | |
float: left; | |
margin: 10px 1%; | |
width: 31%; | |
padding: 15px; | |
} | |
.home-main .alignnone .entry-image.attachment-post { | |
margin: 0 auto; | |
display: block; | |
} | |
.home-main .textwidget { | |
text-align: justify; | |
} | |
.home-main .featured-content .entry { | |
margin: 0; | |
padding: 0; | |
} | |
.home-main .widget-title { | |
border-bottom: 1px solid #ddd; | |
margin: 0px -15px 16px; | |
padding: 10px 0 16px; | |
text-align: center; | |
} | |
.home-main .entry-title { | |
font-size: 1.6rem; | |
margin-bottom: 10px; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
.home-main .entry-title a { | |
font-weight: 700; | |
} | |
.home-main .alignleft { | |
padding-right: 10px; | |
} | |
.home-main p { | |
margin-bottom: 0 !important; | |
} | |
@media only screen and (max-width: 1023px) { | |
.home-main section { | |
width: 48%; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
.home-main section { | |
width: 100%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment