Shayne Sanderson

WordPress Developer

By 9 Comments

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:

<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' =&gt; get_the_ID(), 'post_type' =&gt; 'attachment', 'post_mime_type' =&gt; 'image', 'order_by' =&gt; 'menu_order')); if ( ! is_array($attachments) ) continue; $count = count($attachments); foreach ($attachments as $ats) { $atmeta = wp_get_attachment_metadata($ats-&gt;ID); $atsrc = wp_get_attachment_image_src($ats-&gt;ID, array(100,100)); echo '<a title="'.get_the_title($ats-&gt;ID).'" href="'. $ats-&gt;guid .'" rel="lightbox">'; echo '<img title="'.get_the_title($ats-&gt;ID).'" src="'.$atsrc[0].'" alt="" width="100" height="100" />'; 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:

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

Reader Interactions

Comments

  1. andy says

    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!

    Reply

    • Mary Baum says

      LOVE this featured-image trick! I just may add this to almost all of my StudioPress sites.

      Seems to me that if I insert an image into a post that happens to be the featured image, any page that aggregates posts is going to show the thumbnail and the inserted image, unless I insert the image after the More tag.

      That looks awful, of course. If I understand your code right, this gets around that: one featured image in the post, one thumbnail per post on a page. Marvelous!

      Reply

  2. Cruiseo says

    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!

    Reply

  3. mike says

    Hello and thanks for this code. I implemented it verbatim and there seems to be a bug. I see that you have it order the thumbnails by “menu_order” which is fine, but if I edit the menu order in the gallery admin, the site does not seem to reflect this order. It seems to keeping them in the original upload order. Could you please check your own version to see if yours does the same. Thanks again.

    Reply

    • mike says

      Hello Shane, I’ll answer my own post… This is how I corrected the menu order issue (note I had to take the underscore out of “order_by” and add ‘order’ => ‘ASC’, )

      function your_custom_header () {
      echo ”;
      echo the_post_thumbnail( ‘featured-single’ );
      echo ”;
      echo ”;
      $attachments = get_children(array(
      ‘post_parent’ => get_the_ID(),
      ‘post_type’ => ‘attachment’,
      ‘post_mime_type’ => ‘image’,
      ‘orderby’ => ‘menu_order’,
      ‘order’ => ‘ASC’,
      ));

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *