Swap Thumbnail Image with Title – Genesis Grid Loop

[livelovepasta]

I installed Bill Erickson's Genesis Grid Loop plugin and I want to have the thumbnail image be above the post title. I saw a solution in the plugin's forum but couldn't get it to work for my site and I was unclear on where exactly to put the code, if anyone knows the solution to this please let me know, thanks!

My site: http://livelovepasta.com/category/diy/

http://livelovepasta.com/

[nutsandbolts]

Hi! I was the one struggling on the plugin forums. Hopefully the hours I spent getting it working can be useful for you. 🙂

Try adding this to your functions.php file:

// Display featured image above title in grid

remove_action( 'genesis_post_content', 'genesis_do_post_image' );
function be_teaser_image() {
        global $wp_query;
	global $loop_counter;
        $paged = get_query_var( 'paged' );
	// if we are on the first page of a post archive page use the code
	// below for the post thumbnail on all but the first post
	if( 0 != $loop_counter && $paged < 2 ) { ?>

  		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" > 
  			<?php the_post_thumbnail('grid-thumbnail'); ?> 
  		</a> 

  	<?php }
  	if( $paged > 1 ) { ?>
  		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" > 
  			<?php the_post_thumbnail('grid-thumbnail'); ?> 
  		</a>   		
  	<?php }
}
add_action( 'genesis_before_post_title', 'be_teaser_image');

I had to use a TON of functions to get the grid loop working correctly, but I believe that's the one that worked specifically to put the images above the post titles. If that doesn't work, let me know and I'll keep looking.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[livelovepasta]

Andrea,

I added your code above to my child theme's functions.php, then cleared my page cache and reloaded an archive page, but the titles are still above the thumbnail image?

Does your code have to be modified for html5? If you can think of anything else to try please let me know.

[nutsandbolts]

I just realized you're adding the grid to your category pages and not the homepage.... You may need to try adding that to your custom category template instead of functions.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[livelovepasta]

Ok, I tried adding it to "page_archive.php" in my child theme and still nothing.

Hmm... Is this the correct place to put your code do you know? I appreciate your help by the way!

[nutsandbolts]

I'm thinking the code would need to be altered since you're using the loop on an archive template. Can you paste in your entire page_archive.php?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[livelovepasta]

<?php

/**
* Archive Post Class
* @since 1.0.0
*
* Breaks the posts into three columns
* @link http://www.billerickson.net/code/grid-loop-using-post-class
*
* @param array $classes
* @return array
*/
function be_archive_post_class( $classes ) {
$classes[] = 'one-third';
global $wp_query;
if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 3 )
$classes[] = 'first';
return $classes;
}
add_filter( 'post_class', 'be_archive_post_class' );

// Display featured image above title in grid

remove_action( 'genesis_post_content', 'genesis_do_post_image' );
function be_teaser_image() {
        global $wp_query;
	global $loop_counter;
        $paged = get_query_var( 'paged' );
	// if we are on the first page of a post archive page use the code
	// below for the post thumbnail on all but the first post
	if( 0 != $loop_counter && $paged < 2 ) { ?>

  		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" > 
  			<?php the_post_thumbnail('grid-thumbnail'); ?> 
  		</a> 

  	<?php }
  	if( $paged > 1 ) { ?>
  		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" > 
  			<?php the_post_thumbnail('grid-thumbnail'); ?> 
  		</a>   		
  	<?php }
}
add_action( 'genesis_before_post_title', 'be_teaser_image');

/**
* Genesis Framework.
*
* WARNING: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances.
* Please do all modifications in the form of a child theme.
*
* @package Genesis\Templates
* @author StudioPress
* @license GPL-2.0+
* @link http://my.studiopress.com/themes/genesis/
*/
 
//* Template Name: Archive
 
//* Remove standard post content output
remove_action( 'genesis_post_content', 'genesis_do_post_content' );
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
 
add_action( 'genesis_entry_content', 'genesis_page_archive_content' );
add_action( 'genesis_post_content', 'genesis_page_archive_content' );

/**
* This function outputs sitemap-esque columns displaying all pages,
* categories, authors, monthly archives, and recent posts.
*
* @since 1.6
*/
function genesis_page_archive_content() { ?>
 
<h4><?php _e( 'Pages:', 'genesis' ); ?></h4>
<ul>
<?php wp_list_pages( 'title_li=' ); ?>
</ul>
 
<h4><?php _e( 'Categories:', 'genesis' ); ?></h4>
<ul>
<?php wp_list_categories( 'sort_column=name&title_li=' ); ?>
</ul>
 
<h4><?php _e( 'Authors:', 'genesis' ); ?></h4>
<ul>
<?php wp_list_authors( 'exclude_admin=0&optioncount=1' ); ?>
</ul>
 
<h4><?php _e( 'Monthly:', 'genesis' ); ?></h4>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
 
<h4><?php _e( 'Recent Posts:', 'genesis' ); ?></h4>
<ul>
<?php wp_get_archives( 'type=postbypost&limit=100' ); ?>
</ul>
 
<?php
}
 
genesis();

[nutsandbolts]

Okay, thanks. Give me a bit... I'm going to try this out on a test site.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[livelovepasta]

Thanks Andrea! You're awesome.

[SharonHujik]

Cliff and Andrea - I am encountering the same problem with the Genesis Grid. I used CSS to remove the content and now I would like to have the images above the titles on a category page.

I see from your site that you've resolved the problem (yeah!). Wondering if you could share how you did it?

here is where I'm at: http://tinyurl.com/kf2cfkx

I also posted my request at http://wordpress.org/support/topic/images-above-titles-redux?replies=1 if you prefer that channel.

THANKS!

[Author]

Posts