Skip to content

Instantly share code, notes, and snippets.

@robincornett
Last active September 7, 2017 20:51
Show Gist options
  • Save robincornett/6730357 to your computer and use it in GitHub Desktop.
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
<?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();
<?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' ),
) );
// 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
});
});
});
/*
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