askdesign
7/27/2016 - 5:34 PM

Showcase a Grid of Photos on Your Homepage

Brian Gardner 7.27.16

/* 4. Add CSS for member images in theme style sheet: */
/* Members
---------------------------------------------------------------------------------------------------- */

.members img {
	vertical-align: top;
}

.member {
	display: block;
	float: left;
	height: 20%;
	position: relative;
	width: 20%;
}

.member-name {
	background-color: #fff;
	bottom: 10px;
	font-family: 'futura-pt', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	position: absolute;
	right: 10px;
	text-transform: uppercase;
}

.member-name a {
	display: block;
	padding: 5px 10px;
}

.member-name a:hover {
	background-color: #ff3867;
	color: #fff;
}
<! --- 3. Add HTML for the member images into a text widget: --->

<div class="member"><img src="http://gobrocation.com/images/brian-gardner.jpg" alt="Brian Gardner" /><span class="member-name"><a target="_blank" href="http://twitter.com/bgardner">Brian Gardner</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/joshua-becker.jpg" alt="Joshua Becker" /><span class="member-name"><a target="_blank" href="http://twitter.com/joshua_becker">Joshua Becker</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/darrell-vesterfelt.jpg" alt="Darrell Vesterfelt" /><span class="member-name"><a target="_blank" href="http://twitter.com/dvest">Darrell Vesterfelt</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/john-shultz.jpg" alt="John Shultz" /><span class="member-name"><a target="_blank" href="http://twitter.com/jshltz">John Shultz</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/marc-chernoff.jpg" alt="Marc Chernoff" /><span class="member-name"><a target="_blank" href="http://twitter.com/marcandangel">Marc Chernoff</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/jeff-goins.jpg" alt="Jeff Goins" /><span class="member-name"><a target="_blank" href="http://twitter.com/jeffgoins">Jeff Goins</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/nathan-barry.jpg" alt="Nathan Barry" /><span class="member-name"><a target="_blank" href="http://twitter.com/nathanbarry">Nathan Barry</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/anthony-ongaro.jpg" alt="Anthony Ongaro" /><span class="member-name"><a target="_blank" href="http://twitter.com/anthonyongaro">Anthony Ongaro</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/seth-spears.jpg" alt="Seth Spears" /><span class="member-name"><a target="_blank" href="http://twitter.com/SpearsMarketing">Seth Spears</a></span></div>
<div class="member"><img src="http://gobrocation.com/images/vincent-nguyen.jpg" alt="Vincent Nguyen" /><span class="member-name"><a target="_blank" href="http://twitter.com/SelfStairway">Vincent Nguyen</a></span></div>
//* 2. Hook the “members” widget area after the site header:
//* Do NOT include the opening php tag

//* Add members widget area after header
add_action( 'genesis_after_header', 'brocation_members_widget' );
function brocation_members_widget() {

	genesis_widget_area( 'members', array(
		'before' => '<div id="members" class="members"><div class="wrap">',
		'after'  => '</div></div>',
	) );

}
//* http://briangardner.com/photo-grid/
//* 1. Register the “members” widget area in the functions file:
//* Do NOT include the opening php tag

//* Register members widget area
genesis_register_sidebar( array(
	'id'          => 'members',
	'name'        => __( 'Members', 'brocation' ),
	'description' => __( 'This is the members widget area.', 'brocation' ),
) );