Move Blog Post Featured Image Below Post Text

Support
#1

Hi there,

I’m working on http://joannamay.com and the client would like the featured image of each blog-post to appear below the blog text, both in the main blog-post list and in the actual single post. Could you help please?

Thanks very much.
Cheers!
Matt

#2

Hello Matt,

Thanks for asking. :slight_smile:

What you are looking for requires custom development and falls outside the scope of the support we offer. However to help you get started I am sharing with you the necessary steps that you can follow to display featured image after post content.

Because this will require custom development, I suggest you to please setup child theme. I am sharing few resources that can be used to download X Child theme and best practices that should be following while making changes:

  1. Use following URL to download Child theme: https://theme.co/apex/child-themes
  2. Customization best practices that we suggest: https://theme.co/apex/forum/t/customizations-best-practices/205

After that you need to copy content.php file from /wp-content/themes/x/framework/views/icon/ to /wp-content/themes/x-child/framework/views/icon/. Please note that you may have to create the necessary child folders.

Next step is to open content.php and then copy code from line number 16 starting with <?php if ( has_post_thumbnail() ) : ?>
to line number 20 <?php endif; ?> and paste after line number 21 (<?php x_get_view( 'global', '_content' ); ?>).

Thanks.

#3

Hi Prasant,

That’s brilliant, thank you very much—that worked a treat in the blog-post main list, but now in the single post, the title has moved down underneath the text. Is it possible to move the title back to the top in the single post?

Thanks very much for the help, massively appreciated.
Cheers!
Matt

#4

Hi Matt,

Can you provide us the entire code in your content.php file.

I tried this code in my test site and it works fine both in blog and single post page.

<?php

// =============================================================================
// VIEWS/ICON/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_icon_comment_number(); ?>
    <div class="x-container max width">
      <?php x_get_view( 'icon', '_content', 'post-header' ); ?>  
      <?php x_get_view( 'global', '_content' ); ?>
          <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
      <?php endif; ?>
    </div>
  </div>
</article>

Can you try that one.

Thanks

#5

Hi Paul,

Thanks for that. So the code was exactly the same, but I pasted it in anyhow in case I had any characters go awry, but it didn’t work.

But just to clarify — it works perfectly on the main blog post list page, but not in the single posts. In the single posts the title as well as the featured image have moved to the bottom of the post, and I only want the featured image to move down.

Eg.
Post index page works: http://joannamay.com/news/
Single post doesn’t work: http://joannamay.com/joannas-christmas-exhibition/

Thanks for your continued help.
Cheers!
Matt

#6

Hi There,

Could you please try adding the following CSS rule into your Customizer, Custom > Edit Global CSS area.

.single-post .entry-wrap {
    margin-top: 130px;
}

Hope that helps.

#7

Hi there,

Thanks, but that doesn’t work. What I want to do, is move the single post title back to the top of the page above the post text, but leave the featured image at the bottom. Or if this isn’t possible, move the post title together with the featured image back to the top of the single post, whilst keeping the blog post index page as it is (ie. the post title is at the top, then the post text, then the featured image).

So:

  1. In the single blog post pages:
    Post title
    Post text
    Featured image.

  2. And the same for the main blog post index page (which is currently working):
    Post title
    Post text
    Featured Image.

For (2), I used the following code in content.php in the child theme:

<?php

// =============================================================================
// VIEWS/ICON/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_icon_comment_number(); ?>
    <div class="x-container max width">
      <?php x_get_view( 'icon', '_content', 'post-header' ); ?>  
      <?php x_get_view( 'global', '_content' ); ?>
          <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
      <?php endif; ?>
    </div>
  </div>
</article>

Thanks for your help as ever.
Cheers!
Matt

#8

Hi Matt,

Thank you for the clarification. There’s something weird on the setup. The code should work for both blog index and single post. I even double check it on my setup. See comparison:

On your site single post, the header is inside the container of the featured image and the order is not working. After further checking on the source code, I found out you do have the following custom JS code:


      (function($){
  $('.single-post .entry-header').insertBefore( $('.single-post .entry-featured .entry-thumb') );
})(jQuery);

The JS works on the fly. Which means it overrides the changes on the template. Remove that and check again after. Should work as expected after that.

#9

Hi Lely,

Ah good spot! I’d pasted that in from another post here and then promptly forgot it!

Thanks so much!
Cheers!
Matt

#10

You’re welcome!
We’re glad we were able to help you out.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.