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!
