Have featured image above title in list, below in detail

Support
#1

Good afternoon,

I have used the php code you suggested here (https://theme.co/apex/forum/t/blog-page-to-display-featured-image-then-blog-title/4022) so on the news page which lists the blog posts have the featured image above the title.

How can I get it so when you click on the title / image the detail page shows the title above the featured image?

Thank you!
Jason

#2

Hey @hyperdrive_boom,

A quick way to do this is through CSS. Please try this code in X > Theme Options > CSS:

.single-post .entry-wrap > div {
    display: flex;
    flex-direction: column;
}

.single-post .entry-wrap > div .entry-featured {
    order: 2;
}

.single-post .entry-wrap > div .entry-header {
    order: 1;
}

.single-post .entry-wrap > div .entry-content {
    order: 3;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#3

That is perfect! I Works very well!

Do I need to keep the content.php file or can I now remove that?

#4

Hi @hyperdrive_boom,

You can remove the file in the child theme since you did the CSS approach.

Thank you.

#5

Oh I just removed and it put the titles back on top of the featured image - shall I put it back in?

#6

Hi @hyperdrive_boom,

Removing the content.php file in the child theme changes the structure of the page where the code I previously suggested is based from.

What you can do now is you can get rid of the CSS codes you previously added and just update the content.php code to:


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

This will move the title above the featured image without the need of additional CSS.

If you want to get rid of the content.php file, us this CSS code:

.single-post .entry-wrap div {
    display: flex;
    flex-direction: column;
}

.single-post .entry-wrap div .entry-featured {
    order: 2;
}

.single-post .entry-wrap div .entry-header {
    order: 1;
}

.single-post .entry-wrap div .entry-content {
    order: 3;
}

Hope this helps.

#7

Perfect thank you!

#8

You’re most welcome, Jason.

#9

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