Swap Thumbnail Image with Title – Genesis Grid Loop

Community Forums Forums Design Tips and Tricks Swap Thumbnail Image with Title – Genesis Grid Loop

This topic is: not resolved

Tagged: 

This topic contains 9 replies, has 3 voices, and was last updated by  SharonHujik 11 months, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #67336

    livelovepasta
    Participant
    Post count: 14

    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/
    #67348

    nutsandbolts
    Keymaster
    Post count: 3202

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #67410

    livelovepasta
    Participant
    Post count: 14

    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.

    #67411

    nutsandbolts
    Keymaster
    Post count: 3202

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #67417

    livelovepasta
    Participant
    Post count: 14

    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!

    #67418

    nutsandbolts
    Keymaster
    Post count: 3202

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #67420

    livelovepasta
    Participant
    Post count: 14
    <?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();
    #67421

    nutsandbolts
    Keymaster
    Post count: 3202

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


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

    #67423

    livelovepasta
    Participant
    Post count: 14

    Thanks Andrea! You’re awesome.

    #83326

    SharonHujik
    Participant
    Post count: 3

    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!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.