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!
I tried doing a few tweks myself to remove the MLS info and have a site for the european market but ran into allsorts of trouble! Managed setting up an AP1 website no problem but AP2 seems more complicated! Just posted on rentacoder – enough tinkering for me I think!
What I would like to do eventually is set up pages of specific area or even specific developments, have good content for it and then automatically import the correct listing for these areas or developments at the bottom of the content. Had a good search around as I this would be a common thing people do but have yet to find a solution although I know AP 2 has “Communities so need to take a closer look at that to see if that fulfills this criteria.
Drop me a mail and let me know what rates you charge for these sorts of modifications if you like. I have a couple of sites I need to outsource and am keen on using Genesis. Just no longer have enough time to dig into the code and bodge these modifications together myself unfortunately!
Hey Andy,
You can just use my contact page to get in touch with me if you need a quote, etc.
Thanks
Brilliant! I have been creating a cruise website and have just removed the images I had added manually to each cruise and replaced it by using your simple yet great piece of code.
I will need to add some 2,000 posts over the next 12 months and so felt that the time spent removing 39 images will easily be made up by the amount of time I spend going back to a post to add the image into the post after I have forgotten to do it!
Thanks!