Shayne Sanderson

So I’m working on a real estate site and obviously wanted to use AgentPress from StudioPress but I found a couple of things that I’d like to work a little better/more automated – a featured image and thumbnails on the listing page.

On the listing page you have to insert a main image and then can insert a gallery if you choose to do so, but my client needs things to be as easy as possible so I made some changes for them and I’ll show you what I did and maybe you can use it as well.

In the AgentPress theme we’re going to be dealing with “functions.php” and “single-listing.php”.

First, in functions.php starting around line 13 you’ll notice code for creating image sizes. We’ll want to add a new size, so just add this line after the ones that are there:

add_image_size( 'featured-single', 600, 400, TRUE );

What that is going to do is crop a photo to 600×400 whenever you upload a featured image to a listing (or post/page for that matter). We’ll use this later on, so just save the file and upload back to your server.

Next, we want to pull that image into our Listings page automatically, so in your AgentPress theme, open up “single-listing.php”. What you’ll see is this:

<?php
remove_action( 'genesis_before_post_content', 'genesis_post_info' );
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );
remove_action( 'genesis_after_post', 'genesis_do_author_box_single' );
 
genesis();

We’re going to add in a function to place the featured image before the content on that page but right below the page title. Here is the code we’ll add right after the last “remove_action” line seen above:

add_filter ( 'genesis_after_post_title', 'your_custom_header' );
 
function your_custom_header () {
echo '<div id="page_featured">';
echo the_post_thumbnail( 'featured-single' );
echo '</div>';
 
}

What we’re saying is after the post title, insert this code. You’ll see that I’m calling in the new image we created in the first step and just wrapped it in a div so that we can style it if we want.

So that brings in the featured image automatically – pretty cool! I also wanted to load in the WordPress gallery automatically also, so we need to add a bit more to that code and here is the gallery piece:

echo '<div id="single_gallery">';
	$attachments = get_children(array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order_by' => 'menu_order'));
	            if ( ! is_array($attachments) ) continue;
	            $count = count($attachments);
 
	            foreach ($attachments as $ats) {
	            $atmeta = wp_get_attachment_metadata($ats->ID);
	            $atsrc = wp_get_attachment_image_src($ats->ID, array(100,100));
echo '<a href="'. $ats->guid .'" rel="lightbox" title="'.get_the_title($ats->ID).'">';
echo '<img src="'.$atsrc[0].'" width="100" height="100" title="'.get_the_title($ats->ID).'">';
echo '</a>';
}
echo '</div>';

You’ll see that it’s wrapped in a div as well (for styling) and also you see that I have the gallery thumbails set to be 100×100. You can change that size to whatever dimensions you’d like. Also notice the rel=”lightbox” in there – I’m using the LightBox Plus plugin and that will make the thumbnails pop up using that plugin. If you use a different plugin that requires different code you can change that out. Next, you’ll want some CSS to make the gallery look nice, so add this to your style.css file:

#single_gallery {
	margin: 10px 0px 10px 0px;
	}
 
 
#single_gallery img, #page_featured img {
	margin: 5px;
        padding: 5px;
	background: #fff;
        -moz-box-shadow: 0 1px 4px #000;
	-webkit-box-shadow: 0 1px 4px #000;
        -khtml-box-shadow: 0 1px 4px #000;
	box-shadow: 0 1px 4px #000;
	}
 
 
#single_gallery img:hover {
 
	background: #ccc;
        margin: 5px;
        padding: 5px;
	}

Putting it all together, this is what my entire “single-listing.php” file looks like:

<?php
remove_action( 'genesis_before_post_content', 'genesis_post_info' );
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );
remove_action( 'genesis_after_post', 'genesis_do_author_box_single' );
 
/** Add Featured Image Below Title */
add_filter ( 'genesis_after_post_title', 'your_custom_header' );
 
function your_custom_header () {
    echo '<div id="page_featured">';
    echo the_post_thumbnail( 'featured-single' );
    echo '</div>';
    echo '<div id="single_gallery">';
	$attachments = get_children(array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order_by' => 'menu_order'));
	            if ( ! is_array($attachments) ) continue;
	            $count = count($attachments);
 
	            foreach ($attachments as $ats) {
	            $atmeta = wp_get_attachment_metadata($ats->ID);
	            $atsrc = wp_get_attachment_image_src($ats->ID, array(100,100));
    echo '<a href="'. $ats->guid .'" rel="lightbox" title="'.get_the_title($ats->ID).'">';
    echo '<img src="'.$atsrc[0].'" width="100" height="100" title="'.get_the_title($ats->ID).'">';
    echo '</a>';
}
    echo '</div>';
}
 
genesis();

Now when you go to a listing page in AgentPress you will have your featured image and WordPress gallery automatically inserted – pretty slick!

Happy coding!

The year of 2011 was a strange one for me. It began with me leaving the company I co-founded (9seeds) and striking out on my own once again. It was a hard decision but one that needed to happen and was good for me. I miss my 9seeds friends like crazy, but what is cool is that I think I talk to them more now than ever and we’ve remained good good friends throughout this – and that I’m most thankful for.

I attended 2 WordCamps in 2011 opposed to the more than a dozen the previous year and pretty much just kept very low key. I freelanced and spent time focusing on family and work through 2011 and have had great times with my family this year. I tried a couple of different ventures that didn’t quite work out the way I intended, but at the end of the day they were learning experiences and were very valuable. I don’t have much more to report on 2011 – as I said, LOW KEY.

I’m planning on 2012 being completely opposite of 2011. You can expect to see me at a lot more WordCamps and being much more active online this year. I have a couple of things in the works currently and have some ideas that you should see take form in the next few months and I’m very excited. The “low key” year was good and needed to happen as it gave me a lot of time to think, reflect and realize where I want to focus my energy – and I’m ready to hit the ground running this year.

That’s my update – not much I know, but you can expect a much longer update on January 1, 2013!

WordPress: Developer. Speaker. Enthusiast. User.

Enough is Enough

Genesis AgentPress Featured Image & Thumbnails

TwentyEleven