Blog page to display featured image then blog title

Good morning!

My site has a blog page that has a full width layout and displays rows of 3 blog posts.

By default it displays the title, featured image and then some of the body text.

I would like it to display the featured image first and then the title. How can this be done? I am guessing code has to be added to the functions.php file in the child folder?

I have the latest X theme! Thank you, Jason

Hello There,

Thanks for writing in!

To display title after featured image we recommend you to setup child theme before making any changes.

After that please create file content.php under framework /x-child/views/renew/ (you will have to create renew folder) and then paste following code in that.

<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 if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
      <?php endif; ?>
	  <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  </div>
</article>

Next add following CSS in theme options panel:

h1.entry-title {
    margin-top: 25px;
}

Let us know how it goes.

Thanks.

Perfect thank you!

You are most welcome. :slight_smile:

Here is an alternate way of displaying the featured image:

1 Like

Hey @BenRyan.me

Wow it looks amazing. Thank you for the detailed article, just read it and it’s great. Thank you for your efforts

Cheers!

1 Like

Hi Ben (and Themeco)

Ben, I have implemented your Full Width Parallax Featured Image customisation on a staging site, and I can testify that it is truly awesome. Many thanks for sharing this here and on your blog!

I would really like to achieve this on page featured images too. I’m using Integrity in X 5.1.1, any help would be hugely appreciated.

Thanks again!

1 Like

Hi there,

You may follow the instruction provided by Ben, and it should be here https://benryan.com.au/themeco-full-width-parallax-featured-image/. You will have to install the provided child theme and some custom coding.

Thanks!

Hi Rad,

I don’t think you understood my request!

I have already implemented the customisation provided by Ben - as I said, it works beautifully.

Ben’s customisation was created for blog posts, and that’s really great. But I would like to adapt the same customisation so I can use it on pages as well.

Any help with this would be much appreciated!

Hi there,

If you want to create the same effect on pages, you can simply create a section on Cornerstone and specify the top and bottom padding of that section for its height. You can then set the background image for that section and enable the parallax option.

Hope this helps.

Hey @outpost33,

Looks like you’ve withdrawn your post, do let us know if you need any assistance.

Take Care!

Hi Nabeel,

I have opened a new topic here:

Many thanks!

No Problem.
Your new thread will be responded shortly.