Move Featured Image Before Entry Title On Archive Pages

I’ve already written about how to display your featured image/post image after your title and excerpt on archive pages but how about displaying the image before your entry title?

In this post, i’ll show you exactly how to display your featured image before your titles on any archive page.

Firstly, here’s the default home page view using the Genesis Sample child theme:

featured image after title

Here’s the code to reposition the post image which goes at the end if your child themes functions.php file:

remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
add_action( 'genesis_entry_header', 'genesis_do_post_image', 1 );

And here’s the result after adding the PHP code:

post image align left

The reason the image is aligned left is because of this CSS code which is located on Line 588 of the Sample themes style.css file:

.alignleft {
    float: left;
    text-align: left;
}

If you remove this CSS, this is how your featured image looks.

image before title

Which is the solution this post is focused on however removing the CSS code may effect other elements using that class so here’s another solution.

Please copy ALL the code from the view raw link and paste it at the end of your child themes functions.php file using a text editor like Notepad++

Credit to Bill Erickson for this code.


Comments

6 responses to “Move Featured Image Before Entry Title On Archive Pages”

  1. Francis Porter Avatar
    Francis Porter

    Hi
    In the Outreach Pro theme on Pages is it possible to have a Featured Image appear below the navigation menu but above all the other content (Breadcrumbs downwards)?
    Thanks

    1. Brad Dalton Avatar
      Brad Dalton

      Sure. The same image on all pages?

      Use any of these hooks in a custom function:
      [code]
      genesis_before_content_sidebar_wrap
      genesis_before_content
      genesis_before_loop
      [/code]

      Something like this:

      PHP

      [code]
      function img_after_nav() {
      if(is_singular(‘page’) ) {
      echo ‘

      ‘;
      }}
      add_action(‘genesis_before_loop’, ‘img_after_nav’ );

      [/code]

      1. Francis Porter Avatar
        Francis Porter

        Hi Brad
        Thanks for the great swift reply. Would I add this into the theme-functions.php file?
        Is it possible to select which Pages it would appear on or would I have to create separate Page Templates to best implement this?
        Thanks

        1. Brad Dalton Avatar
          Brad Dalton

          Add it at the end of your child themes functions.php file.

          You can control the output using conditional tags.

  2. Hi Brad, thanks for this useful tutorial.
    is also possible with Video or images not Featured?

    1. Brad Dalton Avatar
      Brad Dalton

      Yes but the code would be specific for each.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.